【jQuery】CDNの種類をまとめてみました
- 2021.10.30
- jQuery


CDNってどれ使ったらいいのですかー?

うーん、ちょっとまとめてみますねー
CDNの種類、5選
jQuery公式サイトに記載がある5種類を紹介します。
公式に載っているので安心ですね。
jQueryのCDN
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
GoogleのCDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
MicrosoftのCDN
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>
CDNJSのCDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
jsDelivrのCDN
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
CDNの使い方
簡単に説明すると、コピペするだけでオッケーです。
bodyの閉じタグの前に記載するのがおすすめです。
(headの中に記載するのもアリですが、HTMLの読み込み順から行くと最後がベストだと思いますー)
jQueryのCDNを読み込む場合
まず、下記を、
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
下記の下のほうに記載しましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>125naroom</title> </head> <body> <p>こんにちは、の、は、は、なぜ、わ、じゃないのですか?</p> <p>わかりません。この下に記載するのがおすすめです。</p> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="/script.js"></script> </body> </html>
CDNのメリットとデメリット
メリットは、
- ファイルをダウンロードしなくていい
- ファイルをアップロードしなくていい
- CDN経由で読み込まれたファイルはブラウザにキャッシュされる
- キャッシュを利用するのでページを表示するまでの時間が短くなる(高速になる)
- 動くかどうかテストするにはすごく便利
デメリットは、
- 配信が急に停止される可能性がある
- 提供されているバージョンが公開を終了すると利用できなくなる
- 企業案件ではあまり使えない(急に動かなくなったら怒られると思う)
メモ
jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。
さいごに

お腹空きましたねー

おやつにしましょうー
おすすめ
かんれん
- web / 2019.7.19
- 【CSS】olのリストで①、②、③(丸数字)を表示させる
- web / 2018.9.3
- 【CSS】セレクタまとめ、最初・最後・奇数・偶数・何番目
- web / 2020.3.19
- 【CSS】スマホ、タブレットで横スクロールする実装サンプル集
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.06.05New
- NEWTOWN/グラフィック・Webデザイン
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.04.25
- 【CSS】見出しデザインをまとめてみる(左右に線を引くとか)
- 見出しのデザインをまとめてくださーい わ、わかりましたー もくじ 左右に線を引く 左…
- 125naroom / デザインするところ(会社)です。