jQueryで $ is not define エラーが出たときの一番簡単な解決法

ある日、いつも通りjQueryを使っているとコンソールに次のエラーメッセージが・・・

こういう $ is not defined  エラーってjQueryを使ってると頻繁というほどでもないけど、よく見かけることが多いですよね。

でも実はこのエラーは大したものでなく、少しコードを直せば簡単に解決できます。

ここではエラーの原因とコード修正のやり方について具体的なコード例と一緒にまとめました。

このエラーが出てしまう原因

ずばり $ is not defined  エラーの原因を一言でいうなら

jQueryで読み込まれてない段階でjQuery関数を使おうとしているから

たったこれだけの単純な理由です。

 

例えばエラーが出てしまうのは次みたいなコード例

scriptタグを使ってjQueryをCDNで読み込む前にjQuery関数($で始まるやつ)を実行しようとしてしまっています。これなら $ is not defined  エラーが出てしまうのは当然ですよね。

 

ただし上の例はエラーが出る原因をものすごく単純化したもの

実際は次のような要因が複雑に絡まってエラーが発生してしまいます。

  • WordPressなどのCMSの影響
  • PHPでの呼び出しタイミング

特にWordPressだとjQuery読み込み後に実行しているのに、  $ is not defined  エラーが起こることもしばしば・・・そういう時に正しい対処法を知らないと遠回りな方法を試したりで時間が無駄になります。

でも実はこのエラー、対処するのはとても簡単です。

このエラーへの簡単な対処法

その対処法とはjQueryのおまじないとして書かれる次の部分を少し書き換えるだけ

 

この部分を次のようにjQueryを使わずに書き換えすると動作するようになります。

ウィンドウに対して 'DOMContentLoaded'  というDOMが構築されたときに発火するイベントに実行したいコールバックを登録すればいいだけ。

こうしておけばjQueryが読み込まれる前でも影響を受けないので問題なく処理が実行できるという訳です。(動作的には $(function(){})  と全く同じ)

 

ただし上の DOMContentLoaded  はHTML要素が解析されたすぐ後に実行されるので、CSSや画像の読み込み完了は待たずに実行されます。

なのでページ全部が読み込まれた後に実行したいなら onload  を使う方が最適(次コード)

こういう風に書けば画像のサイズを測ったり、CSSが適用された後の要素に対してjQueryで操作する、といったことができるようになります。

ここまでのまとめ

ということで $ is not define  エラーの原因と解決法でした。

もしこのエラーが出てしまった場合は次の2つのどちらかで対処しましょう。

  • JSのDOMContentLoadedイベントを使う

    次のようにDOMContentLoadedイベントにコールバック登録すればOK

    ちなみにこのイベントはDOMが構築された直後に呼ばれる(画像やCSSは含まない)

  • JSのonloadイベントを使う

    次のようにonloadイベントにjQuery実行するコールバック登録すればOK

    ちなみにこのイベントはDOMに加え、画像やCSSなどの読み込み後に実行される

個人的にはjQuery単体というよりもPHPとかと組み合わせて発生することが多いような気がします。そういう場合にこの対処法が役に立つはずです。

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

7件のコメント
  • 中村

    はじめまして。こんにちは。
    DevTools エラー jQuery is not defined
    で検索して記事を拝見しました。

    今現在、ブログのURLバーの部分に

    「保護されていない通信」

    と出ていまして、その解決方法を一日中模索しているという状況です。

    デベロッパーツールからソースやセキュリティタブなどを見て色々試しています。
    しかしド素人中の素人のため全く分かりません。

    記事を拝見させて頂きました。

    コード例を色々記載して頂いていますが、これらのコードをどこに設定したらいいのか分かりません。
    もしよろしければ教えて頂けませんでしょうか。
    よろしくお願い致します。

    3月 12, 2020 4:07 pm
    • ぴー助

      コメントありがとうございます。
      基本的にはHTMLでも別JSファイルでもどこでもOKです。

      記事内のコードを使うと「どこでjQueryを読み込んでいるか」、「いつjQueryを呼び出すか」に関わらずjQueryが使えるようになります。JSコードとして有効な記述になるならどこに記述追加しても構いません。(基本的には)

      3月 12, 2020 10:18 pm
  • お茶漬け

    ピー助さん、初めまして。
    突然のコメントと質問、失礼します。
    Uncaught ReferenceError: jQuery is not defined at ◯◯◯のエラーが出てしまい、修正の仕方を検索しているうちに
    ピー助さんのサイトにたどり着きました。
    エラーの解決方法がわかりやすく書かれているのですが、本当に素人のため、ワードプレスのどのファイルに書けばいいのか、書く場所も全くわかりません。
    >Sコードとして有効な記述になるならどこに記述追加しても構いません。
    と書かれていますが、これが既にわからないのです・・・すみません。
    本当にお手数で申し訳ありませんが、具体的におすすめの記述場所を教えていただけますと幸いです。

    6月 13, 2020 12:26 pm
    • ぴー助

      コメントありがとうございます。
      ワードプレスなら使用中テーマに javascript.js があるはずです。その最後にコード追加すれば、恐らく解決できると思うのですが・・・もちろんjQueryが読み込まれている前提の話です。お役に立てるか分からないですが、参考までに。

      6月 13, 2020 12:35 pm
  • トンカツ海舟

    そもそもエラー文で「$」がダメだと言われているのに、
    なぜ対処法のところで

    $(function(){
    /** jQueryの処理 */
    });

    と書いているのでしょうか?
    「豆が食べられない人に、納豆を食べさせようとしている」のと全く同じですよ。
    (もちろん、この方法では解決しないですが。
    その下に書かれている
    window.onload = function() {};
    という方法でも解決しませんでした。)

    それとも、それで解決した事例があるのでしょうか?
    もしあれば、サンプルを見せて頂ければ幸いです。
    宜しくお願い致します。

    3月 17, 2023 5:19 pm
    • ぴー助

      コメントありがとうございます。

      $(function(){
      /** jQueryの処理 */
      });

      これは $ is not defined が発生するコード例であり、その下にある window.addEventListener(‘DOMContentLoaded’, …) が解決策となるコード例です。そして window.onlod = function() {}; が動作しないのは window.onload は1つしかコールバックを設定できないためです。推測ですが、onloadを上書きするなどしている可能性があります。

      これで解決した事例はあります。もしそれでも解決しない場合、開発者ツールなどでエラーが出ていないかどうか・可能ならjQueryをヘッダーなどで最優先で読み込み、などの対策も効果的です。

      3月 17, 2023 8:31 pm
  • トンカツ海舟

    すみません。
    勘違いでした。
    とりあえず、解決できました。
    ありがとうございます。

    3月 17, 2023 11:02 pm

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください