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

jQueryが動かない時の悲しさ…。
わかります。

私も何度となく経験していますが、いまとなっては、大抵の場合原因を究明し対策が打てるようになりました。

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

jQueryが動かない原因

jQuery本体を読み込んでいない

あるある度:★☆☆☆☆

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

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

これが原因か確かめる方法:
■ソースを確認
解決方法:
■jQuery本体を読み込む。

jQuery本体のバージョンが適したものでない

あるある度:★☆☆☆☆

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

最新版は新しいブラウザにのみ対応したバージョンですので、旧ブラウザをサポートしていません。
逆に、古い(古すぎる)バージョンは、古いブラウザに対応しています。

読み込むべき本体のバージョンは、どのブラウザを対象とするかによって、あるいはjQueryプラグインの定めた対応バージョンに従って決めるべきです。

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

これが原因か確かめる方法:
■jQueryプラグインが動かない場合、そのプラグインの配布ページに行って対応バージョンなどを確認する
解決方法:
■適した対応バージョンに変更

jQuery本体を複数読み込んでいる

あるある度:★☆☆☆☆

jQueryプラグインを導入する際、親切に導入方法を解説されているサイトを見て「本体とプラグインのファイルを読み込みましょう」と書いてあるため、「ひとつのプラグイン導入につきその都度本体を読み込んでしまう」というミスを犯してしまっている人がいらっしゃるかもしれません。
本体は一つで結構です。

バージョンに迷った際も、複数のバージョンを読み込むのは控えましょう。

これが原因か確かめる方法:
■ソースを確認
解決方法:
■jQuery本体をひとつだけ読み込む。

インターネット接続が切れている

あるある度:★★☆☆☆

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

全然関係のない話ですが、著者は、学生時代はマンション付属の回線を使って有線で、現在は自宅の無線でインターネット接続しているのですが、いずれの場合もしばしば回線が切れます。

これが原因か確かめる方法:
■接続が切れていないか確認する
解決方法:
■接続復活待ち。

URLパスが間違えている

あるある度:★★★★★

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

その他いろいろなパターンで、記述ミスをしてしまいます。
人間ですから、ミスはします。

確認方法ですが、Firefox(またはChrome)のアドオン「Firebug」で確認しましょう。
(アドオンを追加していない方は、絶対に追加すべきだと思いますよ。最強に便利なツールなので。)
記述ミスがある場合は、一目瞭然です。

これが原因か確かめる方法:
■Firebugで確認。
解決方法:
■パスを正しく記述する。

読み込む必要があるスクリプトを読み込んでいない

あるある度:★★☆☆☆

jQueryプラグインを使用する際、大抵は(本体と実行スクリプトを除いて)ひとつのファイルを読み込めばOKなのです。
しかし、しばしばjQueryUIなど、他にも別のファイルの読み込みを必須としているプラグインもあります。

ぱっと思いつくのでは、スクロールバーを独自のデザインに変更する「jScrollPane」を使用する際、「mousewheel.js」というjsも別途導入する必要があります。
※このブログにも現在導入しています。

これが原因か確かめる方法:
■jQueryプラグインの配布ページをチェックし、導入に際し必要なファイルを確認
解決方法:
■必要なファイルをすべて読み込む

スクリプトタグの使い方がよくわかっていない

あるある度:★★☆☆☆

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

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

htmlに直書きする場合は、

とします。

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

だけを書いて、”○○○.js”として保存し、そのファイルを

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

これが原因か確かめる方法:
■正しい書き方を勉強し、確認する。
解決方法:
■正しい書き方で書く。

HTMLに記述ミスがある

あるある度:★★☆☆☆

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

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

ちなみに、老婆心ですが、Firebugで確認した際にHTML構造が崩れていないかどうか一瞬でわかるように、HTMLの階層は以下のように一目見てわかるように作ったほうがいいですよ。

このように、全体をわかりやすい階層で構築するように常日頃から心がけていれば、構造崩れの確認時に楽です。

これが原因か確かめる方法:
■Firebugで確認。
解決方法:
■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のプラグイン同士が競合するケースは、しばしばあります。

スライドショー系プラグインを複数導入すると、競合して動作しなくなるといったケースです。
また、独自でタブ機能を実装しうまく動作したのに、タブを2箇所で動かそうとするとその2つが競合して動作しなくなるというケースもあります。

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

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

これが原因か確かめる方法:
■一旦、その他のjQueryの読み込み(あるいは記述)をすべて削除してみて、動かなかったプラグイン単体で改めて動作確認してみる。
→動くようであれば、jQuery同士の競合が原因。
解決方法:
■競合しているプラグインのどちらか一方の使用を諦める
(対応はケースバイケースなので書ききれません。)

head内かbody閉じタグ直前か、記述場所が違う

あるある度:★★★☆☆

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

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

これが原因か確かめる方法:
■試しに、body閉じタグ直前で読み込んでいたものを、head内で読み込んでみる
(あるいはその逆)
解決方法:
■body閉じタグ直前で読み込んでいたものを、head内で読み込んでみる
(あるいはその逆)

jQueryのCSSが他のCSSと競合している

あるある度:★★☆☆☆

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

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

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

これが原因か確かめる方法:
■一旦、jQueryに関わるCSS以外のすべてのCSSを削除してみて、動作確認する。
→意図したとおりに綺麗に動くようであれば、CSSの競合が原因。
解決方法:
■同じclass名を使っていないかなどを、確認する。

(function($){ … }(jQuery)) で囲んでいない

あるある度:★★☆☆☆

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

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

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

これが原因か確かめる方法:
■上記の通り囲んでみて、動作確認。
解決方法:
■上記の通り囲む。

まとめ

以上です。

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

ですが、案外基本的な部分が間違えているのが原因だったりもすることも多いので、その場合であれば対応可能なのではないでしょうか?

あなたのサイトのjQueryがスイスイ動くよう、ご健闘をお祈り申し上げます。
ではでは。

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