jQueryの読み込み方法と使い方

更新日:2019.05.23

jQueryについて．読み込む方法や使用方法など，jQueryの基本的な取り扱い方を解説

jQueryとは？
jQueryをダウンロードして読み込む方法
jQueryをWeb上のファイルから読み込む方法(CDN)
jQueryの使い方(メソッドチェーン)

jQueryとは？

jQueryとは簡単に言うとJavaScriptを取り扱いやすくしたものです．

jQueryは，JavaScriptとは別の言語のようにも見えますが，JavaScriptによって構成されておりあくまでもJavaScriptのライブラリにすぎません．

ライブラリとは？

ライブラリとはプログラミング言語において，ある機能を誰もが使えるようにまとめたプログラムファイルのことです．

一口にライブラリといっても，高度で複雑な計算(行列・微積分等)を行ってくれるものや，グラフを描画してくれるものなど，いろんな種類があります．

ライブラリを使うことによって，わざわざ1からコードを考えなくても簡単に様々な機能を実現できます．

有名なJavaScriptのライブラリとしては，簡単にユーザーインタフェースを構築できるReactや，様々なグラフやチャートを構築するのに便利なD3などがあります．

jQueryはライブラリとしては少し特殊ですが，JavaScriptを簡単に扱うためのライブラリと言えるでしょう．

jQueryを使うことによってJavaScriptで膨大な量になるコードを短く書き上げることができる他，記述方法も簡単で分かり易く，システムを構築をより楽にしていくことができます．

jQueryはライブラリをHTMLファイルに読み込むだけで使えるようになります．

jQueryの読み込みはjQueryファイルをダウンロードして読み込む方法と，ダウンロードせずにWeb上のjQueryファイルに直接アクセスして読み込む方法の2種類があります．

jQueryをダウンロードして読み込む方法

ライブラリをダウンロードして読み込む方法は，まずjQueryの公式サイトに入って「Download jQuery」をクリックします．

https://jquery.com/

次に，Download the compressed, production jQuery 3.4.1もしくはDownload the uncompressed, development jQuery 3.4.1をクリックします．

すると，ライブラリjquery-3.4.1.min.jsもしくはjquery-3.4.1.jsのコードが表示されるのでコピペや名前を付けて保存などして自分のPCの所定のファルダに保存します．

.minとは？

jquery-3.4.1.min.jsとjquery-3.4.1.jsとがありますがminがついている方は圧縮ファイルです．

圧縮といっても改行やインデント，空白スペース，コメントなど無駄な部分がカットされているだけで，書かれているコードは同じですが，その方がファイルのバイト数が少ないため，読み込み速度が早くなります．

ところが，minファイルは開発者にとってかなり読みづらいため，コードを閲覧する際は圧縮されてない普通の方のファイルを見るといいでしょう．

実際の運用時には容量の少なく，読み込みの早いminファイルを使うべきです．

ファイルを保存したら，あとはHTMLのheadタグ内に以下のスクリプトタグを追加して読み込むだけです．

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

src=" "の値には，保存したjQueryファイルまでのパスを記述します．

jQueryをWeb上のファイルから読み込む方法(CDN)

ダウンロードしなくても，Web上のjQueryライブラリに直接アクセスして読み込むことが可能です．

これはCDN(コンテンツデリバリーネットワーク)という配信されたWebコンテンツに効率よくアクセスすることのできる仕組みを使ってます．

CDNを使っての読み込みはHTMLファイルのheadタグ内に以下のスクリプトタグを追加するだけです．

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

/3.4.1/の部分はバージョンを表しており3.1.0や2.2.4など他のバージョンでも動作します．

しかし，古いバージョンでは対応しているブラウザが違ったり，使用できないメソッドがあったりするので最新バージョンを読み込むことをおススメします．

2019/05/23現在は3.4.1が最新バージョンです．

jQueryの使い方(メソッドチェーン)

jQueryはスクリプトタグ内に$(function(){ });を設けて，この中に記述していきます．

<script>                
    $(function(){
    
        /*ここに処理を記述していく*/
    
    });
</script>

jQueryのコードは基本的に$('セレクタ').メソッド();の形で動作します．

例
$('#sample').addClass('example');

上の例では，sampleのidを持つ要素に対してaddClassメソッド(要素にクラスを追加するメソッド)でクラス名exampleを付与しています．

セレクタで要素を選択し，様々なメソッドそれに適用させていくのがjQueryの基本的な使い方です．

さらに，コードを短縮化する便利なものとしてメソッドチェーンと呼ばれる記述方法があります．

メソッドチェーンとは，その名の通りメソッドをチェーンの様に
$('セレクタ').メソッド().メソッド().メソッド().メソッド();
と繋げて書く記述方法のことです．

例
$('.example').addClass('example_2').removeClass('example').text('HelloWorld');

この例では，クラス名exampleを持つ要素に対して，addClassメソッドでクラス名example_2を与え，removeClassメソッド(クラスを削除するメソッド)でクラス名exampleを削除したのちに，textメソッドで文字列「HelloWorld」を出力しています．

このように，1つのセレクタに対して複数のメソッドを繋げていくことによって，先に書いたメソッドから順に実行していきます．

jQueryではこのメソッドチェーンがよく使われており，効率よく，短くコードを書くことができます．

turutani.com