uncaught referenceerror $ is not definedの原因と対処法

uncaught referenceerror $ is not definedの原因と対処法について知りたいときはないでしょうか。

けど、そんな中で悩むことは、

ですよね。

今回はそんなお悩みを解決する

についてまとめます！

uncaught referenceerror $ is not definedについて

“uncaught referenceerror $ is not defined” エラーについて説明をします。

“uncaught referenceerror $ is not defined” エラーは、通常、jQueryを使用しているWebページで発生します。このエラーは、jQueryが読み込まれていない場合に発生する可能性があります。

以下はこのエラーのいくつかの原因と対処法になります。

uncaught referenceerror $ is not definedが発生する原因と対処法

uncaught referenceerror $ is not definedが発生する原因と対処法について説明をします。

jQueryが読み込まれていない場合

jQueryが読み込まれていない場合に発生します。

エラー発生コード

以下が参照元から接続できない環境である場合にエラーが発生します。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

エラー内容

タカヒロ

おもにファイアウォールやWAFなどで外部ドメインの通信を制御している場合に発生するかと思います。
タカヒロも現場で遭遇しました。原因は通信許可設定のホワイトリストの登録が編集され、jquery.comドメイン経由の通信がブロックされていたためでした。

対処法

jQueryをローカルから読み込む場合には、以下のように指定します。

<script src="js/jquery-3.6.0.min.js"></script>

もし通信許可設定が影響しているようであれば許可することを検討しましょう。

jQueryが競合している場合

他のJavaScriptライブラリやフレームワークとjQueryが競合している場合には、$エイリアスが上書きされてしまい、エラーが発生することがあります。

エラー発生コード

以下は競合が発生している場合にエラーとなりますが、競合がなければ正常に稼働します。

$(document).ready(function() {
  console.log("jQuery動いています!");
});

エラー内容

対処法

$の箇所を以下のように記述することができます。

jQuery(document).ready(function() {
  console.log("jQuery動いています!");
});

jQueryが読み込まれる前にjQueryメソッドを使った場合

jQueryが読み込まれる前にjQueryメソッドを使った場合にエラーが発生します。

エラー発生コード

<script>
$(document).ready(function() {
  console.log("jQuery動いています!");
});
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 

エラー内容

対処法

jQueryが先に読み込まれるよう順番を修正します。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 

<script>
$(document).ready(function() {
  console.log("jQuery動いています!");
});
</script>

さいごに

いかがでしょうか。

今回は、

についてまとめました。

また、他にも役に立つ情報がありますので、よろしければご参照頂ければと思います。