【jQuery入門】CDNを読み込む方法と使い方まとめ！

こんにちは、ライターのマサトです！

今回は、jQueryやjQuery UIをCDN経由で利用するための方法について学習をしていきましょう！

この記事では、

などの基本的な内容から、応用的な使い方に関しても解説していきます。

この記事で、CDNをしっかり学習して自分のスキルアップを目指しましょう！

「CDN」とは？

それでは、まず最初に「CDN」について基本的な知識から学んでいきましょう！

「CDN」はContent Delivery Networkの略で、簡単に言うとインターネット経由でファイルを配信する仕組みのことです。特にjQueryなどで利用する場合は、ソースファイルをネット経由で使えるためファイルをダウンロードする必要がありません。

もちろん、自分のサーバーへjQueryのファイルをアップロードしなくても良いわけです。手軽に使える便利なしくみなので、すぐにjQueryを使ったプログラミングをしたい時には最適と言えるでしょう。

「CDN」の使い方

この章では、「CDN」の基本的な使い方について見ていきましょう！　CDNを利用したjQueryファイルの読み込み方やGoogleが配信しているCDNの使い方について学んでいきます。

jQueryをCDNで読み込む方法について

まずは、基本的なCDNの使い方から見ていきましょう！

現在、jQueryのファイルは以下の公式サイトからCDN経由で利用できるURLが公開されています。

【 CDNを利用したjQueryファイル | jQuery公式サイト 】

「uncompressed」「minified」の2種類ありますが、どちらも同じjQueryファイルになります。

「minified」はソースファイルのコメントや改行などを排除しているので容量が少なく軽量で高速です。「uncompressed」は容量が大きいですが、何かエラーが起きたときにどの箇所が要因なのかをデバッグできます。

そのため、開発中は「uncompressed」を使い公開する段階になったら「minified」に切り替えると良いでしょう。使い方ですが、HTMLファイルに通常通りscriptタグから読み込むだけなので簡単です！

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

「src属性」にCDN経由で配信されているURLを記述するだけです。

GoogleのCDNを使ったjQueryの読み込み方

jQuery公式以外にもCDNを使ってファイルを配信しているサーバーがあります。もっとも有名なのはGoogleが提供している以下のCDNでしょう。

【 GoogleのCDNサービスリスト | Google公式サイト 】

jQueryは現在「1系」「2系」「3系」の3種類が存在しています。

そこで、それぞれのjQueryファイルを分けて以下のようなURLを使って利用できるように配信されています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

jQuery公式のCDNよりも高速な配信サーバーであり、多くの人が利用しているという特徴があります。

「CDN」のメリット・デメリット

基本的な「CDN」の利用方法が分かったところで、おさらいを含めてメリット・デメリットをまとめてみましょう！

メリットに関しては、これまで解説した通りなのですがキャッシュについて紹介しておきます。CDN経由で読み込まれたファイルはブラウザにキャッシュされるので、次回読み込む時はブラウザ内のキャッシュを使います。そのため2回目以降の読み込みが高速になり、もし他のサイトも同じCDNを使っていれば同様に高速になるわけです。

デメリットに関しては、ほとんど心配いらないレベルです。SSL対応については、例えば時分のWebサイトが「https://」から始まる場合にCDNのURLもhttps://からでなければ読み込まれません。ただ、ほとんどのCDNはSSL対応しているので問題にはならないでしょう。

問題は配信が停止された場合ですが、複数のCDNサービスが存在しているので代替を見つけるのは簡単です。

jQuery UIのCDNについて

この章では、jQueryで画面の構築を簡単にできる「jQuery UI」のCDN利用について見ていきましょう！

jQuery UIの基礎知識とCDNの使い方について学んでいきます。

jQuery UIとは？

まずは、jQuery UIについての基本を見ていきましょう！

jQuery UIは、jQueryをベースにインタラクティブなWebサイトを構築するための機能を盛り込んだライブラリです。
https://jqueryui.com

例えば、以下のような特徴があります。

これらの機能を簡単にサイトへ組み込めるのが魅力で、プログラミング方法もjQueryライクに扱えます。

つまり、jQueryでDOM操作を行いつつ画面UIの設計まで一緒に実現できるというわけです。

CDNを使ってjQuery UIを読み込む方法

それでは、jQuery UIをCDN経由で利用する方法について見ていきましょう！　といっても、jQueryをCDNで利用する場合とほとんど同じなので簡単です。

例えば、最新のjQuery UIを利用するのであれば次のように記述します。

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

1つ注意点としては、先にjQuery本体のファイルを読み込む必要があるという点です。理由は簡単で、jQueryをベースにしているので先に使えるようにしておかなければいけないわけです。

つまり、以下のようになります。

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

このように、jQuery本体を読み込んだあとにjQuery UIを読み込みましょう！

まとめ

今回は、CDNを使ってjQueryやjQuery UIを読み込む方法について学習しました。最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！