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

2013/11/27

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

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

JavaScript の参照方法
<script type="text/javascript" src="/jquery-3.2.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.2.1/jquery.min.js"></script>

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

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

Microsoft Ajax Content Delivery Network | Microsoft Docs

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

Microsoft CDN からファイルを読み込む
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.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.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

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

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

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

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

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

どうぶつの森ポケットキャンプのダウンロード方法とインストール手順【初期設定】

どうぶつの森ポケットキャンプの配信開始も通信エラーが頻発!原因はアクセス過多か?!

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装

安室奈美恵 Finally 再録曲は完コピを超えた!もはやベストアルバムではなくニューアルバムだ!

iTunes で再生回数や最後に再生した日が更新されない場合の対処法

AbemaTV(アベマTV)をテレビ画面で見る方法!基本的にネット環境は必須!

Nintendo Switch 初期不良による問い合わせから修理までの流れ

Windows 10 起動時に Chrome が勝手に起動する原因は?急に起動するようになったのは OS の仕様変更によるもの

JavaScript の数値チェックに isNaN を使ってはいけない理由

Nintendo Switch のセーブデータを保持したまま本体を初期化する!本体の調子が悪い時の対処法の1つです!