jQueryをCDNで読み込む方法｜scriptタグの設置場所と動かない原因を初心者向けに解説

jQueryを使いたいけれど、「CDNのコードをどこへ貼ればよいの？」「貼ったのに動かない」と迷うことがありますよね。

結論として、公式CDNの<script>タグをHTMLの</body>直前に置き、その下で自分のscript.jsを読み込めば利用できます。jQueryを先、自分のJavaScriptを後にするのが重要です。

<script
  src="https://code.jquery.com/jquery-4.0.0.min.js"
  integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao="
  crossorigin="anonymous"
></script>
<script src="script.js"></script>

この記事では、CDNの仕組みから設置手順、読み込み確認、動かないときの対処まで順番に解説します。HTMLとJavaScriptのファイルを用意して、そのまま試してみましょう。

jQueryのCDNとは
公式CDNでjQueryを読み込む手順
1. HTMLとJavaScriptのファイルを用意する
2. jQueryが読み込めたか確認する
scriptタグを置く順番と場所
jQuery CDNが動かないときの確認方法
通常版・圧縮版・slim版の違い
CDNとダウンロードはどちらを選ぶか
WordPressではjQueryを重複して読み込まない
jQuery CDNについてよくある質問
まとめ

jQueryのCDNとは

CDNは「Content Delivery Network」の略で、Web上のサーバーからファイルを配信する仕組みです。jQuery本体を自分のサイトへ保存しなくても、HTMLからCDN上のファイルを指定して読み込めます。

次の図では、ブラウザがHTMLを表示するときに、CDNへアクセスしてjQueryファイルを取得しています。

CDNは手軽ですが、外部サーバーへ接続できない環境では読み込めません。そのため「CDNなら必ず速い」と考えるのではなく、サイトの運用方法や通信条件に合わせて選ぶことが大切です。

公式CDNでjQueryを読み込む手順

ここではjQuery公式CDNを使います。以下では確認時点の公式安定版である4.0.0を例にしますが、導入するときはjQuery公式のDownloadページで現在のバージョンを確認してください。

既存サイトで3系を使っている場合は、番号だけを機械的に4系へ置き換えないでください。jQuery 4では古いブラウザのサポートや一部仕様が変わっているため、利用中のプラグインやコードの動作確認が必要です。

HTMLとJavaScriptのファイルを用意する

まず、同じフォルダーにindex.htmlとscript.jsを作成します。CDNのタグはindex.htmlの</body>直前へ追加し、その下に自分のJavaScriptを置きます。

実際に読み込めると、次のようにバージョン番号が表示され、ボタンを押したときに文章が変わります。

同じ結果を確認するため、index.htmlへ次の内容を記述します。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery CDNの読込確認</title>
  </head>
  <body>
    <h1>jQueryを利用できる状態です</h1>
    <p id="result">確認中です…</p>
    <button id="test-button" type="button">jQueryの動作を確認</button>
    <p id="message">ボタンを押すと、この文章が変わります。</p>

    <script
      src="https://code.jquery.com/jquery-4.0.0.min.js"
      integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao="
      crossorigin="anonymous"
    ></script>
    <script src="script.js"></script>
  </body>
</html>

srcにはjQueryファイルのURLを指定します。integrityは取得したファイルが公式ページで示された内容と一致するかを検証するSRI（Subresource Integrity）の値です。

crossorigin="anonymous"は、別ドメインのファイルを個人を特定する認証情報なしで取得し、SRIで検証するための指定です。srcのバージョンを変える場合は、integrityも同じバージョンの値へ変更してください。

jQueryが読み込めたか確認する

続いて、同じフォルダーのscript.jsへ次のコードを記述します。window.jQueryが存在すれば読込成功です。

const result = document.querySelector('#result');

if (window.jQuery) {
  result.textContent = `読込成功：jQuery ${jQuery.fn.jquery}`;

  $('#test-button').on('click', function () {
    $('#message').text('jQueryのクリック処理が動きました。');
  });
} else {
  result.textContent = '読込失敗：CDNのURLや通信状態を確認してください。';
  document.querySelector('#test-button').disabled = true;
}

jQuery.fn.jqueryには、実際に読み込まれたjQueryのバージョンが入っています。ブラウザでindex.htmlを開き、「読込成功」と表示されてからボタンを押してください。

jQueryコードの基本的な書き方から確認したい場合は、次の記事も参考にしてください。

jQueryのコードの書き方を解説【HTML/CSSが終わったら】

scriptタグを置く順番と場所

自分のscript.jsは、必ずjQueryのCDNタグより後に読み込みます。ブラウザは基本的にHTMLへ書かれた順番で通常の<script>を処理するためです。

<!-- 先にjQuery本体を読み込む -->
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>

<!-- その後にjQueryを使う自分のコードを読み込む -->
<script src="script.js"></script>

初心者のうちは、この2つを</body>直前へまとめると順番を把握しやすくなります。deferを使う場合は片方だけではなく両方へ付け、jQuery、script.jsの順番を保ちます。

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

本番サイトでは、前に紹介したSRI付きの公式タグを使ってください。ここでは読込順だけを見やすくするため、属性を省略しています。

jQuery CDNが動かないときの確認方法

