jQueryの基本と使い方

jQueryは、2006年1月に開催された BarCamp NYC でJhon Resig（ジョン・レシグ）氏によってリリースされたオープンソースのJavaScript（ジャバスクリプト）のライブラリです。
jQueryは様々な場面で利用されており、jQueryをJavaScriptライブラリのデファクトスタンダードだと称する人もいるぐらい世界的に活用されています。
jQueryは第一のテーマとして「Write Less, Do More.」（日本語にすると「書くコードはより少なく、できることはもっと多く。」）を目指して開発が進められています。

1 jQueryを使用するメリット
2 jQueryの導入
3 jQueryのオブジェクト
4 jQueryの参照
5 jQueryのオブジェクト
6 jQueryのエイリアス（別名）
7 $(document).ready()の短縮
8 セレクタでDOM要素を取得
9 文字列からjQueryオブジェクトを生成
10 DOM要素からjQueryオブジェクトを生成
11 他のJavaScriptライブラリと共存する際の注意

jQueryを使用するメリット

jQueryを使用するメリットはテーマとして掲げられている「Write Less, Do More.」の文字通り、JavaScriptで実装されていた今までのコードよりも「短いコードで実装」ができるところにあります。
コードが短くなることにより、バグの発生が少なくなるばかりか、無駄な処理や無駄な通信を減らすことができるため、システムやアプリケーションの品質を向上することができるようになります。
jQueryはシンプルな構造で作成されており、サイズも小さく軽量なため、Webアプリケーションへの導入が容易であるという特徴があります。
jQueryは習得しやすく拡張も容易です。また、軽量なので高速に動作するので、jQueryを使用する開発者にとっては非常に有益なライブラリです。
jQueryは特定のブラウザーに依存することなく、Webアプリケーションに必要な処理を実装できます。特にAjaxアプリケーションを構築するために必要な機能を、整理された使いやすいAPIとして豊富に用意して提供してくれています。
jQueryには追加ライブラリのjQueryプラグインが何万も作成されていますので、これらを利用することでjQueryの機能を拡張できます。

jQueryの導入

jQueryを導入するためには、jQueryの公式サイト「https://jquery.com/」からソースファイルをダウンロードして使用するか、CDN（Content Delivery Network: コンテンツデリバリーネットワーク）を利用して使用します。jQueryのCDNは公式サイトからCDN経由で利用できるURL「https://code.jquery.com/」が公開されています。
uncompressedとminifiedがありますが、uncompressedは開発用に改行などがされている読みやすいソースコードで、minifiedの方は改行などが除去されて軽量化された圧縮版になります。実行環境（本番環境）には軽量化されたminifiedのファイルを使う方が動作が軽くなるので適しています。（圧縮されている方のファイルには名前に「min」がついています。）

jQueryのオブジェクト

jQueryは、すべての機能を「jQuery」という1つのオブジェクトから派生する形で提供しているので、構造が非常にシンプルです。
jQueryのオブジェクトには、HTMLのドキュメント構造のDOM要素や、CSSのスタイルをデータ（プロパティ）が保持され、データに対する操作や振る舞い（メソッド）がまとめられています。
jQueryのオブジェクトのメソッドは、戻り値にjQueryのオブジェクトを返すので、メソッドを連続して記述するメソッドチェーン形式の実装が可能になっています。

jQueryの参照

jQueryを使用するには、ダウンロードして配置したjQueryファイルのURLを参照するかCDNのURLを参照します。

// ダウンロードして配置したファイルのURLを参照
<script src="../script/jquery-3.4.1.min.js"></script>
// CDNのURLを参照
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

// ダウンロードして配置したファイルのURLを参照

// CDNのURLを参照

上記の参照はjQueryの処理コードを記述する前に行います。

jQueryのオブジェクト

jQueryの参照ができたらjQueryでの処理コードを記述します。
jQueryではHTMLのドキュメント（DOM）が完全に読み込まれてから処理を実行するために以下の記述を行います。

jQuery(document).ready(function() {
    // ここにjQueryの処理コードを記述する...
});

jQuery(document).ready(function() {

// ここにjQueryの処理コードを記述する...

});

