あなたのjQuery(プラグイン)が動かない14の理由

jQueryが動かない時の悲しさ。わかります。
僕も何度となく経験していますが、いまとなっては粘り強く原因を究明して対策が打てるようになりました。

今回はjQueryが動かない主な原因について紹介するとともに、どのように対策し動かせるようにすればいいのかの一言解説も付けてみました。
実際のところ対応方法はケースバイケースなので、詳細のアドバイスはなかなか難しいですが、トラブル解決のヒントに役立てていただければ幸いです。

jQueryが動かない原因

jQuery本体を読み込んでいない(あるある度:★☆☆☆☆)

jQuery本体を読み込んでいないと、jQueryを書いても動きませんし、プラグインも動きません。
ここは基本中の基本なので、忘れている人は少ないでしょう。

jQuery本家サイトにて本体をダウンロードしファイルを読み込むか、GoogleのCDNを読み込んで下さい。
後者の方法がおすすめです。

解決方法:
・ソースを確認し修正。jQuery本体を正しく読み込む。

jQuery本体のバージョンが適したものでない(あるある度:★☆☆☆☆)

jQuery本体にはバージョンがあります。
とりあえず最新版を使っておこうと思いがちですが、必ずしも最新版を使えば良いというわけではありません。

最新版は新しいブラウザにのみ対応したバージョンですので、旧ブラウザをサポートしていません。
また、動かしたいjQueryプラグインが、古いバージョンのjQueryを想定して作られている可能性もあります。
読み込むべき本体のバージョンは、どのブラウザを対象とするかによって、あるいはjQueryプラグインの定めた対応バージョンに従って決めるべきです。

そうはいっても実際のところ、バージョンが適したものでないので動かないということは、私の感覚ではめったにありません。

解決方法:
・適した対応バージョンに変更する。

jQuery本体を複数読み込んでいる(あるある度:★☆☆☆☆)

jQuery本体を複数(それも別々のバージョンで)読み込んでしまい、問題を起こしているケースもあります。
本体は一つで結構です。
バージョンに迷った際も、複数のバージョンを読み込むのは控えましょう。

解決方法:
・jQuery本体を一つだけ読み込む。

インターネット接続が切れている(あるある度:★★☆☆☆)

まれにあるのですが、ローカルで制作中にjQueryが動かないなと思ったら、ネット接続自体が切れている場合があります。
特にjQuery本体読み込みをGoogleのCDNで行っている場合は、jQueryが動かなくなることがあります。
素直に接続が復活するまで待ちましょう。

解決方法:
・接続が復活するまで待つ。

URLパスの間違い=必要ファイルが読み込まれていない(あるある度:★★★★★)

結局のところ、このケースが非常に多いですね。
第一に疑うのがこれかもしれません。

その他いろいろなパターンで記述ミスは発生する場合があります。
人間ですからミスはするもの。
落ち着いて修正しましょう。

確認方法ですが、Firefox(またはChrome)のアドオン「Firebug」で確認しましょう。
記述ミスがある場合は、一目瞭然です。
「ソースの読み込みに失敗しました」というようにメッセージが出るはずです。

解決方法:
・必要ファイルそのものが読み込まれているかどうかFirebugで確認する。パスを正しく記述する。

別途読み込む必要があるスクリプトを読み込んでいない(あるある度:★★☆☆☆)

jQueryプラグインを使用する際、大抵は「jQuery本体」と「jQueryプラグイン」を読み込んで、実行スクリプトを記述すればOKです。
しかししばしば、他にも別のファイルの読み込みを必須としているプラグインもあります。

ぱっと思いつくのでは、スクロールバーを独自のデザインに変更する「jScrollPane」という有名プラグイン。
使用する際には、合わせて「mousewheel.js」というプラグインも別途読み込む必要があります。

解決方法:
・jQueryプラグインの配布ページをチェックし、導入に際し必要なファイルを確認し直す。必要なファイルをすべて読み込む。

スクリプトタグの使い方がよくわかっていない(あるある度:★★☆☆☆)

初心者に優しくないサイトで、以下の様なスクリプトのみが紹介されているとします。

「実際にどうやって書いたらいいのかわからない」という方もいるかもしれません。
これに関しては、勉強しましょう。

HTMLファイルに直接記述する場合は、

とします。

それに対し、外部ファイルとして読み込む場合は、

だけを書いて、「script.js」のようなファイル名で保存し、そのファイルを

のように読み込みます。
head内、またはbodyの閉じタグ直前にて読み込みましょう。

解決方法:
・正しい書き方を勉強し、正しい書き方で書く。

HTMLに記述ミスがある(あるある度:★★☆☆☆)

まれにありますが、HTMLの閉じタグをひとつ忘れているなどの記述ミスがある場合、それがjQueryに影響したりします。

