この記事の内容は2022/03/05時点での情報です。リンク切れや使用不可のCDNがある場合は、お問い合わせフォームからご連絡ください。Twitterアカウントからでも受け付けています。
CDNとは
Content Delivery Network（コンテンツ配信ネットワーク）の略称です。コンテンツ・ファイルなどをネット上で提供してくれる便利なサービスです。
おそらくこのページにたどり着いた方は、そんなことよりも、HTMLに埋め込む書き方が知りたいはずなので、早速早見表からコピペしていってください。
あ、ご都合よろしければ他の記事も見てみてくださいね。
jQuery CDN早見表・一覧表【コピペ用】
ホストと各jQueryのバージョンでまとめました。右の「copy」をクリックするとクリップボードにコピーされます。上から最新バージョン順になっています。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> | copy | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> | copy | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | copy | |
| jquery.com | <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> | copy |
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> | copy | |
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> | copy |
jQuery CDNの使い方
HTMLの<head>内に記述しても<body>の中に記述しても動作しますが、作成したjQueryを実行する前に読み込むようにしてください。
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="path to your product"></script>
</head>これだけです、簡単ですね。
CDNを使う時の注意点
CDNはファイルをダウンロードが不要なので便利ですが、2点注意が必要です。
- 提供側のURLが変わるとjQueryが動作しなくなる
- 提供側の通信状況によって読み込みが出来なくなる可能性はゼロではない
外部サーバーのjQuery本体のファイルを読み込むため、上記の場合にはサイト全体が壊れて表示される可能性はゼロではありません。僕自身の経験では今のところ上記現象は起きていません。
心配ならば、jQuery本体ファイルをダウンロードして、ご自身のサーバーにアップロードする方法を取った方が賢明です。
また、もう一つ注意があります。
CDNがSSL対応していない場合に、httpsからアクセスできない場合があります。CORSエラーになり、読み込みが弾かれることがあります。基本的にSSL化されるのがデフォルトになっている時代ですが、httpから始まるCDNは、ご自身のサイトがSSL化されていると利用できないので注意が必要です。
