本記事では、jQueryをCDNで読み込む方法についてサンプルコードを用いて分かりやすく解説しています。
ITエンジニア特化の転職サイト！
自社内開発求人に強い【クラウドリンク】
jQueryの学習におすすめ参考書
jQuery最高の教科書
| 著者 | 株式会社シフトブレイン |
|---|---|
| 発売日 | 2013/11/26 |
| ページ数 | 320ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (93件) |
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");
DMM WEBCAMP 
CodeCamp 
TechAcademy 
