blog

ブログ

Javascript

2014年09月16日

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>

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

人間なのでミスはするもの。落ち着いて修正しよう。

確認方法だが、Firefoxなら「要素を調査」、Chromeなら「検証」で確認しよう。記述ミスがある場合は一目瞭然。「ソースの読み込みに失敗しました」とメッセージが出るはずだ。

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

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

あるある度：★★☆☆☆

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

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

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

HTMLに記述ミスがある

あるある度：★★★☆☆

divの閉じタグをひとつ忘れているなど、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が使用してあった。残念ながらこの「row」というクラスは元々既に使用済みであったため表示崩れが発生した。スライドショーの「row」を「slide-row」に変更しcssファイルもjsファイルも同様に書き換えたところ、意図した通りの表示で動作した。

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