-
JavaScript
- cdn
- jQuery
CDNを用いてjQueryを利用する方法とメリットデメリットを解説
jQueryはDOM操作を簡単にするためのJavaScriptのライブラリです。クリックやマウスオーバーなどのイベントが発生したら、指定した要素のCSSを変えたり、表示非表示を繰り返す機能もjQueryを使えば簡単に実装できます。
jQueryを導入する方法は２種類あります。ダウンロードする方法とCDNを使う方法です。CDNを使う方はダウンロードに比べて簡単にできるため、初心者の方でもすぐにjQueryを利用することができます。
本記事ではjQueryをCDNを用いて利用する方法とメリットデメリットについて解説します。
CDNとは
CDNとはContent Delivery Networkの略です。インターネット上からユーザーにHTML、画像、CSS、JavaScriptファイルなどのコンテンツを提供するための仕組みです。CDNを使うと自分のサーバーの負荷を最小限にして、高速に作動させることができます。
仕組みとしては、ユーザーの要求に応じてCDNをもつサーバーからデータを転送します。CDNを持つサーバーはオリジナルが持つデータをコピーしておき、要求があった場合、最適なルートを用いてユーザーにコードを提供することで、jQueryのコードを動かします。
CDNでjQueryを利用する方法
導入方法
CDNでjQUeryを導入する方法は公開されているHTMLのコードをコピーするだけです。今回は、jQueryの公式ページに公開されているCDNで解説いたします。まず、jQueryの公式ページにアクセスします。公式ページのDownloadをクリックします。（下図赤枠部）
下にスクロールすると「Using jQuery with a CDN」という項目があります。その文章中の下の方にある「https://code.jquery.com」へアクセスして下さい。（下図赤枠部）アクセス先にはCDNのリンクがあります。
自分の利用したいバージョンのリンクをクリックしましょう。ここで、uncompressed, minified, slim, slim minifiedとありますが、minifiedをおすすめします。機能が十分で容量も小さいため、高速で動きます。
バージョンをクリックするとHTMLのコードが表示されるので、jQueryを導入したいサイトのHTMLファイルにコードを貼り付けます。貼り付ける場所は</body>の手前がおすすめです。
ここまでやることでjQueryの導入が完了します。
CDNのコードがあるサイト
jQUeryのCDNが公開されているサイトは公式ページ以外にもあります。GoogleやMicrosoft、CDNJSなどがあります。どのサイトを使ってもjQueryは動かすことができます。動きの速度などに微妙に違いがでますが、普段使う分には大きな差はありません。
始めはとりあえず公式ページから使えばいいと思います。
CDNを利用するメリットデメリット
メリット
CDNを利用するメリットは導入が簡単で早いことです。ダウンロードしてファイルの場所を確認して、パスを通す手間に比べれば、ページに行ってコピー&ペーストで導入ができる方が手間が少ないです。
他のメリットはページの表示が高速になります。WebページでCDNを使う場合、キャッシュを再利用するため、ページを表示するまでの時間が短くなります。加えて、ダウンロードしてファイルをサーバーに置く必要がなくなるので、サーバーへの負荷も少なくなります。
デメリット
CDNを使うデメリットはほとんどありません。CDNへのアクセスが集中することで応答が遅くなる可能性はあります。また、提供されているバージョンが公開を終了すれば、利用できなくなります。つまり、公開終了に気づかなければ、jQueryのコードが動かないまま放置されます。
CDNを使う際は定期的に導入したjQueryのCDNページを確認して、使っているバージョンが公開されているか確認することをおすすめします。
ダウンロードするのとどっちがいいか
jQueryの導入方法にはCDNの他にダウンロードして、ファイルを読み込む方法があります。結論としては、どちらでもいいと思います。しかし、Webページを長期間運用するのであればダウンロードする方をおすすめします。
CDNを利用した場合、公開が終了するとjQueryが動かなくなります。公開終了の情報を持っていない場合、気が付いたら機能が全然使えないという可能性もあります。よって、長期間の運営を前提としているならばダウンロードする方がいいと思います。
導入に時間をかけたくない、サーバーを少しでも負荷をかけたくないのであればCDNを利用することをおすすめします。
まとめ
CDNを用いてjQueryを導入するのはインターネット上に公開されているコードをコピー＆ペーストするだけです。そのため、短時間で容易に導入できるのが大きな特徴です。初めてjQueryを使う人でもファイルをうまく読み込まないなどの躓きがありません。
jQueryはWebページを作る上で重要なスキルです。JavaScriptでも同じ操作はできますが、コード量が多くなるため、jQueryを使う方が効率的です。jQueryをすぐに導入するためには簡単にすぐできるCDNを利用することをおすすめします。
