第19章 jQuery

jQueryとは？

jQueryは、JavaScriptのライブラリの一つで、Webブラウザ上でのDOM（Document Object Model）の操作、イベントハンドリング、アニメーション、Ajax通信をより簡単に、そしてブラウザ間の違いを気にすることなく行えるように設計されています。

以下はjQueryの簡単な特徴になります。

  1. シンプルなセレクタとチェイニング: jQueryではCSSセレクタを用いて要素を選択することができます。さらに、複数の操作を一つの行でチェイニングすることができるため、コードが簡潔になります。
  2. ブラウザ間の違いの吸収: Webブラウザには互換性の問題があるため、純粋なJavaScriptで書くと、ブラウザごとに動作が異なる場合があります。しかし、jQueryはこれらの違いを吸収してくれるので、ほとんどのブラウザで同じように動作するコードを書くことができます。
  3. 豊富な機能: DOMの操作、イベントのハンドリング、アニメーション、Ajax通信など、Webページを動的にするための基本的な機能が豊富に揃っています。
  4. 拡張性: プラグインとして提供される追加の機能や、自分でカスタムしたプラグインを簡単に追加することができます。
  5. 活発なコミュニティ: jQueryは非常に人気があり、多くのWeb開発者が使用しています。そのため、質問や問題に対する回答、または参考になる資料やチュートリアルが豊富に存在します。
  6. 軽量: jQueryは軽量であり、ページの読み込み速度やパフォーマンスに大きな影響を与えることなく、多くの機能を提供します。


導入方法

Queryを使うには、まずそのライブラリを導入する必要があります。CDN(Content Delivery Network)や直接ダウンロードしてプロジェクトに追加する方法などがあります。

例: CDNを使用しての導入(2023年8月22日現在最新バージョンは3.7.0)

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


セレクタ

jQueryを使用すると、CSSセレクタを用いてHTML要素を選択し、それに対して様々な操作を行うことができます。jQueryのセレクタの機能は、実際にはブラウザ内部で提供されるDOM APIに基づいており、それをより扱いやすい形で提供しています。

基本的なセレクタ

要素セレクタ: 指定されたHTML要素を全て選択します。

$("p") // 全ての
要素を選択

IDセレクタ: 指定されたIDの要素を選択します。

$("#myId") // id="myId"の要素を選択

クラスセレクタ: 指定されたクラスの要素を全て選択します。

$(".myClass") // class="myClass"の要素を全て選択


階層セレクタ

子孫セレクタ: ある要素の子孫を全て選択します。

$("div p") // 
内の全ての
要素を選択

子セレクタ: ある要素の直接の子要素のみを選択します。

$("ul > li") // 
    の直接の
  • 子要素のみを選択


フィルタリングセレクタ

:first、:last: 最初や最後の要素を選択。

$("p:first") // 最初の
要素のみを選択
$("div:last") // 最後の
要素のみを選択

:even、:odd: 0から始まるインデックスで偶数や奇数の要素を選択。

$("tr:even") // 偶数の要素を選択

:eq(): 指定されたインデックスの要素を選択。