jQueryを使用したDOM操作などの処理は「<span class=”emphasize”>jQuery(document).ready(function() {</span>」と「<span class=”emphasize”>}</span>」の中に記述します。
以下に例としてjQueryのtrimメソッドを使用した空白を除去する処理を示します。

jQuery(document).ready(function() {
    // trimメソッドを使用した空白の除去
    let stringValue = '  前後に半角スペースのある文字列  ';
    stringValue = jQuery.trim(str);
});

jQuery(document).ready(function() {

// trimメソッドを使用した空白の除去

let stringValue = ' 前後に半角スペースのある文字列 ';

stringValue = jQuery.trim(str);

});

「jQuery(document).ready(function() {」の「jQuery」の部分がjQueryのコアオブジェクトを表します。

jQueryのエイリアス（別名）

jQueryのコアオブジェクトを表す「jQuery」の部分は「$」と置き換えることができます。「$」は「jQuery」のエイリアス（別名）です。

// jQueryを$に置き換えた場合の例
$(document).ready(function() {
    // trimメソッドを使用した空白の除去
    let stringValue = '  前後に半角スペースのある文字列  ';
    stringValue = $.trim(str);
});

// jQueryを$に置き換えた場合の例

$(document).ready(function() {

// trimメソッドを使用した空白の除去

let stringValue = ' 前後に半角スペースのある文字列 ';

stringValue = $.trim(str);

});

$(document).ready()の短縮

jQueryの処理を記述するための「$(document).ready()」の記述は短縮することができます。
以下に短縮して記述した場合を示します。

// jQueryを$に置き換えた場合の例
$(function() {
    // trimメソッドを使用した空白の除去
    let stringValue = '  前後に半角スペースのある文字列  ';
    stringValue = $.trim(str);
});

// jQueryを$に置き換えた場合の例

$(function() {

// trimメソッドを使用した空白の除去

let stringValue = ' 前後に半角スペースのある文字列 ';

stringValue = $.trim(str);

});

「$(document).ready(」が「$(」のみになります。

セレクタでDOM要素を取得

jQueryではDOM要素を取得するためにCSSと同様のセレクタ（検索する条件の式）を使用できます。セレクタは以下の書式で記述します。

$(‘セレクタ’)

または

jQuery(‘セレクタ’)

セレクタを使用することで、ドキュメントから検索条件に一致する要素を取得してjQueryオブジェクトを返します。
取得したjQueryオブジェクトはプロパティやメソッドを使用できます。

以下に例としてjQueryでbody要素の背景色を変更する処理を示します。

$(function() {
    // body要素の背景色の設定
    const elements = $('body');
    elements.css('background-color', '#d3edf0');

    // 以下のように1行で記述することもできます。
    // $('body').css('background-color', '#d3edf0');
});

$(function() {

// body要素の背景色の設定

const elements = $('body');

elements.css('background-color', '#d3edf0');

// 以下のように1行で記述することもできます。

// $('body').css('background-color', '#d3edf0');

});

セレクタを使用して操作対象のDOM要素を取得し、jQueryのメソッドを使用して操作します。
上記の例では背景色を操作するためにcssメソッドを使用してスタイルを設定しています。

文字列からjQueryオブジェクトを生成

jQueryオブジェクトはHTML文字列を指定して生成することもできます。
セレクタを指定した場合と同様に以下の書式で生成します。

$(‘HTML文字列’)

または

jQuery(‘HTML文字列’)

以下に例として生成したオブジェクトをbody要素に追加する処理を示します。

$(function() {
    // jQueryオブジェクトを生成
    const element = $('<div>body要素に追加するdiv要素</div>');
    // body要素の背景色の設定
    element.appendTo('body');

    // 以下のように1行で記述することもできます。
    // $('<div>body要素に追加するdiv要素</div>').appendTo('body');
});

$(function() {

// jQueryオブジェクトを生成

const element = $('<div>body要素に追加するdiv要素</div>');

// body要素の背景色の設定

element.appendTo('body');

// 以下のように1行で記述することもできます。

// $('<div>body要素に追加するdiv要素</div>').appendTo('body');

});

DOM要素からjQueryオブジェクトを生成

jQueryオブジェクトはDOM要素を指定して生成することもできます。
DOM要素を指定する場合の書式は次のようになります。

$(DOM要素)

または

jQuery(DOM要素)

以下に例としてjQueryでbody要素の背景色を変更する処理を示します。

$(function() {
    // body要素の背景色の設定
    const elements = $(document.body);
    elements.css('background-color', '#d3edf0');

    // 以下のように1行で記述することもできます。
    // $(document.body).css('background-color', '#d3edf0');
});

$(function() {

// body要素の背景色の設定

const elements = $(document.body);

elements.css('background-color', '#d3edf0');

// 以下のように1行で記述することもできます。

// $(document.body).css('background-color', '#d3edf0');

});

他のJavaScriptライブラリと共存する際の注意

「jQuery」を「$」と短縮して記述できるのは便利ですが、他のJavaScriptのライブラリをjQueryと同時に使用する場合には「$」が競合する場合があります。
「$」は様々なJavaScriptのライブラリで特別な意味を持つことがあるのでその場合は短縮せずに「jQuery」と記述します。
また、上記の場合はnoConflictメソッドを使用してjQueryが「$」を使用できなくし、他のライブラリの動作を邪魔しないようにします。

jQuery.noConflict();
jQuery(function() {
    // ここにjQueryの処理コードを記述する...
});

jQuery.noConflict();

jQuery(function() {

// ここにjQueryの処理コードを記述する...

});

補足

noConflictメソッドを使用すると「$」が使えなくなるので「$(function() {});」と記述すると以下のコンソールエラーが表示されます。
Uncaught TypeError: $ is not a function