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

JavaScript





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について

“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>

エラー内容

Uncaught ReferenceError: $ is not defined

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

対処法

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

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

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

jQueryが競合している場合

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

エラー発生コード

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

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

エラー内容

Uncaught ReferenceError: $ is not defined

対処法

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

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> 

エラー内容

Uncaught ReferenceError: $ is not defined

対処法

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

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

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

さいごに

いかがでしょうか。

今回は、

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

についてまとめました。

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



この記事の関連キーワード

こちらの記事の関連キーワード一覧です。クリックするとキーワードに関連する記事一覧が閲覧できます。