こんにちはー！かんきつ子です。

サイト制作について学び始めたら、jQueryで色んな動きを試したくなりますよね！写真をスライドさせてみたり、ふわっとサイトを表示させてみたり、ちょっと難しそうなパララックスを付けてみたかったり。

そんな時に必ずと言っていいほどぶち当たる壁。

「jQueryが動かないんだけど・・・（汗）」

初心者のみなさん安心してください。
私は数年web制作に携わっていますが、今まで動かなかった経験がかなりあります。

今回はjQueryが動かなくなった時の初心者がやってしまいがちのミスをまとめました。なぜ動かなかったのかこれを参考にし、修正してみてください。

【初心者ミス01】jQueryがちゃんと読み込まれていない

動かしたいプラグインだけ記述しても動きません。jQueryのコードを読み込ませましょう。もし読み込んでなかった場合下記を読み込んでください。

※上記方法はgoogleにホストされているjQueryのファイルを直接読み込ませている方法です。

【初心者ミス02】jQueryが複数読み込まれている

これもやってしまう初心者の方が多いです。
下記のように、違うバージョンのjQueryファイルを読み込ませている場合があります。

このように2つとも並んでいればいいのですが、それぞれ離れた場所に記述してあると気づきにくいものです。確認してみましょう。

【初心者ミス03】jQueryのバージョンが古い

プラグインによっては、古いバージョンだと動かない場合があります。その場合は新しいバージョンに変更してみましょう。

【初心者ミス04】スペルの小文字が大文字になっている

例えば『citrusblog.js』というプラグインがあったとしましょう。
これを下記のように「b」を「B」といった感じでスペルを大文字にしてしまうと動きません。

「え、こんなことやらないでしょ！」とか思った方いると思いますが、これは意外に多いのです。
何故かというと、参考サイトがたまにプラグインのファイル名を間違って記述しているのに、そのままコピペをして使用する方が多いからです。
なので、どこが間違っているか分かりません。
しかもこのミスの厄介なところは、ローカル環境（自分のパソコン上）では動くので、ミスに気付きにくいんです。サーバーに上げて確認すると動きません・・・。そしてパニックになるという。私も初心者の時にやらかしました。

【初心者ミス05】プラグインのパスが間違っている

ディレクトリの位置関係がまだ曖昧な初心者に多いミスです。

例えばですが、このようなファイル構成なのに、

上記のように記述すると読み込まれません。パスが違います。

正しくはこれです。

先程のミス同様、参考サイトからそのままコピペをして、自分のサイトのファイル構成に沿ったパスに変更できていないからです。
きちんとファイルが読み込まれているか確認しましょう。

おわりに

jQueryのバージョンなど、変更しても動かない場合は元に戻しましょう。jQueryが動かない場合に限らず、サイト制作全般に言えることですが、1つ1つ試して何が原因か確認しながら作業を行うことが大事です。

またこういった見落としがちなミスは、次もやってしまう可能性がありますので、なぜ動かなくなってしまったのか、その原因を覚えておきましょう！そうすることにより、次回からは同じミスはせずに作業が早くなります。

今回ご紹介した5つのミスをしていないか、ぜひ確認してみてください。