$("li:eq(2)") // 3番目の
  • 要素を選択（インデックスは0から始まる）

    • :contains(): 指定されたテキストを含む要素を選択。

    $("p:contains('Hello')") // 'Hello'というテキストを含む
    要素を選択


    イベントハンドリング

    jQueryのイベントハンドリングは、Webページ上の要素に対してユーザーが行った操作（クリック、キープレス、マウスオーバーなど）に応じて実行されるコードを登録するための機能です。jQueryを使うことで、イベントハンドリングを簡単かつ効率的に実装することができます。

    基本的なイベントのバインド

    click: 要素がクリックされたときのイベント。

    $("#element").click(function() {
  alert("クリックされました！");
});

    dblclick: 要素がダブルクリックされたときのイベント。

    $("#element").dblclick(function() {
  alert("ダブルクリックされました！");
});

    mouseenter: マウスが要素の上に乗ったときのイベント。

    $("#element").mouseenter(function() {
  alert("マウスが要素の上に来ました！");
});

    mouseleave: マウスが要素から離れたときのイベント。

    $("#element").mouseleave(function() {
  alert("マウスが要素から離れました！");
});

    mousedown: 要素上でマウスボタンが押されたときのイベント。

    $("#element").mousedown(function() {
  alert("マウスボタンが押されました！");
});

    mouseup: 要素上でマウスボタンが離されたときのイベント。

    $("#element").mouseup(function() {
  alert("マウスボタンが離されました！");
});

    touchstart: 要素に触れた瞬間に発火。

    $("#touchElement").on("touchstart", function() {
    alert("要素に触れました！");
});

    touchmove: 要素上での指の動きに対して発火。

    $("#touchElement").on("touchmove", function(event) {
    const touch = event.originalEvent.touches[0];
    const touchX = touch.pageX;
    const touchY = touch.pageY;
    console.log(`X座標: ${touchX}, Y座標: ${touchY}`);
});

    touchend: 要素から指が離れた瞬間に発火。

    $("#touchElement").on("touchend", function() {
    alert("要素から指が離れました！");
});

    keydown: キーが押されたときのイベント。

    $(document).keydown(function() {
  alert("キーが押されました！");
});

    keyup: キーが離されたときのイベント。

    $(document).keyup(function() {
  alert("キーが離されました！");
});

    keypress: キーが押されている間に繰り返し発生するイベント。

    $(document).keypress(function() {
  alert("キーが押されています！");
});

    submit: フォームが送信されるときのイベント。

    $("#myForm").submit(function() {
  alert("フォームが送信されました！");
});

    change: <input>, <textarea>, <select>などの要素の値が変更されたときのイベント。

    $("#myInput").change(function() {
  alert("値が変更されました！");
});

    focus: 要素にフォーカスが当たったときのイベント。

    $("#myInput").focus(function() {
  alert("フォーカスが当たりました！");
});

    blur: 要素からフォーカスが外れたときのイベント。

    $("#myInput").blur(function() {
  alert("フォーカスが外れました！");
});

    scroll: スクロールが発生した際のイベント。

    $(window).scroll(function() {
  alert("スクロールしました！");
});

    resize: ウィンドウや要素のサイズが変更されたときのイベント。

    $(window).resize(function() {
  alert("サイズが変更されました！");
});

    hover: mouseenter と mouseleave を合わせて使いやすくしたもの。

    $("#element").hover(
  function() {
    alert("マウスが要素の上に来ました！");
  },
  function() {
    alert("マウスが要素から離れました！");
  }
);

    toggle: クリックのたびに2つ以上の関数を交互に実行する。

    $("#button").toggle(
  function() {
    alert("1回目のクリック");
  },
  function() {
    alert("2回目のクリック");
  }
);

    on: イベントをバインド。

    $("#element").on("click", function() {
  alert("クリックされました！");
});

    off: バインドされたイベントを解除。

    $("#element").off("click");


    DOM操作

    要素の取得
    // 要素のテキストを取得
var text = $('#myDiv').text();

// 要素のHTMLを取得
var htmlContent = $('#myDiv').html();

    要素の追加・削除
    // 要素の最後に追加
