jqueryの読み込み方法【CDNとダウンロード両方解説】

Aさん

jquery読み込み方法ってどうやるの？

jqueryを利用するときは、jquery本体をブラウザに読み込ませる必要があります。

jqueryって何？って方は↓の記事をどうぞ。

今回その方法をご紹介します。

jqueryの読み込み方法

先程も書きましたが、jqueryを使用する時はjquery本体をwebブラウザに読み込ませる必要があります。

jqueryを読み込ませる方法としては、次の２つの方法があります。

①CDNを利用する。

②公式サイトからファイルをダウンロードしてそれをサイト内に設置する。

順番に解説していきます。

まずCDNとは？

CDNとは「Content Delivery Network」の略です。同一のコンテンツを、多くの配布先、例えば多くのユーザーの端末に効率的に配布するために使われる仕組みです。

【参考】https://www.nic.ad.jp/ja/basics/terms/cdn.html

簡単に言うと高速表示できるよ〜ってことです。

CDNを利用する場合は、３つのサイトにホストされているどれかのURLをscript要素のsrc属性に書くだけです。

３つをご紹介していきます。

Google CDN

3.x

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

2.x

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

1.x

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

上から順に最新のバージョンです。

特に理由がない場合は最新バージョンを利用したほうがいいです。

ダウンロードして使用する場合は、公式サイトからダウンロードする必要があります。

アクセスするとjQueryという項目にDownload the compressed, production jQuery 3.4.1があると思います。

Download the compressed, production jQuery 3.4.1のポインタをもっていき右クリックして保存しましょう。

ファイル名は任意のファイル名で大丈夫です。

ディレクトリに保存したファイルを移動して<script>タグで読み込みましょう。

<script src="js/jquery-3.4.1.min.js"></script>

動作確認をしよう！

jsファイルを作成し、以下のコードを打ち込んで動作確認してみよう！

$(function(){
alert("準備OK！”);
});

準備OK！とアラートが出れば正常に動作しているのでどんどんコードを書いていきましょう。

補足

$(function(){});とは$(document).ready();の簡素に書き換えた記述です。

$(document).ready()とは、readyイベントと言いHTMLが読み込まれた段階で処理を開始するという意味です。

まとめ

結局CDNとダウンロードして読み込んで使用するのはどちらがいいのか疑問なんですが、

特に理由がない場合は、高速化が期待できるCDNをオススメします。

ちなみにCDNはローカルで使えないので気をつけましょう。

それではまた！