jQueryを使うにはCDNでファイルを読み込ませると簡単で便利です。ネットに繋がった環境であればjQueryのバージョン選択やサイズが軽量な圧縮版もリンク先を変えるだけ。ファイル管理の手間も無くて大変楽です。
配信元によってはセキュリティ対策されたリンクやファイルの種類を選べます。便利なだけでなく、ファイル読み込みの高速化などCDNならではのメリットも有ります。
そこでこの記事では、CDNでjQueryを配信しているサイトやCDNごとの読み込み方法の違いを紹介しています。
本番環境はもちろん、テスト環境があるならCDNがおすすめ。ローカル環境にファイルをダウンロードして使う煩わしさから解放されますよ。
この記事の目次
CDNでjQueryを読み込むには？
CDN（Content Delivery Network）とは、インターネット上でデジタルコンテンツを効率的に配信するためのネットワーク。世界中に分散されたサーバーを利用してコンテンツを提供します。
CDNの配信サーバーにデータを一時的にキャッシュさせておく事で、エンドユーザーへ最短経路で効率的に配信される仕組みです。
まさにjQueryのデータファイルもこのCDNで配信されており、高速で利用出来るわけです。
CDNで使えるjQueryのリンク先一覧
公式のjQuery CDN以外にも、同様にjQueryの配信をしているCDNは幾つかあります。サイトの複数個所で使う時は同じCDN経由のリンクを利用すると良いです。
以下はjQuery公式で紹介されているCDNの一覧です。
特におすすめはCDNJS CDNやjQuery CDN、Google CDNといったところです。
もちろんjQuery本体のファイルをサーバーへアップロードして使う方法もあります。では、なぜCDNを利用するのか？そのメリットを紹介します。
CDNでjQueryを利用するメリット
jQueryは、CDNを利用して世界中に分散したサーバーでホストされています。その為、jQueryファイルの読込み速度向上や自身のサーバーへの負荷の軽減など、サイトのパフォーマンスの向上に繋がります。
サイト運営側にとっても、jQueryファイルのアップデートやバージョン管理などの手間も減らせます。
また、CDNを利用してjQueryの読込み速度が上がるとページの表示速度改善になり、SEOの改善効果も期待できます。
CDNでjQueryを使うメリットをまとめると、主に以下の様なものになります。
高速なダウンロードとキャッシュ
ユーザーがサイトにアクセスする際、最も近いサーバーからjQueryファイルをダウンロードされるので、高速なファイルの取得が可能になります。
また、一度ダウンロードされたjQueryファイルはブラウザのキャッシュに保存されるため、再訪問したユーザー側ではローカルからファイルを読み込むことで、ダウンロード時間を節約できます。つまり、ページの表示速度改善にも役立ちます。
ネットワークの負荷軽減
自身のサーバーからjQueryファイルを提供する場合、それがネットワークトラフィックに負荷をかけることがあります。CDNを使用することで自身のサーバーへの負荷を減らすことができます。
同様に、アクセスが集中した際もCDNプロバイダーが負荷分散を担当し、自身のサーバーのリソースを解放することが出来ます。
CDNのリンクを貼ればすぐに使える
テスト的に少しだけjQueryを使いたい場合もあります。わざわざjQuery本体のファイルを公式サイトからダウンロードするのは面倒なもの。
ネットワークに繋がっている必要は有りますが、自分のサーバーへjQueryファイルをアップロードせずにjQueryを利用出来るのは便利です。
CDNを使ったjQueryのリンクを貼る場所
以下はjQuery公式のCDNを使った記述になります。scriptタグのsrc属性にCDNのリンクを貼るだけで好きなjQueryのバージョン使う事が出来ます。
ネットに繋がった環境で利用して下さいね。
<!-- jQuery CDNで提供されたリンク -->
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>この場合、「jquery-3.7.0.js」の数字がバージョンになります。各ページでバージョンを揃えて入れておけば管理もし易いです。
また、CDNで読み込ませるjQuery本体は、基本的にHTMLファイルのヘッダー内に記述します。
jQueryを使って自作したJSファイルや外部ライブラリの読み込み遅延が気になる場合は、それらのファイルを</body>の直前で読み込ませます。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイトル</title>
<!-- jQuery CDNで提供されたリンク -->
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>紹介したのは一番シンプルなリンクの記述ですが、CDNによってはjQueryファイルの種類を選ぶことが出来ます。
CDNで提供されるjQueryファイルの種類
実は、CDNのjQueryファイルは用途に合わせて複数用意されています。jQuery公式をはじめ、幾つかのCDNでは以下の様にjQueryファイルの種類が選べるようになっています。
uncompressed 非圧縮ファイル
非圧縮版のソースファイル。圧縮されていないので開発用に向いています。その分ファイルサイズは大きいです。
minified 圧縮された軽量ファイル
変数名や関数名の短縮、コメントや不要な空白が削除されており、デバッグには向きませんがファイルサイズが軽量。本番ではこちらを使うと良いです。
map デバッグに便利なファイル
圧縮されたファイルだと、デバッグやエラーの追跡が困難。mapファイルを使う事で圧縮ファイルの行番号や変数名を、元の行番号や変数名に対応させる事が出来ます。
slim 機能制限したファイル
ajaxとエフェクトのモジュールを除外したもの。これらを使わないならこのスリム版も使えます。
slim minified スリム版の軽量ファイル
スリム版を圧縮したものです。
jQueryの3つのバージョンの違いについて
jQueryには「1系」「2系」「3系」という3つの主要なバージョンが存在し、機能的な違いがあります。
選択するjQueryのバージョンは、プロジェクトの要件と対象とするブラウザによって異なります。もしかしたら現在では1系や2系を使う理由はないかも知れません。
ただし、バージョン管理されずにずっとjQuery 1系を使っているウェブサイトなら、プログラムもjQuery 1系に合わせた記述でないと動かない事があります。
こういった問題も起きる為、以下に各バージョンの特徴を解説していきます。プロジェクトに合わせて最適な物を選んでくださいね。
jQuery 1系の場合
- 古いバージョンのブラウザ（例：Internet Explorer 6/7/8）との互換性が重視されています。
- 軽量: ファイルサイズが比較的小さいため、ページの読み込み時間が短くなります。
IE自体が廃止された為、互換性自体に意味が無いですね。
jQuery 2系の場合
- ブラウザのサポート範囲が変更: 古いIE（IE 6/7/8）のサポートを終了し、IE 9以上をサポートするようになりました。
- 古いブラウザのサポートを終了したことにより、ファイルサイズが小さくなりました。
IE自体が廃止された為、こちらも特に気にする事は無いです。
jQuery 3系の場合
- ES2015+に対応: ECMAScript 2015（ES6）以降の機能をサポートしています。
- ブラウザのサポート範囲の変更: IE 6/7/8/9をサポートしていません。IE 10以上をサポートしています。
- モダンなブラウザに焦点を当て、より高速で効率的なコードになっています。
特別な理由が無い限り、jQuery 3系を使うのが良いと思います。
jQuery公式のCDNでjQueryを読み込む
jQuery公式もCDNを配信しています。公式のCDNはファイルの改ざん対策など、セキュリティに配慮したリンクになっています。
jQueryのバージョンは先に解説した通りなので、サイトに合わせて使ってください。
jQuery公式のCDNでは、圧縮版やスリム版などの種類も選べます。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイトル</title>
<!-- jQuery CDNで提供されたリンク -->
<script src="https://code.jquery.com/jquery-3.7.0.js"
integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
crossorigin="anonymous"></script>
</head>integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="integrity属性は、外部リソースを提供するCDNなどを利用する際に有用です。CDN上のリソースが改ざんされていないかチェックし、問題があればブラウザの実行を防止する事でセキュリティを維持します。
integrity属性の値は、リソースの内容に基づいて計算されたハッシュ値です。ハッシュアルゴリズムにはsha256、sha384、sha512などが使われます。
crossorigin="anonymous"crossorigin属性は、異なるオリジン（プロトコル、ドメイン、ポート）間でリソースの共有方法を制御するために使用されます。
ウェブページは同じオリジン（プロトコル、ドメイン、ポートが同じ）からのリソースを問題なく読み込めますが、異なるオリジンからのリソースを読み込む場合は、セキュリティ上の制約があるためです。
crossorigin属性の値がanonymousの場合、リソースを読み込む際のリクエストにオリジンを含めないことを意味します。
リンク先：jQuery CDN
CDNJSのCDNでjQueryを読み込む
個人的にはCDNJSというサイトでjQueryを読み込んで使う方が多い様に感じます。CDNJSでは、有名なCloudflareのCDNで沢山のコンテンツを配信しています。
ちなみに、CDNJSではFontAwesomeもCDNで配信しています。jQueryを使う方なら、もしかするとFontAwesomeのアイコンフォントの読み込みで既に使った事があるかも知れませんね。
CDNJSのCDNでは、圧縮版やスリム版、デバッグやエラーのトラッキングに使えるmapなどのファイルも選べます。
CDNJSでは前述したCDNで提供されるjQueryファイルの種類も選べるうえ、コードの右側に並ぶ3種類のアイコンそれぞれから用途に合わせたリンクをコピー出来ます。
リンク先：cdnjs
GoogleのCDNでjQueryを読み込む
GoogleもCDNを使ってjQueryファイルを配信しています。Googleが提供しているCDNなので安心感があります。
ただし、記載されているのは各系統の最新バージョンだけなので分かりづらいかも知れません。また、jQueryファイルは圧縮版になります。
3.x スニペット:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/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>リンク先：Google Hosted Libraries – jQuery
まとめ
今回はCDNでjQueryを読み込む方法を解説しました。ネットに繋がった環境があれば、CDN経由でjQueryを使うのがおすすめです。
何よりファイル管理する必要も無く、ファイルの読み込みも高速。CDNでリンクを貼るだけでjQueryが使えるのは大きなメリットです。
今回紹介したCDNJSというサイトでは、jQuery以外のJSやCSSも沢山配信しているので、上手く活用して下さいね。
note
