ITコラム

colmun_main9353

jQuery

2018.03.05

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

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

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 を使用して ライブラリを直接読み込んでいますが、ライブラリをダウンロードして読み込む場合は ライブラリファイルまでのパスの記述にご注意下さい。

▲目次へ戻る

6. まとめ

jQuery を使用するための準備について、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ

▲目次へ戻る

卒業生の声

SHARE

最新記事

無料相談する

INTERNOUS,inc. All rights reserved.