JavaScriptやjQueryがわからない！
JavaScriptやjQueryがわからない！
JavaScriptやjQueryが読めない！自分で書けない！
Web制作を行う時に、欠かせなくないのが主に上記に上げたものだと思います。
「正直よくわからないです。」「理解できないです。」という声も多々聞きます。
多分それの原因のひとつはこれじゃない？というお話です。
ソースをそのままコピペしていませんか？
Webサイトを閲覧したり、テキストなどを購入すればサンプルソースなどが書いてありますし、GitHubやCodePenなどで公開されています。
デモページやCodePen上では当然動きます。
なぜなら、そのように書いてあるのだから。
コピペしたのに動かない？それってセレクタが間違ってないですか？
他にもjQueryだったら・・・
$(function)({
/* HTMLソースが読み込まれた時点で実行 */
});
または
$(window).on('load', function () {
/* コンテンツ（画像など）が全て読み込まれてから実行 */
});
の中に書かれていますか？
意外にホームページ上で公開されているコードはここの部分が省かれているものが多いので、コピペして持ってきている場合、動かないです。
サンプルのjQuery部分だけ持ってきてHTMLやCSSのサンプルは持って来てないとか理解してないまま使用してないですか？
まずよくあるのがこの間違いというかミス？かなと思います。
jQuery部分だけ持って来て、動きません。
サンプルソースのコピペを全面的に否定するわけではありません。
無料で公開されているものは制作者の善意で公開されているものですし、作業の効率化なども考えたら全然ありだと思いますので、ありがたく利用させていただきましょう。
ですが、理解していないまま使うことはやめましょう。
大体の場合が、その場しのぎになってしまいます。
では理解するには？
少なくとも基本的な構文は理解しましょう。
例えば、if文、for文などわからない人はまずはここから覚えましょう。
分岐させたい？ → if文かswitch文を利用しましょう。
繰り返しさせたい？ → for文やdo~while文やeach文を利用しましょう。
これらの基本的な構文がわからなければ、まずはGoogleで検索してみましょう。
ソースコードは大抵これらの組み合わせで作成されています。
ではこれらを踏まえて改めてソースを見ていきます。
上から流れを読むことができますか？
読めなかった場合は、その読めなかった原因を探しましょう。
メソッドがわからなかった場合は、リファレンスを見てみる。
メソッド名 プログラム名 でGoogleで検索するなど。
それでもわからない場合は、人に聞きましょう。
きちんと動いているけど結果がなぜこうなるのかがわからない。
というかそもそも書けないんですけど。。。
何がどうなってそうなるのかの流れを読めるようにしましょう。
読めない場合は事細かに、紙に流れを記述しましょう。（フローチャート図を書く）
これはJavaScriptやjQueryなどを記述するときも同じです。
まずはスタートとゴールを書きます。何がどうなったらいいのか。
例えば、自販機でジュースを買うとします。あなたは何をしますか？
・スタートは自販機の前に立つ事。
・ゴールはジュースを手に入れる事です。
次にスタートとゴールに達するまでにどのような事が必要なのかを細かく書きます。（付け足しでも全然いいです）
１：自販機にお金を入れます。
２：好きなジュースのボタンを押します。
３：お金は足りていますか？（分岐）
４：足りている場合は、ジュースを手に入れる事ができます。
５：足りない場合はお金を追加します。（3に戻る）
という具合ですね。（どちら側の目線で見るか、例えばユーザー側なのか自販機側なのかや、他にもお釣りが出るとか、お金がまだ買える金額入っていれば繰り返すなどあるかもしれませんが、省略します。）
このように、一つずつ考えると、何を記述すれば良いのかがわかるはずです。
あとはひたすら思った事を記述してみましょう。
ソースコード自体が長くなってもいいです。
JavaScriptやjQueryでスタイルが崩れても最初は全く気にしなくていいです。
どちらもあとで直せばよいのですから。
最後に
このような処理の手順であったり、方法、やり方をアルゴリズムといいます。
興味がある人はぜひ勉強してみてはいかがでしょうか？
文中にも書きましたが、コピペを反対している訳ではありません。
言語などでも検索すれば答えが出てくる。ありがたいことです。
コピペしました、動きました、完成！
ただ、そこに止まらずになぜそうなるのかもきちんと理解してください。
そうでなければ応用することもできないからです。
私もまだまだ勉強中です。
きちんと理解し、自分が思う理想のソースを書けるようになりましょう！