jQueryのCDNはGoogleがおすすめ!理由と使い方を詳しく解説 コーディング

【jQuery入門】CDNでjQuery本体を読み込む方法と選び方まとめ

jQueryは、Webデザインに関わっている方なら誰しも使う機会があると思います。
最近は「jQueryはそろそろ不要になる」など言われていますが、まだまだ現役ですね。

jQuery本体をWebサイトに読み込ませたい時、GoogleやMicrosoftが提供しているCDNを利用する方法が一般的ですが、「CDNを利用する」と一口に言ってもいくつか種類があるため、どれを使えば良いのか初めは誰もが迷うと思います。

今回はCDNの種類や読み込み方法、どこを使うべきかをご紹介します。

スポンサーリンク

jQueryとは

「jQuery」とは、JavaScriptのライブラリ(よく使う機能をパーツ化したもの)の1つです。

簡単に言うと、「JavaScriptをとても簡単に書けるようにしたもの」です。
jQueryを使うことで、とても少ないコード量でプログラムを組むことができるんです。

プログラムがわからない方でも扱いやすいため、多くのWeb制作に携わる人が利用しています。

そしてそのjQueryを利用するには、「jQueryの本体ファイル」というものが必要になります。
本体ファイルを読み込むには下記2つの方法があります。

  1. 本体ファイルをダウンロードして利用する方法
  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」を使うのが良いでしょう。

配布されているプラグインの中には、バージョンによって動かないケースもあるので、そういった場合には古いバージョンを利用します。

Google

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を使えば良いのか」迷っていた方は是非参考にしてください。