大抵の場合、HTMLの記述ミスは表示崩れとして反映されるので一目瞭然なのですが、場合によっては大きく表示崩れしないためミスに気づきにくいケースもあります。
ソースコードそのものに致命的なエラーがないか確認しましょう。

解決方法:
・ソースコードにエラーがないか確認し、HTML記述ミスを修正する。

セレクター記述にミスがある(あるある度:★★☆☆☆)

jQueryで動かしたい要素に、class=”1-slide”とつけたとします。
おそらく動かないのではないでしょうか?

残念ながら、セレクターを数字で始めるのはNGです。
class=”one-slide”など、適した名前に変更しましょう。

解決方法:
・セレクター名がルールに則って書かれているか再確認し、記述ミスを修正する。

jQuery以外のライブラリと競合している(あるある度:★★★☆☆)

例えばWordPressの場合、jQueryの他に「Prototype.js」というライブラリを使用しています。
そのため、jQueryのコードを記述するときに$を使うと、Prototype.js にも$が定義されていて、結果として競合してしまいます。

ではWordPressの場合はどうやって書けばいいんでしょうか?
実は簡単な話で、「$」の変わりに「jQuery」と書けばOKです。
他にも「$」を再定義するという方法もあり、同様に正しく動作するはずです。
(ちなみに、こういう競合のことを「コンフリクト」といいます。)

WordPressの場合は、これが原因の可能性が高いです。

解決方法:
・CMS等のサービスを使用している場合、最初から使用することになっているライブラリが他にないか調べる。
・$の代わりにjQueryと書く。

jQuery同士・jQueryプラグイン同士が競合している(あるある度:★★★★☆)

jQuery同士が、あるいはjQueryのプラグイン同士が競合するケースは、しばしばあります。
例えばスライドショー系プラグインを複数導入すると、競合して動作しなくなるといったケースです。

これに関しては、対応はやや難しいです。

「一つ外して確認、動かなかったらもう一つ外して確認…」を繰り返して、動く時と動かない時の条件を整理していくことで、まずは原因を究明します。
でも原因がわかっても、競合をうまく回避するのは結構困難です。
初心者のうちはいずれかのプラグインを諦めた方がいいかもしれません。

解決方法:
・動かないjQueryプラグイン以外の、すべてのjQueryプラグインを読み込み記述を削除してみる。動くようであればプラグイン同士の競合が原因。
・競合しているプラグインのどちらか一方の使用を諦める。
※対応はケースバイケースなので書ききれません。

head内かbody閉じタグ直前か、記述場所が違う(あるある度:★★★☆☆)

プラグインをbody閉じタグ直前で読み込んでいたら動作しなかったが、head内で読み込むようにしたら動作した、というケースがあります。
あるいは、逆のケースも。

「関数の定義」「関数の呼び出し」というのが関係してくるのですが、簡単にいえば順番が間違っているがゆえに動かないという場合もあると覚えておいて下さい。

解決方法:
・body閉じタグ直前で読み込んでいたものを、head内で読み込んでみる(あるいはその逆)。

jQueryのCSSが他のCSSと競合している(あるある度:★★☆☆☆)

jQueryは動くけれど表示かおかしいという際は、CSSが競合している可能性があります。

以前あるスライドショー系プラグインを導入した際、「row」というclassを使用してありました。
残念ながら、レスポンシブデザイン構築に使用するBootstrapというCSSフレームワークの「row」セレクタと丸かぶりでしたので、表示崩れが発生していました。

スライドショーの「row」を「slide-row」に変更しcssとjsを適宜書き換えたところ、意図した通りの表示で動作しました。

解決方法:
・同じclass名を使っていないかなど、確認する。

(function($){ … }(jQuery)) で囲んでいない(あるある度:★★☆☆☆)

必ずしも(function($){ … }(jQuery)) で囲まなければならないわけではないのですが、とにかく「コレで囲めば動くよ」という初心者向けざっくりアドバイスがあります。
この記事を書くにあたってネットで下調べをしたところ、この方法で動作したという意見がちらほら見つかりました。

一応方法の一つとして残しておきます。

以下のように、動かないjQueryを囲んで下さい。

解決方法:
・上記の通り囲んでみて、動作確認。

まとめ

以上です。

最初に申し上げたとおり、実際のところ動かない原因はケースバイケースです
今回の記事で紹介した原因のどれかに当てはまるのではないかと思いますが、当てはまらないようであれば、独自に原因を究明し対策を立てなければならないので難しいですね。

ですが、案外基本的な部分が間違えているのが原因だったりもすることも多いので、その場合であれば対応可能なのではないでしょうか?
あなたのサイトのjQueryがスイスイ動くよう、ご健闘をお祈り申し上げます。

杉直樹
杉直樹 著者の杉直樹です。
"ライフクエスト"は、基本的にはジャンル多岐にわたる総合ブログです。
"人生をより豊かにする"と"社会をよりよいものにする"にマッチした記事をたくさん書いていけたらと思います。
お役に立てる記事があれば幸いです。