CDNからjQueryファイルを読み込む方法【初心者向け】
プログラミング初心者向けに、GoogleのCDNからjQueryファイルを読み込む方法を解説しています。CDNを利用することでファイルや画像などをインターネット経由で配信することができ、開発現場でも役立つので、ぜひ覚えておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptのライブラリであるjQueryでファイルを読み込む方法を解説しています。
CDNでの読み込みでバージョン指定や最新版の使用など手軽に行いたい場合に便利なので、ぜひ理解しておきましょう。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
CDNとは
CDNとは、Content Delivery Networkの略称のことです。
自分のWebページを公開しているサーバーとは別のサーバーにコンテンツを配信するためのサーバーを用意し、そこからコンテンツを取得します。
サーバーの処理を分散させることで、負荷分散や通信速度の上昇が見込めます。
jQueryでは、実行のためのソースをCDN用のサーバーに保存し、そのサーバーにアクセスすることで、自分達のプログラムでもjQueryを実行することができます。
jQueryを実行するためにはCDNを使用する方法の他に、jQuery本体をダウンロードして使用する方法もありますが、そちらの方法よりも実行速度が速いため、ほとんどの場合でCDNが使用されます。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
CDNというのは何でしょうか？
簡単に言うと、オンライン上の他のコンピュータからjQueryのソースコードを読み込んで使用することが出来るってことなんだ。
信頼できるCDNなら、自分のコンピューターやレンタルサーバー上にjQueryのファイルを設置するよりも良いかもしれませんね。
実際に読み込んでみよう
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を読み込むことができ、エラーが消えたというわけです。
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の意味を理解していればそう言った場面でもスムーズに使用できるので是非覚えておくと良いでしょう。
jQueryのファイルを読み込んでからじゃないと、jQueryに沿った書き方というのは出来ないんですね。
そうそう。ちなみに、サンプルで書かれているのは、全てのHTMLファイルを読み込んでから中の処理を実行するって意味なんだ。
最初に書く、決まり文句みたいなものですか？
その通り！全部読み込んでから処理するので、一番外側に書いてあるHTMLタグについても処理できるよ。
[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
| この記事を監修してくれた方
中本賢吾（なかもとけんご） 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。 |
