JS memo

お洒落にJavaScript。

2019年2月4日20:53

jQueyの$がnot foundのエラーについて

メインビジュアル

jQueyの$がnot foundのエラーについて

Uncaught ReferenceError: $ is not defined:

上記のようなエラーに遭遇した時の対処方法をご紹介いたします。

    目次

  1. エラーの原因
  2. 解決方法
  3. まとめ

エラーの原因

このエラーはJQueryを使用したjsを読み込むタイミングで、JQuery本体が読み込まれていないことが原因です。そのためなぜ読まれていないかを探る必要があります。

JQueryが読まれていない原因をいくつか考えてみましょう。

解決方法

jsよりもJQuery本体を後で読み込んでいる

jsは非同期処理の設定をしない限り、上から順に読まれるので、jsより下にJQueryを書くとエラーが起こります。

<script>
  $(function(){
    console.log("I'm hungry.")
   });
 </script>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

この場合はJQuery本体をjsより上に書くことで解決できます。

理由があって順番を入れ替えれない場合は、jsを後に読み込むよう設定します。

詳しくはこちら→

JQuery本体のURL指定

CDNを利用している場合、下記のようにJQueyのURLにhttps://を省略してしまうと、JQuery本体は読み込まれません。

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

これはhttps://をURLにつけて上げることで解決できます。

まとめ

このエラーはJQueryが読み込まれていないことが原因なので、比較的簡単に解決できます。

上記の2つが主な原因だと思いますが、記述ミスなどの単なる自分のミスの場合もあるので、このエラーが出たら、まずはJQuery本体の記述を確認してみましょう。