CDNのURLを1文字でも間違えるとjQuery本体を取得できません。検証用ページで存在しないURLを指定したところ、次のように読込失敗が表示されました。

次のコードは、失敗状態を再現するために存在しないファイル名を指定した例です。実際のサイトへコピーせず、正しい公式URLとの違いを確認してください。

<!-- 誤り：存在しないファイル名 -->
<script src="https://code.jquery.com/jquery-4.0.0-not-found.min.js"></script>

「$ is not defined」と表示される

$ is not definedやjQuery is not definedは、jQueryを使うコードの実行時点で本体を利用できないという意味です。次の順番で確認します。

CDNのURLをブラウザで直接開き、ファイルが表示されるか確認する
jQueryのタグがscript.jsより上にあるか確認する
srcとintegrityが同じバージョンか確認する
開発者ツールのNetworkでjQueryの通信が200になっているか確認する

SRIの検証エラーになる

CDNのバージョンだけを変更し、古いintegrityを残すと、ブラウザは安全のためファイルを実行しません。公式ページからsrcとSRIをセットでコピーし直してください。

通信やCSPでブロックされる

オフライン環境、社内ネットワークの制限、広告ブロック、Content Security Policy（CSP）などで外部CDNへの接続が拒否される場合があります。NetworkやConsoleにブロック理由が出ていないか確認しましょう。

通常版・圧縮版・slim版の違い

公式CDNには複数のファイルがあります。学習中のサイトで迷った場合は、動作確認には非圧縮版、本番公開には圧縮版を選ぶと分かりやすいです。

種類	ファイル名の例	向いている場面
非圧縮版	`jquery-4.0.0.js`	コードを読みながら調査したい開発時
圧縮版	`jquery-4.0.0.min.js`	ファイルサイズを抑えたい公開時
slim版	`jquery-4.0.0.slim.min.js`	Ajaxとエフェクト機能が不要なサイト

slim版ではAjaxとエフェクト関連の機能を利用できません。$.ajax()や.animate()を使う予定がある場合は、通常の圧縮版を選んでください。

CDNとダウンロードはどちらを選ぶか

jQueryはCDNで読み込むほかに、ファイルをダウンロードして自分のサイトから配信できます。どちらでもjQueryの使い方は同じですが、運用上の特徴が異なります。

比較項目	CDN	ダウンロード
導入	scriptタグを貼るだけ	ファイルを保存して配置する
外部通信	CDNへ接続する	自分のサイト内で完結する
オフライン開発	基本的に不向き	利用できる
障害時の影響	CDNや通信障害の影響を受ける	自分のサーバーの状態に依存する
管理	URLとSRIを更新する	ファイルを差し替える

学習用ページや小規模な試作では、設置が簡単なCDNが便利です。一方、外部通信を減らしたいサイト、厳しいCSPを設定するサイト、オフラインでも開発する環境ではダウンロード方式が管理しやすいでしょう。

ブラウザのキャッシュはプライバシー保護のためサイトごとに分離される場合があります。そのため、別サイトで同じCDNを使ったから必ずキャッシュが再利用されて高速になる、とは限りません。

WordPressではjQueryを重複して読み込まない

WordPressにはjQueryが同梱されています。テーマのHTMLへCDNタグを直接追加すると、WordPress側のjQueryと二重に読み込まれ、プラグインの不具合や読込順の問題につながることがあります。

WordPressで自作スクリプトからjQueryを使う場合は、functions.phpで依存関係にjqueryを指定します。

<?php
function load_custom_script() {
  wp_enqueue_script(
    'custom-script',
    get_theme_file_uri('/assets/js/script.js'),
    array('jquery'),
    null,
    true
  );
}
add_action('wp_enqueue_scripts', 'load_custom_script');

array('jquery')が「このスクリプトより先にjQueryが必要」という指定です。WordPressが適切な順番で読み込むため、通常はCDNタグを別に追加する必要はありません。

jQuery CDNについてよくある質問

GoogleのCDNでも利用できますか？

利用できます。ただし、配布元によってURLやSRIが異なります。この記事では、バージョンとSRIを公式サイトでまとめて確認しやすいjQuery公式CDNを使用しています。

CDNのURLを開くと大量の文字が表示されます

正常です。圧縮版は、通信量を減らすため改行や空白を取り除いたJavaScriptファイルです。URLを開いてコードが表示されれば、ファイル自体へアクセスできています。

jQuery 3系から4系へURLだけ変更してもよいですか？

既存サイトでは、先にテスト環境で確認してください。jQuery本体だけでなく、利用中のプラグイン、古いブラウザ対応、削除された機能の影響を調べてから更新します。

jQueryそのものの役割やJavaScriptとの違いを整理したい場合は、次の記事で基礎から確認できます。

ページに動きをつけるにはjQuery!導入方法と使い方を解説

まとめ

jQueryをCDNで利用するときは、公式の<script>タグを</body>直前へ置き、その下で自分のJavaScriptを読み込みます。順番が逆になると、$ is not definedなどのエラーが発生します。

動かない場合は、URL、SRI、読込順、Networkの通信結果を順番に確認してください。Ajaxやアニメーションを使う場合はslim版を避け、外部通信が難しい環境ではダウンロード方式を選ぶと解決しやすくなります。