jQueryの読み込みやCDNについて。
CDNを使う方法とコードの書く位置や順序の注意点

2023.07.11
2018.08.01

JavaScript・jQuery

jQueryと言えば、Webサイト制作においては非常に重宝され無くてはならないとまではいかなくとも多くのサイトで使われているものになります。

脱jQueryといったような事も言われだしてもいたりしますが、結局はそう言われながらもなんだかんだで代替のものも見つからず、結局jQueryの方が楽だし便利だし使いやすいしということで、結果、多くのサイトで今もjQueryは使われいます。

そんなjQueryですが、使う際にはファイルをダウンロードして自サーバーにアップして読み込む方法でも良いのですが、CDN（Contents Delivery Network）を利用して読み込む方が遥かに簡単で使い勝手も良いです。

今回はそんなjQueryの基本に立ち返って、jQueryをCDNを使って読み込む方法や、そもそもコードを書く場所はどこに書けば良いのか、その順番などについて見ていきたいと思います。

この記事の目次

そもそものjQueryをさらっとおさらい

そもそも今更ながらなので解説する必要もあまりないのですが、jQueryといえば、JavaScriptのライブラリ（プログラムの処理をまとめたもの）の1つになり、JavaScriptで書こうとすると長い行必要なものが、jQueryで書けば数行で完了するといったような便利な面があります。

とはいえ実際に多くのサイト制作者が自らJavaScriptを書いているかというとそうではなく、jQueryを使う最大のメリットと言えば、jQueryを使った様々なプラグインが用意されていて、それらを使う事でサイトに様々な動きなどを加える事ができるという点では無いかなと思います。

多くのサイト制作者（自分も含め）はJavaScriptをゼロから書いて作る事はできないという方が多いですが、jQueryのプラグインなどを使うことで、サイトに様々な動きをもたらす事が可能になっています。

CDN（Contents Delivery Network)をさらっとおさらい

CDNとは、Contents Delivery Networkの略語になりますが、大容量コンテンツをインターネット上で大量配信するためのネットワークという事になるのですが、簡単に言ってしまうと、外部ファイルをリンク1つで呼び出して利用できる仕組みと考えるとわかりやすいかもしれません。

要は、通常の利用方法だとファイルをダウンロードしてそれを自分たちのサーバーにアップロードしてそれを呼び出して使わなければいけないけれど、外部で用意されているファイルをリンクで呼び出して使っていいよ。といったイメージになります。

jQueryも容量がそこそこ大きいサイズになってくるため、そういった外部サーバーに用意されたjQueryのファイルを呼び出して使えるものが用意されています。

例えば、Google社が提供しているものなどは下記になっています。
Google Hosted Libraries

jQueryファイルをCDNで呼び出す方法

使い方は簡単で、ファイルのあるサーバーから指定のURLをコピペするだけになります。
先ほどのGoogle社のCDNのページの右側を見ると、ライブラリとしてリストが並んでいますが、その中にjQueryという項目があるはずです。

そこをクリックすると、

3.x snippet:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
2.x snippet:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js”></script>
1.x snippet:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
Google Hosted Libraries

という記載が出てきます。
jQueryには、大きなバージョンとして1～3まであり、その各バージョンの最新が用意されています。

各バージョンの中の、jquery/○.○.○/jquery.min.js というのは見るタイミングなどによっては最新バージョンが出ていれば変わりますので、時折チェックしておくと良いかもしれません。

バージョン3を使うのであれば、

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

このタグをHTMLファイルの中で呼び出すだけでjQueryが使えるようになります。

CDNは複数ありどれを選べば良いのか

上記は、Google社が用意・提供してくれているCDNになりますが、Googleだけに限らず、様々な企業からCDNが提供されていますので、どこを使っても問題ありません。

<!-- Google社のjQueryのCDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Microsoft社のjQueryのCDN -->
<script src=”https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js”></script>

<!-- cdnjsのjQueryのCDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

もちろん、jQueryの公式からも用意されており、jQuery CDNというページが用意されており、ここから各バージョンのjQueryのCDNのURLを取得できます。（取得する際は、minifiedを選ぶのがおすすめです）

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

どれを選ぶのが良いかというのは、特に何か違いがあるわけではないのでどれを選んでも基本的には構いません。自分はいつもGoogle社のCDNを使わせてもらっています。

jQueryを呼び出す場所やコードを書く順番について

jQueryをCDNで使う際、その取得コードはわかったけど、どこに書けば良いのかという点についてですが、昔は割とソースの上段に書かれたりしていたのですが、今ではほぼ</body>タグの直前というのが推奨されています。

<!DOCTYPE html>
<html>
<head>
  <meta ...>
</head>
<body>
  <header>
  ...
  </header>
  <main>
  ...
  </main>
  <footer>
  ...
  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="./script.js"></script>
</body>
</html>

このように、最後の</body>タグ直前で呼び出すのが推奨されています。

昔であれば、cssなどと同じように<head>タグで呼び出すことを推奨されていたこともありましたが、そこで呼び出すと他の設定などと競合してしまったりして、正常に動かなかったりすることもあるため、今では</body>タグの直前で読み込むのが良いとされています。