ITコラム

colmun_main9353

jQuery

2018.03.05

jQuery【 ダウンロード 】jQuery を使用するための準備

jQuery は、JavaScript を短いコードで記述することができる便利なツールですが、使用するにあたって、ライブラリを用意しておく必要があります。
今回は、jQuery の使用に必要なライブラリの取得、設置方法を具体的に紹介したいと思います。

目次

 1.ライブラリを用意する2つの方法
 2.jQuery をダウンロード
 3.ダウンロードしたファイルを読み込む
 4.CDN を使用して読み込む
 5.動作確認

1.ライブラリを用意する2つの方法

 
jQuery を使用する際には jQuery 本体( ライブラリ )を用意する必要がありますが、それには 次の2通りの方法があります。

●ライブラリをダウンロードして HTMLファイル内で読み込む

●CDN を使用して HTMLファイル内でライブラリを直接読み込む

今回は、ライブラリをダウンロードして HTMLファイル内で読み込む方法から順に紹介します。
 
ライブラリをダウンロードして使用する方法は、オフラインでも jQuery を使用できるというメリットがあります。

これに対して、CDN を使用してライブラリを読み込む方法は、処理速度が速いというメリットがあります。

▲目次へ戻る

 

2.jQuery をダウンロード

 
jQuery のライブラリをダウンロードします。

jQuery の サイトから、最新版のライブラリをダウンロードして下さい。
( 以下、ファイルのバージョン等は掲載当時のものですのでご注意下さい。 )

今回は、1番上の「 Download the compressed, production jQuery 3.3.1 」をクリックして進めます。

因みに、2番目の「 Download the uncompressed, development jQuery 3.3.1 」をクリックしてダウンロードすると、ライブラリの中身( 実際に実行される JavaScriptのコード )を見ることができます。

▲目次へ戻る

 

3.ダウンロードしたファイルを読み込む

 
先ほどの「 Download the compressed, production jQuery 3.3.1 」をクリックして jQuery ライブラリのダウンロードが終了すると、「 jquery-3.3.1.min.js 」というファイルが作成されます。

このファイルを任意の場所に置いて、HTMLファイル内で次のように読み込みます。

<script type="text/javascript" src="/path/jquery-3.3.1.min.js"></script>

「 path 」部分に、ダウンロードした jsファイルのパスを記述します。

ダウンロードした jsファイルを HTMLファイルと同じフォルダ内に設置する場合は、「 path 」部分が不要となり、「 src=”jquery-3.3.1.min.js” 」でOKです。

▲目次へ戻る

 

4.CDN を使用して読み込む

 
CDN( Contents Delivery Network, CDN )とは、Webコンテンツを インターネット経由で配信するためのネットワークを意味します。

そして、CDN を使用してjQuery のライブラリを用意する方法は、ライブラリを ダウンロードすることなく CDN から直接読み込む方法です。

jQuery ライブラリの読み込みに使用できる CDN は、主に次の通りです。

jQuery サイトの CDN

Google の CDN

Microsoft の CDN

 

jQuery サイトの CDN

jQuery の CDNを使用すると、HTMLファイル内で次のように読み込みます。

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

 

Google の CDN

Google の CDNを使用すると、HTMLファイル内で次のように読み込みます。

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

 

Microsoft の CDN

Microsoft の CDNを使用すると、HTMLファイル内で次のように読み込みます。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

▲目次へ戻る

 

5.動作確認

 
実際に jQuery を使用してアラートを表示します。
下の確認ボタンをクリックしてみて下さい。


 
このサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#btn01").click(function(){
    alert("jQuery の準備OK!");
  });
});
//-->
</script>
<input type="button" id="btn01" value="確認">

上記は jQuery サイトの CDN を使用して ライブラリを直接読み込んでいますが、ライブラリをダウンロードして読み込む場合は ライブラリファイルまでのパスの記述にご注意下さい。

▲目次へ戻る

SHARE

最新記事

000

企業インタビュー

2020.03.19

【企業の声:株式会社デリバリーコンサルティング】求める人材は、プログラマーをゴールではなくスタートだと捉えられる人

本日は株式会社デリバリーコンサルティング第1サービス本部へお邪魔し、取締役 第1サービス本部本部長木村さん、第1グループ マネージャ三浦さん、プログラマカレッジから入社した栢分さんへお話を伺いました! ▲(左から順に)第 […]

続きを見る

補正_アイキャッチ

卒業生インタビュー

2020.03.03

【卒業生の声:福島さん】芸能事務所マネージャーからプログラマーへ転身!最速2ヶ月で転身を可能にした学習法と心構えとは?

受講スクール プログラマカレッジ 受講期間 夜間コース(2ヶ月間) 料金 無料 就職先 アルサーガパートナーズ株式会社 プログラマカレッジ卒業生の福島さんにお話しをお伺いしました! 目次 モノづくりをしたいという信念はそ […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.