すずろぐ

人生大逆転を目指す、鈴木俊吾の成長日記

たった1行でOK!GoogleのCDNからjQueryを読み込む方法

f:id:Suzushin:20170429140030j:plain

こんにちは、すずしんです。

JavaScriptを使ってWebページを作成する際には…。
何かとjQueryを利用する機会が多いと思います。
jQueryは非常に便利なライブラリですからね。

jQueryの公式サイトからjquery.min.jsをダウンロードして、それをサーバーに配置して読み込むというのはよくあることですが…。
ちょっと手間がかかってしまいますよね。
もっとサクッとやってしまえる方法はないのでしょうか?

実は、その方法があるんです!
それは「GoogleのCDNからjQueryを読み込む」という方法です。
このやり方をすると、なんと1行でjQueryを読み込むことが可能になります!

ちなみに、GoogleのCDN(Content Delivery Network)にホストされているライブラリには…。
jQueryの他にもAngularJS・Dojo・Prototypeなどといった有名どころが揃っていますし、そのバージョンも細かく選ぶことが可能です。
jQueryに限らず、これらのライブラリを使いたい時には、このGoogleのCDNを利用すると簡単でお手軽です。

この記事では、そのGoogleのCDNからjQueryを読み込む方法について書いておこうと思います。
自分用の備忘録としても残しておきたいですからね。

GoogleのCDNからjQueryを読み込む方法

GoogleのCDNからjQueryを読み込む方法は非常に簡単です。
以下のようなコードを記述するだけです。
特に理由が無ければ、各バージョンの最新版を使うと良いと思います。

jQuery 3.x

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

jQuery 2.x

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

jQuery 1.x

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

現時点で、選択することができるバージョンは以下のとおりです。

3.2.1, 3.2.0, 3.1.1, 3.1.0, 3.0.0, 
2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.1.4, 2.1.3, 2.1.1, 2.1.0, 2.0.3, 2.0.2, 2.0.1, 2.0.0,
1.12.4, 1.12.3, 1.12.2, 1.12.1, 1.12.0, 1.11.3, 1.11.2, 1.11.1, 1.11.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3

GoogleのCDNで提供されているライブラリの情報は、以下のページに記載されています。
ブックマークしておくと、何かと便利かもしれませんね。

developers.google.com

ひとこと

GoogleのCDNを利用すると、なんと1行でjQueryが読み込めてしまうのですね!
これは非常に簡単です。
今後、jQueryを使う機会ができたら、ぜひ私もこの方法を利用したいと思います。

もしあなたもjQueryを簡単・お手軽に使いたいと思っているのなら…。
この方法をぜひお試しくださいね。