jQueryが動かないときには?

jQueryが動かないときには?

jQueryが動かない原因の調べ方、代表的なエラーを解説しています。

動かない原因を調べよう!

動かない原因を調べるには、ブラウザの開発者ツールを使用します。

Chromeではデベロッパーツール、Firefoxでは開発ツール、SafariではWebインスペクタと呼ばれるものです。

開発者ツールのコンソール(Console)を確認することで、jQueryのエラーを調べることができます。

表示されたエラーをGoogleで検索すれば、大抵の場合は答えが返ってきます。

$, jQueryの未定義エラー

Uncaught ReferenceError: $ is not defined
Uncaught ReferenceError: jQuery is not defined

サンプルは、$, jQueryが未定義のときに発生する参照エラーです。

jQueryが正常に読み込まれていない場合に発生することが多いです。

Windowsのローカル環境でjQueryが動かない

file://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js net::ERR_FILE_NOT_FOUND

ファイルが存在しないというネットワークエラーが発生しています。

URLが正しいのにjQueryが読み込まれない場合は、プロトコルが指定されているかを確認しましょう。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

script要素のsrc属性は、プロトコルを省略した場合、接続中のプロトコルが補完されます。

表示中のページがhttpであればhttp, httpsであればhttpsです。

Windowsのローカル環境の場合、ローカルネットワーク向けのfileプロトコルが使用されます。

上のエラーの通り、file://を参照しているため、http, httpsで提供されているファイルにはアクセスできません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

ローカルでサーバー上のjQueryを読み込む場合は、http, httpsを明示的に指定しましょう。

サーバー上でjQueryが動かない

Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'. This request has been blocked; the content must be served over HTTPS.

表示中のページがhttpsの場合、httpのスクリプトはブロックされる場合があります。

ページを暗号化しても、スクリプトから通信の内容が漏れては、元の木阿弥だからです。

サーバー上でjQueryを読み込む場合にも、プロトコルに注意しましょう。

WordPressでjQueryが動かない

WordPressに同梱されているjQueryは、prototype.jsとの競合を避けるため、$が使用できないようになっています。

$('div').show();
Uncaught ReferenceError: $ is not defined

例えば、jQueryオブジェクトの選択で$を使うと、$が未定義であるという参照エラーが発生します。

jQuery('div').show();

WordPress標準のjQueryを使用する場合、$をjQueryに書き換えれば、正常に動作します。

$はjQueryのショートカットなので、実体であるjQueryを使用すれば、問題ないということです。

jQuery(function($){
    $('div').show();
});

jQuery(function($){ });でコード全体を囲めば、$をそのまま使用することもできます。

コーディング量が多い場合は、こちらの手法の方がコードがスッキリします。

まとめ

  • jQueryが動かない原因を調べるには、開発者ツールのコンソールを調べます。
  • ローカル環境で動かない場合は、プロトコルを明示します。
  • サーバー上で動かない場合は、httpsでhttpのスクリプトを読み込んでいないかを確認します。
  • WordPressでjQueryが動かない場合は、$の代わりにjQueryを使います。

入門カテゴリの最新記事