jQuery

jQueryをCDNで読み込む方法を徹底解説

本記事では、jQueryをCDNで読み込む方法についてサンプルコードを用いて分かりやすく解説しています。

jQueryの学習におすすめ参考書
jQuery最高の教科書

本書情報
著者株式会社シフトブレイン
発売日2013/11/26
ページ数320ページ
Kindle版
レビュー
(Amazon)
(93件)

参考書が苦手な人はUdemyの動画がおすすめ
即実践 手を動かして6時間でjQueryをマスターしよう。
知識、経験ゼロからjQueryを使いこなそう

動画情報
作成者村守 康
学習時間6時間
受講者数28,547人
レビュー (425件)
動画の詳細はこちら

jQueryの導入

jQueryを導入するには、2つの方法があります。1つ目が公式ページからjQueryを動かすために必要なファイルをダウンロードする方法、2つ目がCDNを使う方法です。

今回は、導入が一番簡単でおすすめなCDNを読み込む方法を利用します。

導入によるメリットの違い
  • 公式ページ:オフラインで使用可能
  • CDN:ファイルをダウンロードする必要がない

公式ページからファイルをダウンロードする方法については下記の記事で紹介しているので、興味のある方はご覧ください。

jQueryをダウンロードする方法について徹底解説本記事では、jQueryを公式ページからダウンロードして使えるようにする方法についてサンプルコードを用いて分かりやすく解説しています。...

CDNを使う

CDNとはContents Delivery Networkの略で、外部のファイルをリンク1つで使用することができる仕組みのことを指します。

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");
CDN読み込み成功時の表示
CDN読み込み成功時の表示

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村