CDN上にキャッシュされたjQueryの読み込みについて

今回は、CDNにキャッシュされたjQueryについてまとめています。
jQueryの読み込みURLを探している方は、ぜひ参考にしてください。

CDNとは

CDNとは、Content Delivery Network（コンテンツデリバリネットワーク）の略になります。
Akamaiが1990年代に提唱した仕組みで、コンテンツを配信する為に用意されたネットワークの事です。

世界中に配置されたCDNサーバーにキャッシュされたWEBコンテンツ（HTML、JS、CSS、画像など）を利用することで、様々なメリットを得ることができます。
それにより、負荷が分散され高速に読み込むことが出来る仕組みになります。

一般的には、自社のコンテンツをCDNへキャッシュして利用することができます。
例えば、カラフルボックスの提供するCDNは手軽に利用できるので、自社サイトの改善に非常に便利です。

CDNとは？カラフルボックスCDNの効果と利用方法を紹介！

2023.9.9

CDNとは、「Contents Delivery Network」の略で、各地に分散して設置されたキャッシュサーバーへキャッシュを保存することで、WEBサイトの高速化やアクセス集中...

ただ、それ以外にも、jQueryのような多くの人が利用するコンテンツをCDN経由で読み込める仕組みもあります。
それにより、jQueryを自社サーバーに置く必要もなくなり、その分のリソースの削減にもつながります。

キャッシュされたjQueryファイルを利用するメリットは？

通常、jQueryを利用する場合には、公式サイトなどからダウンロードしてきたjQueryファイルをサーバー上にアップロードして読み込みます。

このような感じです。
<script type="text/javascript" src="common/js/jquery-x.x.x.js"></script>
<script type="text/javascript" src="https://example.com/common/js/jquery-x.x.x.js"></script>

↓

これを、CDNから読み込む場合には、以下の様に<script>にURLを設定するだけになります。
<script type="text/javascript" src="https://code.jquery.com/jquery-x.x.x.js"></script>

その為、自分でjQueryファイルをダウンロードしたり、アップロードする手間が省けます。
面倒な作業を極力減らしたい方には、CDN上から読み込んだ方が楽ですね。

また、jQueryを自分のサーバーに置いて読み込ませなくていいので、その分サーバーへの負荷を軽減させることが出来ます。

さらに、CDN経由で読み込んだjQueryはブラウザにキャッシュされるので、WEBサイトの表示の高速化も期待できます。

レスポンスヘッダーを確認してみると「cache-control: public,max-age=31536000」と設定されていると思います。
これは、「31536000秒=365日」の間、ブラウザにキャッシュを設定するように指定するものです。

まとめると、このようなメリットを得られます。

ただし、デメリットもあります。
CDNのサービスが停止されると、当然jQueyを読み込めなくなってしまいます。

とはいえ、配信しているのはGoogleやMicrosoftなど大手が多いので、サービスが停止される可能性は低いとは思いますが・・・

利用できるCDNサービス

jQuery、Google、MicrosoftによってCDNサーバーにキャッシュされたjQueryを利用することが出来ます。

私は本家のjQueryから読み込んで利用することが多いです。
ですが、どのCDNサーバーから読み込んでも変わらないので、好きな物を利用して下さい。

上記以外にも、jsDelivrやCDNJSなどのサービスがありますが、あまり利用する機会はないです。

jQuery、Google、Microsoftについては、コピペで利用できるようにまとめておきます。

jQueryのCDNサーバー

■jQuery 3.x系
非圧縮版：<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
圧縮版：<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

■jQuery 2.x系
非圧縮版：<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script>
圧縮版：<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

■jQuery 1.x系
非圧縮版：<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
圧縮版：<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

GoogleのCDNサーバー

■jQuery 3.x系
非圧縮版：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.js"></script>
圧縮版：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

■jQuery 2.x系
非圧縮版：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
圧縮版：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

■jQuery 1.x系
非圧縮版：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script&gt
圧縮版：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script&gt

MicrosoftのCDNサーバー

■jQuery 3.x系
非圧縮版：<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.js"></script>
圧縮版：<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>

■jQuery 2.x系
非圧縮版：<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js"></script>
圧縮版：<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js"></script>

■jQuery 1.x系
非圧縮版：<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
圧縮版：<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

■jQuery Migrate
非圧縮版：<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-migrate-3.4.1.js"></script>
圧縮版：<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-migrate-3.4.1.min.js"></script>

jQuery UIの読み込み

jQueryライブラリーのjQuery UIもCDNサーバーから読み込むことが出来ます。

jQuery UIは、サイトに様々な動きを付けることが出来るライブラリーで、多くの方が利用されています。
こちらもCDN経由で読み込めるのは大変助かりますね。

jQueryのCDNサーバー

■jQuery UI本体
非圧縮版：<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
圧縮版：<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

■CSS
非圧縮版：<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/redmond/jquery-ui.css">
圧縮版：<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/redmond/jquery-ui.min.css">

GoogleのCDNサーバー

■jQuery UI本体
非圧縮版：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.js"></script>
圧縮版：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

■CSS
非圧縮版：<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/redmond/jquery-ui.css">
圧縮版：<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/redmond/jquery-ui.min.css">

MicrosoftのCDNサーバー

■jQuery UI本体
非圧縮版：<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.13.2/jquery-ui.js"></script>
圧縮版：<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.13.2/jquery-ui.min.js"></script>

■CSS
非圧縮版：<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.13.2/themes/humanity/jquery-ui.css">
圧縮版：<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.13.2/themes/humanity/jquery-ui.min.css">