jQueryが動かない原因と対処法をご紹介！
WEBサイトにjQueryを設定して、いざ使うと思った時に参考にして下さい。jQueryが動かない原因の切り分け方や対処法を紹介しています。
jQueryが動かない
WEBサイトにjQueryを設定して、いざ使うと思った時に、なぜか動かない・・というご経験はないでしょうか。
jQueryを使うと動きのあるWEBページを簡単に作ることが出来ますが、その最初の一歩である読み込みにハマるところが最初の関門です。
今回jQueryが動かない原因と対処法を順番に紹介していきます。大体のパターンを網羅できていると思いますので、ぜひご自身の状況にあわせた解決策を参考にしてみて下さい。
jQueryが動かない原因と対処法
jQueryが正しく読み込めていない
まずは一番ありがちなケースでjQueryが読み込めていないパターンです。特にjQueryをCDNではなく、ローカルから読み込んでいる方はこのパターンが多いです。
原因の切り分け方
まずはjQueryが正しく読み込めているか確認しましょう。jQueryが動かない該当のページをGoogle Chromeで開き、デベロッパーツールを開きましょう。
デベロッパーツールの開き方が分からない方は下記を参考にしましょう。
Consoleタブが開いたら下記の1行のコードを記述してEnterキーでコードを実行しましょう。
jQueryのバージョンを調べるJavaScriptコード
$.fn.jquery
このように何らかの数値が表示された方は無事にjQueryが読み込めています。
一方でこのようにjQueryが読み込めていない場合は、このように赤字のエラーが表示されます。
このあと紹介する対処法を実践しましょう。
対処法
jQueryが正しく読み込めていない場合は、下記をコピーしてHTMLのhead要素の中に記述しましょう。
jQueryのCDNからの読み込み
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>上記が記述出来たら、一度再読み込みを行い、再度デベロッパーツールからバージョン情報が表示されるか確認しましょう。
jQueryの読み込み前にjQueryを使っている
次に多いのが、このパターンです。jQueryの本体を読み込む前に、jQueryを使おうとしてエラーが出ているパターンです。
特に最近ではスクリプトの遅延読み込みが一般的になってきたため、必ずしもHTMLのタグを書いた順に処理されるわけではなく、この問題が増えています。
原因の切り分け方
デベロッパーツールで「jQuery is not defined」のようなエラーが発生している場合はjQueryの読み込み前にjQueryを使おうとしているパターンです。
対処法
jQueryの読み込みの後にjQueryを利用するJavaScriptの記述や、JSファイルの読み込みを行いましょう。
またasyncやdeferなどで遅延読み込みをしている場合は、とりあえずこれらの属性を削除することで、タグの順番通りにスクリプトの読み込みが行われます。
一度属性を削除して、jQueryが動くことを確認してから再度適切に遅延読み込みを行う順番がおすすめです。
HTML読み込み完了前に、HTML要素に処理を行おうとしている
次に多いのがこのパターンです。jQueryはhead要素などで読み込めており、JavaScriptの記述でもエラーは吐いてはいないが、なぜか動かないというパターンで多いです。
これはHTML読み込み前に、つまりブラウザがDOMを把握する前に、jQueryでHTML要素を指定した処理を行おうとしていることが原因です。
原因の切り分け方
下記のようなパターンに陥っていないか確認しましょう。
jQuery本体とJSファイルがhead要素で読み込まれている場合は要注意です。
jQuery本体とJSファイルがhead要素で読み込まれいてる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの呼び出し</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<h1>見出し</h1>
</body>
</html>この場合、index.jsで
index.js
$("h1").fadeOut();と記述すると、正常に動作しません。繰り返しになりますが、head要素の時点ではまだh1要素は解釈されていないため、jQueryでh1をセレクタにしても対象が存在しないためです。
対処法
対処法は２つあります。
まずはjQuery本体とJSの呼び出しをbodyの閉じタグの直前にすることです。
bodyの閉じの直前で読み込む
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの呼び出し</title>
</head>
<body>
<h1>見出し</h1>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="index.js"></script>
</body>
</html>この位置であれば、ブラウザはh1要素を解釈しているため、正常に動作します。
もう一つの方法はjQueryに関数を渡しHTML読み込み完了後に関数を実行する方法を使う事です。
index.js
// HTML読み込み完了後に実行する関数をjQueryに渡している
jQuery(function() {
$('h1').fadeOut();
});上記を定型文としてもいいですが、上記の関数の中の処理はHTML読み込み完了後に実行されるため、h1要素は解釈されています。
もしこの書き方の詳細を知りたい方は当サービズのjQueryのカリキュラムで詳細を解説していますので、ぜひ学習してみて下さい。
JavaScriptの文法エラー
jQueryを利用しようとしているご自身が書かれたJavaScriptの記述でエラーが発生している場合があります。
同じくデベロッパーツールのコンソールに何かエラーが出ていないか確認しましょう。
このようにJavaScriptでエラーが発生しているとjQueryを使った処理は正常に動きません。
jQueryを2重に読み込んでいる
jQueryを2重や3重など複数読み込んでいる場合も正常に動かない場合があります。一度ソースコードを見て、jQueryの読み込みが1つのみか確認しましょう。
インターネットに接続できていない場合
レアケースですが、インターネットに接続できていない場合もjQueryが正常に読み込めていない場合があります。
ネット接続を確認してみましょう。
またjQueryの本体を外部のサーバーから読み込んでいる場合はそのサーバーがダウンしていても正常に読み込めません。
読み込み先をCDNに変えて試すなどしてみましょう。
プラグインが動かない問題
jQueryではなくプラグインが動かない場合も紹介しておきます。プラグインが動かない場合は
- プラグインのファイルが読み込めていない
- jQueryより先にプラグインを読み込んでいる
- jQuery本体がプラグインが指定しているバージョンではない
1.プラグインのファイルが読み込めていない
プラグインのファイルが読み込めていないともちろんプラグインは動作しません。一度正しく読み込めているかデベロッパーツールなどで確かめましょう。
2.jQueryより先にプラグインを読み込んでいる
プラグインを使う場合は、先にjQuery本体を読み込むようにしましょう。
プラグインの読み込み
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="プラグインのファイル"></script>
3.jQuery本体がプラグインが指定しているバージョンではない
jQueryの本体は日々バージョンアップしており、新しいメソッドがどんどん増えています。jQueryのプラグインがその新しいメソッドを使っている場合は、古いjQuery本体を使っていると正常に動かない場合があります。
動かないプラグインの公式ページなどで対応しているjQuery本体のバージョンを確認しましょう。
IE
原因はIEと書いてしまいましたが、jQueryは大きく分けてバージョンが
- 1系
- 2系
- 3系
もしもjQueryが動かない・効かないというのがIEのブラウザであれば2系や3系のjQueryを利用しているはずです。
もしもIE8以前にも対応する必要があれば1系を使いましょう。
デベロッパーツールが開いたら、Consoleタブをクリックしましょう。