初心者向け：jQueryの使い方！CDNを読み込む方法
初心者向けに、jQueryの使い方には、jQuery自体をダウンロードして使う方法と、jQueryのCDNを読み込んで使う方法の2種類の方法があります。
「jQueryを使いたいけど、ダウンロードしたほうがイイか？」それとも「CDNを読み込んだ方がイイのか？」「どちらの方法がイイの？」や「そもそもCDNってなに？」など、初心者の方には、分からないことが沢山あることと思います。
そこで、jQueryを使い始めるにあたり、jQueryの準備をする、また、CDNを使う方法をまとめてみたいと思います。
という事で、それでは今回はッ、
- ・jQueryを準備！ダウンロード
- ・jQueryのCDNとは？
- ・jQuery：CDNの使い方
- ・CDNメリットとデメリット
- ・jQuery3：jQueryにはヴァージョンがある！
上記について記載していこうと思います…。
jQueryを準備！ダウンロード
それでは、jQueryを利用する準備方法を記載してみます。jQueryのコードを記述するためには、まず、jQuery本体をブラウザで読み込まなくてはなりません。
jQueryは、jQueryのサイトからダウンロードすることができますが、2種類から選べるようになっています。2種類というのは、圧縮版（Minified）と非圧縮版（Uncompressed）の事になります。
非圧縮版でも、比較的軽量ですが、圧縮版になるとコード内の改行やスペースが取り除かれているので、さらに軽量化されています。「jQuery本体のコードを読んでみたい！」という人は、非圧縮版をダウンロードしてみると良いでしょう。しかし、実際にWebサイトを公開する場合は、読み込みスピードの速い圧縮版を使用するのが一般的になります。
jQueryのサイトにアクセスしたら、トップ画面のDownloadボタンより進み、次のページで「圧縮版」か「非圧縮版」を選びダウンロードが可能です。
jQueryをダウンロードしたら、通常であればHTMLファイルのヘッド内などで読み込むことが一般的ですが、サイトの表示速度などを考慮すると、</body>:bodyの閉じタグの前で読み込む方法もあります。※サイトの構成によって、読み込むところが異なる場合があるので、注意が必要になります。
・・省略・・
<script src=”js/jquery.js”></script>
</head>
<body>
・・省略・・
jQueryのCDNとは？
jQueryのCDNとは？Content Delivery Network（コンテンツデリバリーネットワーク）の略で、簡単に説明するとインターネット経由でファイルを配信する仕組みのことです。
自分のWebページを公開しているサーバーとは別のサーバー（例えば、GoogleやMicrosoftなど）が、コンテンツを配信するためのサーバーを用意し、そこからコンテンツを取得します。
CDNを利用すれば、jQueryをダウンロードしたり、自分のサーバーにアップロードすることなく、jQueryを利用することが可能になります。
jQuery：CDNの使い方
今回は、「CDN」の基本的な使い方を記載してみます。CDNを利用したjQueryファイルの読み込み方や使い方、また、jQueryを配信しているCDNの種類の紹介を記載してみます。
jQueryをCDNで読み込む方法
まずは、jQueryが提供している「jQuery CDN ? Latest Stable Versions」のリンクから記載してみます。
サンプルとしては、下記のようにCDN（圧縮版：min.js）のファイルを直接読み込めばOKです。
・・省略・・
<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>
</head>
<body>
・・省略・・
「src属性」にCDN経由で配信されているURLを記述するだけです。
その他のCDN
それでは、一覧にて記載してみます。どれも信頼性のあるものですので、使いやすいものを選択すれば良いと思います。
jQueryサイトのダウンロードページに、各CDNの最新リンクもまとめられています。
CDNメリットとデメリット
基本的なjQuery：CDNの使い方が、おおよそご理解いただけたことと思います。そこで、CDNを使うメリットとデメリットを下記にまとめてみます。
jQuery：CDNを使うメリット
まずはメリットから、例えば、あるサイトでGoogleが提供するCDNからjQueryを読み込んでいた場合、そのデータは読み込んだブラウザにキャッシュされていきます。
キャッシュとは、
訪問した “ ウェブページの情報 ” を一時的に保存する仕組み（またはその一時的なデータそのもの）のことで、よく訪問するページの表示スピードが上がるというメリットがある。ページを表示する際には、そのページのデータをダウンロードする必要があるが、画像やテキスト情報など、キャッシュという一時的な保存データがスマホやPC内にあることで、再表示のスピードが上がるという仕組みです。
そして、別のサイトを読み込んだ際、同じjQueryが使われていた場合は、Webサイト事態の表示が高速化されることになります。なのでCDNを使用する際は、できるだけたくさん利用されている提供元のCDNを選ぶことが、賢い選択となります。
また、もうひとつの大きなメリットとしては、サーバー負荷の軽減があげられることと思います。jQuery自体をサイト自体のサーバーから読み込むのではなく、CDNを提供しているサーバーから読み込むので、自身のサーバーの通信量を減らすことができます。
自身のサーバーの通信量を減らすことができると、サーバーの負荷の軽減につながり、障害が起こりにくくなり、他のデータをスムーズに転送できることとなります。このように、CDNを利用することはサーバーコストを抑えることと、安定したWebサイトを運営することに繋がります。
jQuery：CDNを使うデメリット
デメリットとしては、CDN提供サイトへのアクセスが集中して、レスポンスが悪くなる可能性、および、CDN提供側サーバー障害によるWebサイトが停止するといった不具合があげられることと思います。
しかしながら、CDNを提供しているサーバーおよび提供元を見てみますと、Googleやmicrosoftなので、障害自体には非常に強いものと思います。
結論として、個人でWebサイトを運営するにあたり、CDNを使用するデメリットは、それほど気にする必要はないことと思います。
jQuery3：jQueryにはヴァージョンがある！
上記で記載したCDNへのリンク先を見てみますと、ファイル名にjquery/2.2.4/jquery.min.jsやjquery/3.5.1/jquery.min.jsのように数字が記載されています。jQueryからダウンロードしたものもこれと同様に、数字が記載されていることと思います。
これは、jQueryのヴァージョンを表す数字になります。以前であれば、Ver1とVer2のものしかございませんでしたが、現在はjQuery3が主要なものになっています。jQueryは常に開発が進められて、日々進化しています。
基本的には、後方互換の考え方を採用しているので、Ver1.5のときに書いたコードも、Ver1.12でも動作します。しかしながら、中には（プラグインなど）、ヴァージョンが違うと動作が変わってしまう、ということも全くないわけではありません。
jQueryの学習をするのであれば、常に最新版を使って進めるのが良いことと思います。
という事で、今回は「jQueryの使い方！CDNの読み込む方法」につきまして、サンプルコードを交え記載してみました。
個人的には、ショッピングサイトなどで規制がなければ、まだまだCDNでjQueryを使いたいと思っていますが、CSS3でも比較的、色々なアニメーションなども実装できますので、できればファーストビューに該当しない箇所であれば、jQueryを使いたいと思っております。また、実はJavaScriptと比べると簡単そうに見えるjQueryですが、jQueryに特化したブログなどでは、自作のスライダーや諸々、プラグインを使わずに実現する方法があり、実に奥深いライブラリのひとつだといえる事と思います。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
