jQuery ファイル読込みを CDN のライブラリから参照する方法

更新日: 公開日:2013/11/27
jQueryファイル読み込み

jQuery とは JavaScript のライブラリの一種で、スクリプトファイルを自身のサーバーにアップロードして参照する必要があります。

呼び出し方は、他の JavaScript ファイルと同様です。

JavaScript の参照方法
<script type="text/javascript" src="/jquery-3.3.1.js"></script>

なお jQuery の公式サイトからダウンロードすれば、ローカル環境でも使えます。

Download jQuery | jQuery

ただ、わざわざダウンロードしなくても CDN として Google やマイクロソフト、そして jQuery の公式サイトに、ライブラリを直接参照できるパスが提供されています。つまり、このパスを利用することで、自身のサーバーへの負荷を減らすことができるのです。

CDNとは
コンテンツ・デリバリー・ネットワーク(CDN)とは簡単に説明すると、ファイルを配信する仕組みです。各地にキャッシュサーバーが存在し、アクセス元から一番近くのサーバーへ接続するため、本体に負荷が集中することなく素早くファイルが提供される仕組みを持っています。

今回は各社が提供する CDN から、jQuery ファイルを参照する方法について説明していきます。

jQuery を利用するための準備

Google の CDN よりファイルのリンク先を取得

Hosted Libraries | Google Developers

複数のバージョンが記載されていますが、最新は一番上にあるものです。jQuery と組み合わせて使うプラグインによっては、バージョン 1.X 系や 2.X 系でしか使えないものもありますが、特に意識する必要がなければ 3.X 系を参照するようにしましょう。

Google CDN からファイルを読み込む
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

js ファイル直前のディレクトリがバージョンを表しています。上記例では バージョン 3.3.1 を参照しています。この数字を変えることで、他のバージョンを参照できます。

Microsoft の CDN よりファイルのリンク先を取得

Microsoft Ajax Content Delivery Network | Microsoft Docs

バージョンに関しては Google と同様です。参照方法は次の通り。

Microsoft CDN からファイルを読み込む
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

ファイルの種類に min や slim、map が含まれているものがあります。jQuery を使って何かプログラム開発をする人でなければ「.min.js」ファイルを参照してください。それぞれのファイルは次のような違いがあります。

ファイルの種類内容
*.js何も手を加えられていない jQuery ファイル
*.min.jsスペース等、プログラム処理する上で不要な情報を取り除いてデータ量が圧縮されたファイル
*.min.map圧縮ファイルのプログラムをデバッグする時に必要になるもの(プログラマーが必要とするファイル)
*.slim.*一部の機能に限定して提供されたスリムバージョン(処理によってはこのバージョンで動かない)

Microsoft のサイトでは http で記されていますが https にリダイレクトされるので、事前に書き換えるようにしましょう。

jQuery の CDN よりファイルのリンク先を取得

jQuery CDN

以下のサンプルではリンク先の minified を選択して、圧縮された .min ファイルを参照しています。

jQuery CDN からファイルを読み込む
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

Google や Microsoft と少し記述内容が異なり、integrity と crossorigin の属性が追加されています。integrity 属性の値は、参照するファイルが意図せず改ざんされていないかブラウザ側でチェックするための情報です。

上記で紹介した Google や Microsoft が提供する CDN が改ざんされるリスクは低いですが、その確率は 0% ではありません。セキュリティ面を意識するのであれば integrity が実装された jQuery の CDN を使うのが望ましいです。

ただ、これらの CDN の中では jQuery のキャッシュサーバーは数が少ないため、アクセスする場所によっては Google の方が処理スピードが速くなります。安全面で選ぶか、処理速度で選ぶかは目的によると思いますので、自身の用途に合った選び方をしてください。

なお、当ブログではレスポンスの速さから Google の CDN から jQuery ライブラリを参照しています。参考までに。

\ この記事をシェアする /

このブログの運営者

NJ

Web系メインで従事していた元システムエンジニア。現在は個人事業主として独立。Webサイト運営における「困った問題」の解決方法をブログで発信。Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりをしている。