caught ReferenceError: $ is not defined

jQuery（ジェイクエリ）

2023.07.03

この記事は約3分で読めます。

「$は定義されていません」というReferenceErrorが発生しました。

jQueryを読み込んでいない

このエラーは、通常、jQueryを使用していないために発生します。$は、通常、jQueryのエイリアスとして使用されますが、jQueryを読み込んでいない場合、$は定義されていません。

jQueryを使用するには、まずjQueryをダウンロードして、スクリプトに読み込む必要があります。

jQueryをダウンロードする
jQueryを公式サイト（https://jquery.com/）からダウンロードします。ダウンロードしたファイルは、自分が作成したHTMLファイルと同じディレクトリに配置します。

jQueryをHTMLファイルに読み込む
jQueryを使用するためには、HTMLファイル内でjQueryを読み込む必要があります。以下のように、head要素内でjQueryを読み込むことができます。

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

ここで、jquery-3.6.0.min.jsは、ダウンロードしたjQueryファイルの名前です。必要に応じて、ファイル名を変更してください。

$エイリアスを使用する
jQueryが読み込まれたら、$エイリアスを使用してjQueryの関数を呼び出すことができます。例えば、以下のようにして、jQueryでDOM要素を選択することができます。

$(document).ready(function() {
// DOM要素を選択する
var element = $("div");
});

ここで、$(document).ready(function() { … });は、DOMが完全に読み込まれた後に関数を実行するためのjQueryのメソッドです。必ず使用するようにしてください。

CDNを使用してjQueryを読み込むこともできます。

CDNとは、Content Delivery Networkの略で、jQueryのような静的ファイルを高速で配信するためのサービスです。

以下の手順で、CDNを使用してjQueryを読み込むことができます。

head要素内で、以下のようにCDNのURLを指定してjQueryを読み込みます。

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

ここで、https://code.jquery.com/jquery-3.6.0.min.jsは、jQueryの公式CDNのURLです。このURLを使用することで、自分自身のサーバーにjQueryをダウンロードする必要がなくなります。

$エイリアスを使用してjQueryの関数を呼び出します。

$(document).ready(function() {
  // DOM要素を選択する
  var element = $("div");
});

これで、$エイリアスを使用してjQueryの関数を呼び出すことができます。jQueryは、Web開発において非常に便利なライブラリですので、ぜひ活用してみてください。