jQueryは、Webデザインに関わっている方なら誰しも使う機会があると思います。
最近は「jQueryはそろそろ不要になる」など言われていますが、まだまだ現役ですね。
jQuery本体をWebサイトに読み込ませたい時、GoogleやMicrosoftが提供しているCDNを利用する方法が一般的ですが、「CDNを利用する」と一口に言ってもいくつか種類があるため、どれを使えば良いのか初めは誰もが迷うと思います。
今回はCDNの種類や読み込み方法、どこを使うべきかをご紹介します。
jQueryとは
「jQuery」とは、JavaScriptのライブラリ（よく使う機能をパーツ化したもの）の1つです。
簡単に言うと、「JavaScriptをとても簡単に書けるようにしたもの」です。
jQueryを使うことで、とても少ないコード量でプログラムを組むことができるんです。
プログラムがわからない方でも扱いやすいため、多くのWeb制作に携わる人が利用しています。
そしてそのjQueryを利用するには、「jQueryの本体ファイル」というものが必要になります。
本体ファイルを読み込むには下記2つの方法があります。
- 本体ファイルをダウンロードして利用する方法
- CDNで提供されている本体ファイルを利用する方法
今回は、2の「CDNで提供されている本体ファイルを利用する方法」についてご説明します。
CDNとは
CDNとは「コンテンツデリバリーネットワーク（Contents Delivery Network）」の略称で、ファイルをインターネット上で配信するための保管場所のことです。
CDNには高負荷に耐えられるような機能が備わっていて、大量のアクセスが集中してもダウンすることがありません。
CDNを利用した方が良い理由
では、なぜCDNを使うと良いのでしょうか。
その理由は大きく2つあります。
1.サーバーの負荷が軽くなる
Webサイトを表示する際、サーバーからいくつものファイルのデータをダウンロードされています。
レイアウトを反映するのには「CSSファイル」、画像を表示するのには「画像ファイル」などなど。
同時にWebサイトを閲覧するユーザーが多いほど、ダウンロードするファイル数が増加するので、サーバーに掛かる負荷は大きくなります。
耐えられる接続数はサーバーによって異なりますが、限界を超えるとサーバーはダウンしてしまいます。
そこで、CDNで配信されているファイルを読み込んでいれば、配信元のサーバーにアクセスするため、Webサイトを置いているサーバーには負荷が掛からなくなり、負荷を分散することができます。
2.ページの表示が早くなる
Chrome、Firefox、IEなど、ブラウザには「キャッシュ」という機能が備わっています。
インターネット一時ファイルとも言われたりします。
「キャッシュ」とは、1度閲覧したサイトのデータを一時的にパソコンに保存しておく機能のことです。
同じページを再度閲覧した時に、サーバーからのダウンロードを省略することができて、ページの表示を早くすることができます。
では仮に、GoogleがCDNで提供しているjQueryを利用している「サイトA」にアクセスしたとします。
次にアクセスした「サイトB」でも、GoogleのCDNを利用していたらどうなるでしょうか。
どちらのサイトも同じjQueryファイルを読み込んでいるため、キャッシュが残っています。
そのため、「サイトB」を閲覧した時に表示が早くなるのです。
CDNの種類
jQueryの本体ファイルを提供しているCDNは3つあります。
それぞれ「1.X」「2.X」「3.X」のバージョンがありますが、特に理由がなければ最新の「3.X」を使うのが良いでしょう。
配布されているプラグインの中には、バージョンによって動かないケースもあるので、そういった場合には古いバージョンを利用します。
3.X系
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>2.X系
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>1.X系
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>StackPath（公式）
3.X系
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>2.X系
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>1.X系
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>Microsoft
3.X系
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>2.X系
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js"></script>1.X系
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>HTMLの記述
前述した本体ファイルの読み込みコードを、HTMLに記述します。
記述する位置は、<head>～</head>もしくは、</body>の直前です。
<head>内
<head>～</head>内で下記のように読み込みます。
<head>
..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head></body>直前
閉じタグ</body>の直前で、下記のように読み込みます。
..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>こちらの方法が一般的です。
HTMLというのは上から順に読み込んでページを表示させるため、jQueryの記述が上にあるとページの表示速度が下がってしまいます。
ページの最後である</body>で読み込むことで、コンテンツをすべて読み込んでからjQueryを読み込むため、ページの表示速度が速くなります。
CDNはどこを利用するべきか
基本的にはどこを利用しても動作に問題はありません。
ただ、「CDNを利用した方が良い理由」の「2.ページの表示が早くなる」でご説明したように、キャッシュされて表示スピードが上がることが、CDNの大きなメリットです。
そのため、他サイトで多く使われているCDNを利用する方が良いでしょう。
有名企業のサイトを見ていると、「Microsoft」の利用率はかなり低めのようです。
「Google」か「StackPath」が多く利用されているので、このどちらかを使うと良さそうです。
「CDNPerf」というサイトでCDNの速度を計測してみました。
- Google：38.00ms
- StackPath：47.02ms
「Google」の方が速度が速いですね。
速度が速いことと、ほとんどの方に馴染みがあるという理由から、「Google」を利用するのが最もおすすめです。
まとめ
jQueryのCDNについてまとめました。
初心者の方は悩みがちな部分なので、意味や違いを理解しておくと良いですね。
「CDNとはなにか」「どこのCDNを使えば良いのか」迷っていた方は是非参考にしてください。