本記事では、jQueryをCDNで読み込む方法についてサンプルコードを用いて分かりやすく解説しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
jQueryの導入
jQueryを導入するには、2つの方法があります。1つ目が公式ページからjQueryを動かすために必要なファイルをダウンロードする方法、2つ目がCDNを使う方法です。
今回は、導入が一番簡単でおすすめなCDNを読み込む方法を利用します。
- 公式ページ：オフラインで使用可能
- CDN：ファイルをダウンロードする必要がない
公式ページからファイルをダウンロードする方法については下記の記事で紹介しているので、興味のある方はご覧ください。
CDNを使う
CDNとはContents Delivery Networkの略で、外部のファイルをリンク１つで使用することができる仕組みのことを指します。
jQueryをCDNで利用する場合、下記の「jQuery」「Google」「Microsoft」の3つからお好きなCDNを一つ選び、HTMLの</body>の直前に記述します。
/* ↓jQueryのCDN */
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
/* ↓GoogleのCDN */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
/* ↓MicrosoftのCDN */
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.min.js"></script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- ↓ここにCDNを配置する -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</body>
</html>jQueryの記述場所
jQueryを使って書いたコードは、CDNよりも後に配置します。その理由はHTMLは上から順番にコードを実行させていくため、jQueryがまだ読み込まれていない状態でjQueryでしか扱えない$やメソッドを使ってしまうと、その記述はJavaScriptで実行できませんとエラーが出力されてしまうからです。
上記の注意事項を踏まえた上で、エラーが出力されないようにするための正しいファイル配置は以下のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- ↓CDNの記述よりも後ろに配置 -->
<script src="ファイルパス/ファイル名.js"></script>
</body>
</html>jQueryが正しく実行させるか確認
最後にCDNで読み込んだjQueryが正しく実行されるか確認しましょう。
下記のサンプルコードをコピペして、対象のhtmlファイルをブラウザで開きます。表示されている文字が赤色になっていればjQueryが正しく読み込まれ実行されています。
<p>このテキストが赤色に変更します</p>$("p").css("color", "red");