$('#myDiv').append('
    新しい段落
    ');

// 要素の最初に追加
$('#myDiv').prepend('
    新しい段落
    ');

// 要素の削除
$('#myDiv').remove();

    属性の操作
    // 属性の取得
var value = $('#myInput').attr('value');

// 属性の設定
$('#myInput').attr('value', '新しい値');

// 属性の削除
$('#myInput').removeAttr('value');

    クラスの操作
    // クラスの追加
$('#myDiv').addClass('newClass');

// クラスの削除
$('#myDiv').removeClass('newClass');

// クラスの切り替え
$('#myDiv').toggleClass('active');

    フォーム要素の値の操作
    // 値の取得
var value = $('#myInput').val();

// 値の設定
$('#myInput').val('新しい値');

    イベントの処理
    // クリックイベントの処理
$('#myButton').click(function() {
    alert('ボタンがクリックされました！');
});

    これらは、jQueryを使用したDOM操作の基本的な方法です。jQueryには、これらの基本的な操作をさらに高度に行うための多数のメソッドが提供されており、それにより複雑なDOM操作を簡単に実現することができます。


    アニメーションとエフェクト

    もちろん、jQueryはアニメーションやエフェクトを手軽に実装するための多くのメソッドを提供しています。以下に、いくつかの代表的なメソッドとその使用例を示します。

    fadeIn() / fadeOut()

    要素をフェードイン（徐々に表示）またはフェードアウト（徐々に非表示）します。

    // フェードイン
$("#myDiv").fadeIn();

// フェードアウト
$("#myDiv").fadeOut();

    slideDown() / slideUp()

    要素を上から下へスライドして表示、または下から上へスライドして非表示にします。

    // スライドダウン
$("#myDiv").slideDown();

// スライドアップ
$("#myDiv").slideUp();

    slideToggle()

    slideDown() と slideUp() の動作を切り替えるメソッドです。

    $("#myDiv").slideToggle();

    animate()

    カスタムアニメーションを実装するためのメソッドです。このメソッドは、複数のCSSプロパティを同時にアニメーション化することができます。

    $("#myDiv").animate({
    opacity: 0.5,         // 透明度を50%に変更
    height: "toggle",    // 高さをトグルで変更
    left: "+=50"         // 左に50px移動
}, 1500);  // アニメーションの期間（ミリ秒）

    delay()

    アニメーションやエフェクトの間に一時停止を挟むことができます。

    $("#myDiv").slideUp().delay(1000).fadeIn();

    上記のコードでは、#myDivをスライドアップした後、1秒の遅延を挟んでからフェードインします。

    コールバック関数

    アニメーションが完了した後に実行したい処理をコールバックとして指定することができます。

    $("#myDiv").fadeOut(function() {
    alert("アニメーション完了！");
});


    ajax

    jQueryのajaxメソッドは非同期通信の実装を簡単にするための非常に強力なツールです。以下にjQueryのajaxに関する詳しい説明と例を示します。

    jQueryのajaxの基本

    jQuery.ajax()または単に$.ajax()は、非同期HTTPリクエストを行うためのメソッドです。

    $.ajax({
    url: "https://api.example.com/data",  // リクエスト先のURL
    type: "GET",                           // HTTPメソッド（GET, POST, PUT, DELETE など）
    dataType: "json",                      // 返されるデータの型
    success: function(data) {
        // リクエスト成功時の処理
        console.log(data);
    },
    error: function(xhr, status, error) {
        // リクエスト失敗時の処理
        console.error("エラー発生:", error);
    }
});

    他のHTTPメソッドのショートカット

    jQueryには上記の$.ajax()以外にも、特定のHTTPメソッドを用いるショートカットメソッドがあります。

    $.get(): GETリクエスト

    $.post(): POSTリクエスト

    $.getJSON(): JSONとして返されるデータを取得するGETリクエスト

    $.ajax()のオプション

    上記の基本的な使い方の他にも、$.ajax()は多くのオプションを提供しています。以下はその一部です。

    data: サーバーへ送信するデータ。オブジェクトまたは文字列。

    contentType: 送信するデータの内容の種類。

    beforeSend: リクエストが送信される前に呼び出されるコールバック関数。

    complete: リクエスト完了後に呼び出されるコールバック関数（成功/失敗に関係なく）。

    Promiseとしての使用

    $.ajax()はPromiseを返すため、.done(),.fail(),そして.always()といったメソッドを使用して非同期処理の結果を扱うことができます。

    $.ajax({
    url: "https://api.example.com/data",
    type: "GET",
    dataType: "json"
})
.done(function(data) {
    console.log(data);
})
.fail(function(xhr, status, error) {
    console.error("エラー発生:", error);
})
.always(function() {
    console.log("リクエストが完了しました。");
});

    プラグインの使用

    jQueryプラグインは、jQueryの機能を拡張するためのコードスニペットやライブラリのことを指します。これにより、特定の機能やアニメーションなどを簡単に実装することができます。jQueryプラグインを利用することで、簡単なコードだけで高度な機能を実現することができるため、多くの開発者に支持されています。

    プラグインのインストール

    多くのjQueryプラグインは、外部のJavaScriptファイルとして提供されています。これをHTMLにリンクすることで利用します。ただし、jQuery自体のスクリプトよりも後にリンクすることが重要です。

    <!-- jQueryライブラリ -->
<script src="path-to-jquery.js"></script>

<!-- jQueryプラグイン -->
<script src="path-to-plugin.js"></script>

    プラグインの初期化

    多くのプラグインは、特定のHTML要素に対して初期化を行う必要があります。これは通常、jQueryのセレクタを用いて行います。

    // 例: あるプラグインをID "element" の要素に適用
$("#element").pluginName();

    オプションと設定

    多くのプラグインには、動作をカスタマイズするためのオプションや設定が用意されています。

    $("#element").pluginName({
    option1: value1,
    option2: value2,
    // ...
});

    ケーススタディ:スライダープラグイン「slick」を使用する場合
    1. slickのCSSとJavaScript、およびjQuery本体をリンクします。
      2. <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
    2. HTML要素を用意します。
      3. <div class="your-class">
    <div>スライド1</div>
    <div>スライド2</div>
    <div>スライド3</div>
</div>
    3. slickを初期化します。
      4. $(document).ready(function(){
    $('.your-class').slick({
        setting-name: setting-value
        // その他の設定...
    });
});

    このように、jQueryプラグインを使用することで、複雑な機能やアニメーションを簡単にページに追加することができます。ただし、プラグインごとに設定や使い方が異なるため、公式のドキュメントやREADMEを参照しながら使用することが重要です。


    練習問題1.

    <button id="changeColor">色を変更</button>というボタンをクリックすると、<div id="colorBox">これは色が変わるボックスです。</div>という要素の背景色が赤に変わるようなjQueryのコードを書いてください。


    練習問題2.

    以下のリストがあります。

    <ul id="itemList">
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ul>

    リストの項目をクリックすると、その項目が削除されるようなjQueryのコードを書いてください。


    練習問題3.

    以下の入力フィールドがあります。

    <input type="text" id="inputBox">
<p id="liveText"></p>

    入力フィールドにテキストを入力すると、その内容が<p id="liveText"></p>の部分にリアルタイムで表示されるようなjQueryのコードを書いてください。