CDNからjQueryファイルを読み込む方法【初心者向け】

JavaScriptのライブラリであるjQueryでファイルを読み込む方法を解説しています。

CDNでの読み込みでバージョン指定や最新版の使用など手軽に行いたい場合に便利なので、ぜひ理解しておきましょう。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。

 

CDNとは

CDNとは、Content Delivery Networkの略称のことです。

自分のWebページを公開しているサーバーとは別のサーバーにコンテンツを配信するためのサーバーを用意し、そこからコンテンツを取得します。

サーバーの処理を分散させることで、負荷分散や通信速度の上昇が見込めます。

jQueryでは、実行のためのソースをCDN用のサーバーに保存し、そのサーバーにアクセスすることで、自分達のプログラムでもjQueryを実行することができます。

 

jQueryを実行するためにはCDNを使用する方法の他に、jQuery本体をダウンロードして使用する方法もありますが、そちらの方法よりも実行速度が速いため、ほとんどの場合でCDNが使用されます。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

 

実際に読み込んでみよう

jQueryを読み込むためには以下の行をhtmlに追加してください。

htmlは上から実行されていくので、jQuery自体のコードより上にこのコードを書くようにしてください。

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

実際にCDNからjQueryが読み込まれているか確かめるためにコンソールから確認してみましょう。

ブラウザをChromeにして、「command+option+i」を押してみましょう。すると以下のように開発用のコンソールが出てきます。

開いているhtmlファイルに以下のコードを打ち込んでリロードしてください。

<script>
  $(function() {

  });
</script>

するとコンソールにエラーが出ます。

Uncaught ReferenceError: $ is not defined

上記は「$」が定義されていないという文字です。

そのエラーを解消するために冒頭にこのコードを打ち込んでください。

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

するとエラーが消えていることがわかります。

上のコードによってCDNでjQueryを読み込むことができ、エラーが消えたというわけです。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

jQueryのソースコードの種類

今回は、jquery-3.0.0.min.jsというCDNを利用しました。

実はjQueryのソースコードにはuncompressed, minified, slim, slim minifiedという4つの種類があります。

uncompressedについて

通常のバージョンです。学習中はこちらのバージョンを利用されても良いです。

minifiedに比べて、ソースコードを認識しやすいため、jQueryについての学習を目的としている場合は、uncompressedが良いかもしれません。

また、ソースコードを認識しやすいので、エラーが発生した際もエラー箇所を確認しやすいというメリットがあります。

 

minifiedについて

uncompressedのソースコードからコメントや改行などを削除し、ファイルサイズを圧縮したものです。

jQueryを利用することを目的として、jQueryのソースコードを書くにする機会が少ない場合は、minifiedの方が良いかもしれません。

uncompressedに比べ、ファイルサイズが圧縮されており軽量です。

 

slimについて

Ajaxモジュールとeffectsモジュール、及びリリース時点で非推奨となっている API を削除したものです。

実は、カスタムビルド機能を利用することで、開発者独自にjQueryをカスタムすることができます。

カスタムビルド機能はこちらを御覧ください。

 

slim minifiedについて

slimのソースコードからコメントや改行などを削除し、ファイルサイズを圧縮したものです。

slimに比べ、ファイルサイズが圧縮されており軽量です。

 

まとめ

今回はjQueryをCDNから読み込む方法について解説していきました。

jQueryの他にもプラグインを使う際などにCDNを使用することがあります。CDNの意味を理解していればそう言った場面でもスムーズに使用できるので是非覚えておくと良いでしょう。

 

 

[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。

この記事を監修してくれた方 中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。