【2026年最新】jQuery CDNの読み込み方法 - 正しい設置場所と選び方

CDNとは

CDN（Content Delivery Network） は、世界中に分散配置されたサーバーからコンテンツを配信するネットワークです。

CDNを使うメリット

高速配信: ユーザーに近いサーバーから配信
キャッシュ効果: 他サイトで読み込み済みならキャッシュが使われる
サーバー負荷軽減: 自サーバーの帯域を節約
簡単導入: ダウンロード不要、URLを貼るだけ

CDNを使うデメリット

外部依存: CDNがダウンすると動かない
プライバシー: 外部へのリクエストが発生
オフライン不可: インターネット接続が必要

主要なjQuery CDN

1. jQuery公式CDN（code.jquery.com）

最も信頼性の高い公式CDNです。

<!-- 最新版 3.7.1（2026年1月時点） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- 開発版（デバッグ用） -->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>

<!-- Slim版（Ajax/effectsなし、軽量） -->
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>

特徴:

jQuery公式が運営
最も早く最新版が反映される
SRI（Subresource Integrity）ハッシュを提供

2. Google Hosted Libraries

Googleが提供する高速CDNです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

特徴:

Googleの高速インフラ
多くのサイトで使われているためキャッシュヒット率が高い
信頼性が高い

3. cdnjs（Cloudflare）

Cloudflareが運営する人気のCDNです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

特徴:

Cloudflareの高速ネットワーク
多数のライブラリを提供
SRIハッシュを提供

4. jsDelivr

GitHubやnpmと連携したCDNです。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

特徴:

npmパッケージを直接配信
複数ファイルの結合が可能
中国からのアクセスにも強い

CDN比較表

CDN	速度	信頼性	SRI	特徴
jQuery公式	◎	◎	○	公式、最新版が早い
Google	◎	◎	△	キャッシュヒット率高
cdnjs	◎	◎	○	多数のライブラリ
jsDelivr	◎	○	○	npm連携

正しい読み込み方法

基本的な読み込み

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryの読み込み</title>
</head>
<body>
    <h1>Hello jQuery</h1>

    <!-- jQueryの読み込み -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <!-- 自分のスクリプト（jQueryの後に読み込む） -->
    <script src="js/main.js"></script>
</body>
</html>

SRI（Subresource Integrity）を使う

セキュリティのため、SRIハッシュを付けることを推奨します。

<script
    src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
    crossorigin="anonymous">
</script>

SRIの役割:

CDN上のファイルが改ざんされていないことを確認
ハッシュが一致しないと読み込みをブロック
セキュリティ対策として重要

defer属性を使う

ページの読み込みを妨げないようにする方法です。

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

注意: deferを使う場合は、依存するスクリプトすべてにdeferを付ける必要があります。

設置場所のベストプラクティス

推奨: 直前

<body>
    <!-- ページコンテンツ -->
    <h1>サイトタイトル</h1>
    <p>コンテンツ...</p>

    <!-- スクリプトは最後に -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="js/main.js"></script>
</body>

メリット:

HTMLの描画を妨げない
DOM要素が確実に存在する
ページ表示速度が向上

内に書く場合

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

deferを付ける理由:

HTMLのパースを止めない
DOM構築後にスクリプトを実行

避けるべきパターン

<!-- ❌ defer なしで<head>に書くとページ表示が遅くなる -->
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>

<!-- ❌ jQueryより前に自分のスクリプトを読み込む -->
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

フォールバックの設定

CDNが利用できない場合に備えて、ローカルファイルにフォールバックする方法です。

基本的なフォールバック

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    // jQueryが読み込めなかった場合、ローカルから読み込む
    window.jQuery || document.write('<script src="js/jquery-3.7.1.min.js"><\/script>');
</script>

より堅牢なフォールバック

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    if (typeof jQuery === 'undefined') {
        var script = document.createElement('script');
        script.src = 'js/jquery-3.7.1.min.js';
        document.head.appendChild(script);
    }
</script>

複数CDNのフォールバック

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"><\/script>');
</script>
<script>
    window.jQuery || document.write('<script src="js/jquery-3.7.1.min.js"><\/script>');
</script>

トラブルシューティング

「$ is not defined」エラー

最もよくあるエラーです。

原因1: jQueryの読み込み前にコードを実行している

<!-- ❌ 間違い -->
<script>
    $('#element').hide();  // この時点でjQueryは読み込まれていない
</script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- ✅ 正しい -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    $('#element').hide();
</script>

原因2: CDNのURLが間違っている

<!-- ❌ httpになっている（httpsを使う） -->
<script src="http://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- ✅ httpsを使う -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

jQueryが読み込まれているか確認する方法

ブラウザのコンソールで確認できます。

// コンソールで実行
console.log(jQuery.fn.jquery);  // バージョン番号が表示されればOK
// または
console.log($.fn.jquery);

他のライブラリとの競合

Prototype.jsなど、$を使う他のライブラリとの競合を解決します。

// noConflict()を使用
jQuery.noConflict();

// 以降はjQueryを使用
jQuery(function($) {
    // この中では$を使える
    $('#element').hide();
});

まとめ

ベストプラクティス

CDNの選択: jQuery公式またはGoogle CDNを推奨
設置場所: </body>直前、または<head>内にdefer付きで
SRI: セキュリティのためSRIハッシュを付ける
フォールバック: ローカルファイルへのフォールバックを設定

推奨コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サイトタイトル</title>
</head>
<body>
    <!-- コンテンツ -->

    <!-- jQuery CDN + SRI + フォールバック -->
    <script
        src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
        crossorigin="anonymous">
    </script>
    <script>window.jQuery || document.write('<script src="js/jquery-3.7.1.min.js"><\/script>')</script>

    <!-- 自分のスクリプト -->
    <script src="js/main.js"></script>
</body>
</html>

これでjQueryを安全かつ高速に読み込めます。

目次