CDNとは
CDNとは、Content Delivery Network（コンテンツデリバリネットワーク）の略になります。
Akamaiが1990年代に提唱した仕組みで、コンテンツを配信する為に用意されたネットワークの事です。
世界中に配置されたCDNサーバーにキャッシュされたWEBコンテンツ（HTML、JS、CSS、画像など）を利用することで、
負荷が分散され高速に読み込むことが出来る仕組みになります。
それにより、WEBサイトの表示速度の改善やサーバーへの負荷軽減、安定した運用などを実現することが出来ます。
CDNは多くのサービスが存在しますが、
jQueryファイルも、Googleなど複数の企業がCDNサーバーにキャッシュしたものを利用することが可能です。
こちらの記事では、CDN経由で読み込むことが出来るjQueryファイルについてまとめました。
キャッシュされたjQueryファイルを利用するメリットは？
通常、jQueryを利用する場合には、公式サイトなどからダウンロードしてきたjQueryファイルをサーバー上にアップロードして読み込みます。
このような感じです。
<script type="text/javascript" src="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ファイルをダウンロードしたり、アップロードする手間が省けます。
面倒な作業は極力減らしたいですから、こちらの方が楽ですね。
また、jQueryファイルを自分のサーバーに置いて読み込ませなくていいので、その分サーバーへの負荷を軽減させることが出来ます。
さらに、
ブラウザにキャッシュされるので、ページの表示速度の高速化も期待できます。
レスポンスヘッダーを確認してみると「cache-control: public,max-age=31536000」と設定されていると思います。
これは、「31536000秒=365日」の間、ブラウザにキャッシュを設定するように指定するものです。
まとめると、
・jQueryファイルをダウンロードしたり、サーバー上にアップロードする手間を減らせる
・自サーバーへの負荷を減らすことが出来る
・ブラウザキャッシュにより、ページの表示速度を改善できる
というのが、メリットになります。
ただし、デメリットもあります。
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.4.1.js"></script>
圧縮版：<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.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>
[ 公式サイト：jQuery CDN ]
GoogleのCDNサーバー
■jQuery 3.x系
非圧縮版：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
圧縮版：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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>
圧縮版：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
[ 公式サイト：Google Hosted Libraries ]
MicrosoftのCDNサーバー
■jQuery 3.x系
非圧縮版：<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js"></script>
圧縮版：<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.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>
[ 公式サイト：Microsoft Ajax Content Delivery Network | Microsoft Docs ]
jQuery UIの読み込み
jQueryライブラリーのjQuery UIもCDNサーバーから読み込むことが出来ます。
jQuery UIは、サイトに様々な動きを付けることが出来るライブラリーで、多くの方が利用されています。
こちらもCDN経由で読み込めるのは大変助かりますね。
jQueryのCDNサーバー
■jQuery UI本体
非圧縮版：<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
圧縮版：<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
■CSS
非圧縮版：<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.css">
圧縮版：<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.min.css">
[ 公式サイト：jQuery CDN ]
GoogleのCDNサーバー
■jQuery UI本体
非圧縮版：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
圧縮版：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
■CSS
非圧縮版：<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.css">
圧縮版：<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css">
[ 公式サイト：Google Hosted Libraries ]
MicrosoftのCDNサーバー
■jQuery UI本体
非圧縮版：<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.js"></script>
圧縮版：<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.min.js"></script>
■CSS
非圧縮版：<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/humanity/jquery-ui.css">
圧縮版：<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/humanity/jquery-ui.min.css">
[ 公式サイト：Microsoft Ajax Content Delivery Network | Microsoft Docs ]
