jQueryが動かない（動作しない）理由を考察！スクリプトのどの箇所にミスがあるかを調べる裏技も紹介

jQueryが動かない時の悲しさは、筆者も幾度となく経験しています。

ですが今となっては、粘り強く原因を究明し対応できるようになりました。

本稿では、jQueryが動かない主な原因について紹介するとともに、どのように対応し動かせばよいのかの解説もつけてみました。

実際のところ、対応方法はケースバイケースですので、詳細のアドバイスはなかなか難しいのですが、トラブル解決のヒントに役立てていただければ幸いです。

jQueryが動かない原因を考察

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

あるある度：★☆☆☆☆

ここは基本中の基本ですので、忘れている人は少ないかと思いますが…

jQuery本体を読み込んでいないと、スクリプトを書いても動きません。

jQuery本家サイトにて本体をダウンロードしファイルを読み込むか、GoogleのCDNを読み込みましょう。（後者の方法を推奨。）

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

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

あるある度：★☆☆☆☆

jQuery本体にはバージョンがあります。

動かしたいjQueryプラグインが古いバージョンのjQueryを想定して作られていれば、新しいバージョンでは動かない可能性があります。

読み込むべきjQuery本体のバージョンは、jQueryプラグインのホームページに推奨バージョンの記載があるはずですので、それに従いましょう。

といっても、セキュリティの観点から、最新バージョンのjQueryを使用し、jQueryプラグインもそれに対応しているのを選ぶのがおすすめです。

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

あるある度：★☆☆☆☆

jQuery本体を複数読み込んでしまい、問題を起こしているケース。

本体はひとつでよいです。

バージョンに迷ったからといって、複数のバージョンを読み込むのもよくないです。

scriptタグの使い方を学んでいない（よくわかっていない）

あるある度：★★☆☆☆

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

jQuery(window).load(function() {
 jQuery('.flexslider').flexslider({
  animation: "fade"
 });
});

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

これに関しては勉強あるのみですが…。

 

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

<script type="text/javascript">
jQuery(window).load(function() {
 jQuery('.flexslider').flexslider({
  animation: "fade"
 });
});
</script>

とします。

 

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

jQuery(window).load(function() {
 jQuery('.flexslider').flexslider({
  animation: "fade"
 });
});

だけを書いて、「script.js」のようなファイル名で保存し、そのファイルをHTMLファイルから呼び出します。

<script type="text/javascript" src="../script.js"></script>

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

あるある度：★★☆☆☆

以前、ローカルで制作中に「あれ？jQueryが動かないな？」と思ったら、ネット接続自体が切れていた、というケースがありました。

jQuery本体読み込みをGoogleのCDNで行っている場合は、jQueryが動作しなくなります。

素直に接続が復活するまで待ちましょう。

URLパスの間違い=必要ファイルが読み込まれていない

あるある度：★★★★★

結局のところ、このケースが非常に多いですね。

第一に疑うべきはURLパス間違いです。

 

以下例を挙げてみましょう。

<script type="text/javascript" src="js/jquery.flexslider.js"></script>

とすべきところを、

<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.flexslider"></script>

みたいに、どこかちょっと間違えて記述してしまっているパターン。

落ち着いて修正しましょう。

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

あるある度：★★☆☆☆

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

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

忘れがちなので注意。

HTMLに記述ミスがある

あるある度：★★★☆☆

divの閉じタグをひとつ忘れているなど、HTMLに何らかの記述ミスがある場合、それが影響してjQueryを動作させなくするケースがあります。

HTMLの記述をミスしている場合、たいてい何らの表示崩れが発生するので一目瞭然なのですが、表示崩れしていなかったらミスに気づきにくいですよね。

ソースコードそのものに致命的なエラーがないか確認しよう。

セレクター記述にミスがある

あるある度：★★☆☆☆

jQueryで動かしたい要素に、「class=”1-slide”」とつけたとしましょう。

これは動きません。残念ながら、セレクターを数字で始めるのはNG。

「class=”one-slide”」など適した名前に変更しましょう。

jQuery以外のライブラリと競合している

あるある度：★★★★★

例えばWordPressの場合、jQueryの他に「Prototype.js」というライブラリを使用しています。

そのため、jQueryのコードを記述するときに$を使うと、「Prototype.js」にも$が定義されていて競合してしまいます。

では、WordPressの場合はどうやって書けばよいのか？

実は簡単な話で、「$」の変わりに「jQuery」と書けばOK。

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

jQueryプラグイン同士が競合している

あるある度：★★★★☆

jQueryのプラグイン同士が競合するケースはしばしばあります。

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

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

「ひとつ外して確認、動かなかったらもうひとつ外して確認…」を繰り返して、動く時と動かない時の条件を整理していくことで、原因を究明しましょう。

しかし原因がわかっても、競合をうまく回避するのは結構困難です。

いずれかのプラグイン利用を諦めざるをえないかもしれない…。ですね。

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

あるある度：★★★☆☆

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

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

あるある度：★★☆☆☆

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

以前あるスライドショー系プラグインを導入した際、「row」というclassが使用してあった。

残念ながらこの「row」というclassは、元々既に使用済みであったため表示崩れが発生してしまいました。

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

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

あるある度：★★☆☆☆

初心者向けのざっくりアドバイス。。

この記事を書くにあたってネットで下調べをしたところ、この方法で動作したという意見がちらほら見つかりましたので、方法のひとつとして残しておきます。

動かないスクリプトの最初と最後に以下のように追記し、囲んであげましょう。

(function($){
…
}(jQuery));

スクリプトのどの箇所に問題があるかを調べる裏技

初心者向けに、便利な裏技を紹介しておきましょう。

alert('OK');

という命令があります。

「読み込み完了後にアラートを出す」という単純な命令です。

上記アラート命令をjsファイルのどこかに記述し、ブラウザでページを再読み込みしてみましょう。

アラートが出れば、アラート命令より前のスクリプトにミスはありません。

アラートが出なければ、アラート命令より前のスクリプトにミスがあります。

どこにミスがあるかを調査するうえで便利です。

まとめ

最初に申し上げたとおり、実際のところ動かない原因はケースバイケースです。

今回の記事で紹介した原因のどれかに当てはまるのではないかと思われますが、当てはまらないようであれば、独自に原因を究明し対応しなければならないので、難しいです。

ただ案外基本的な間違いが原因だったりもすることも多いですので、その場合は対応可能だと思います。

あなたのサイトのjQueryがスイスイ動きますように…。