2-1. ライブラリの導入方法（CDN）

更新日：2025年12月7日

2-1. ライブラリの導入方法（CDN）について解説します。
実践編：ライブラリ

※画像は生成AIによるイメージです。

CDN（Content Delivery Network）を使ったライブラリの導入は、最も簡単な方法です。 HTMLファイルに数行追加するだけで、世界中で使われているライブラリを利用できます。

主要なCDNサービス

CDN名 特徴 URL
jsDelivr npm、GitHubから自動配信 cdn.jsdelivr.net
cdnjs 豊富なライブラリ数 cdnjs.cloudflare.com
unpkg npmパッケージを直接配信 unpkg.com
Google CDN Google提供の主要ライブラリ ajax.googleapis.com

基本的な導入手順

  1. 使いたいライブラリを決める
  2. CDNサービスでライブラリを検索
  3. HTMLにscriptタグを追加
  4. ライブラリの機能を使用

実装例：jQuery

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CDN導入例</title>
    <!-- jQueryをCDNから読み込み -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="myButton">クリック</button>
    <p id="message"></p>
    
    <script>
        // jQueryが使える
        $(document).ready(function() {
            $('#myButton').click(function() {
                $('#message').text('ボタンがクリックされました');
            });
        });
    </script>
</body>
</html>

バージョン指定の方法

指定方法 URL例 説明
完全指定 jquery@3.6.0 特定バージョン固定
メジャー指定 jquery@3 3.x.xの最新版
最新版 jquery@latest 常に最新（非推奨）

minified版と通常版

minified版（.min.js）
圧縮版。ファイルサイズが小さく、本番環境向け
通常版（.js）
非圧縮版。読みやすく、デバッグ時に便利
<!-- 本番環境：minified版 -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

<!-- 開発環境：通常版 -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.js"></script>

integrity属性でセキュリティ向上

SRI（Subresource Integrity）を使用すると、ファイルの改ざんを検知できます。 

<script 
    src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous">
</script>
  • integrity：ファイルのハッシュ値
  • crossorigin：CORS設定

読み込み順序の重要性

重要：依存関係に注意

ライブラリに依存関係がある場合、読み込み順序が重要です。

<!-- 正しい順序 -->
<script src="jquery.min.js"></script>        <!-- 1. jQuery本体 -->
<script src="jquery-ui.min.js"></script>     <!-- 2. jQueryに依存 -->
<script src="my-script.js"></script>         <!-- 3. 両方を使用 -->

<!-- 間違った順序（エラーになる） -->
<script src="jquery-ui.min.js"></script>     <!-- jQueryがないとエラー -->
<script src="jquery.min.js"></script>

フォールバック対策

CDNが利用できない場合に備えて、ローカルファイルを代替として読み込む方法です。 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // CDNから読み込めなかった場合
    if (typeof jQuery === 'undefined') {
        document.write('<script src="js/jquery-3.6.0.min.js"><\/script>');
    }
</script>

async/defer属性

属性 動作 使用場面
なし HTMLパースを停止して実行 すぐに必要なライブラリ
async 並列ダウンロード、即実行 独立したライブラリ
defer 並列ダウンロード、DOM構築後実行 DOM操作を行うライブラリ

トラブルシューティング

  • 404エラー：URLが間違っている、バージョンが存在しない
  • CORS エラー：crossorigin属性を確認
  • $ is not defined：jQueryが読み込まれていない、順序が間違っている
  • Uncaught TypeError：ライブラリのバージョン不整合

まとめ

CDNを使った導入は簡単ですが、セキュリティやフォールバックなど、考慮すべき点もあります。 小規模プロジェクトやプロトタイプには最適な選択肢です。 次のページでは、npmを使った導入方法について学習します。

免責事項
本コンテンツは2025年12月時点の情報に基づいて作成されている。最新の情報については公式ドキュメントを参照されたい。