第22話：jQueryの利用

第4部 ライブラリ

目次

マンガ

マンガ

マンガ

マンガ

マンガ

マンガ

マンガ

マンガ

マンガ

マンガ台詞

【1Page】
ナビ：2学期が終わり 冬休みが終わり 3学期になった
アイコン先生：冬休みは どうだったか？
アイコン遊：ばっちり宿題は サボったわ
アイコン先生：まあ そうだろうと 思っていた
    さて 3学期は 新しいことを するぞ
    JavaScript プログラミング の応用編だ
アイコン遊：ふふふ プログラムをマスターした私に 敵はいないわ！

【2Page】
アイコン守：遊ちゃん それは言い すぎだよ
アイコン先生：いや 実際 お前たち3人は 非常に上達した
    これから 教えることも 難なくこなせる だろう
    というわけで 今日教えるのは 『jQuery』だ
アイコンアイコンアイコン3人：jQuery？
アイコン先生：楽をする ための道具だ
アイコン遊：手抜きは 大好きよ
アイコン先生：『jQuery』を利用すれば Webページを簡単に 操作できる
    というわけで ページにエフェクトを 加えてみるぞ

【3Page】
        <!DOCTYPE html>
        <html lang="ja">
            <head>
                <meta charset="UTF-8">
                <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
                <script>
                // DOMの準備が整ったら実行する処理を登録
                $(function() {
                    // id『anim』の要素に、クリック時の処理を登録
                    $("#anim").click(function() {
                        // 『jQuery』の代表的な処理1『アニメーション』
                        $("#target").fadeOut(); // id『target』の要素をフェードアウト
                        $("#target").fadeIn();  // id『target』の要素をフェードイン
                    });
                });
                </script>
            </head>
            <body>
                <input type="button" id="anim" value="アニメ">
                <div id="target">目標の<br>文字列</div>
            </body>
        </html>
            アニメ
                目標の
                文字列
                フェード アウト
            アニメ
                目標の
                文字列
                フェード イン
アイコン先生：どうだ 簡単だろう？
    もう一例 オブジェクトの中身を 書き換えてみるぞ

【4Page】
        <!DOCTYPE html>
        <html lang="ja">
            <head>
                <meta charset="UTF-8">
                <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
                <script>
                // DOMの準備が整ったら実行する処理を登録
                $(function() {
                    // id『change』の要素に、クリック時の処理を登録
                    $("#change").click(function() {
                        // 『jQuery』の代表的な処理2『要素の書き換え』
                        $(".targets").html("変更！");
                    });
                });
                </script>
            </head>
            <body>
                <input type="button" id="change" value="変更">
                <div>変更しない文字列</div>
                <div class="targets">変更する文字列</div>
                <div class="targets">変更する文字列</div>
                <div>変更しない文字列</div>
            </body>
        </html>
            変更
                変更しない文字列
                変更する文字列
                変更する文字列
                変更しない文字列
            変更
                変更しない文字列
                変更！
                変更！
                変更しない文字列
アイコン先生：少し説明しておく
    まずは『jQuery』の読み込みだ
    『jQuery』はサーバーから利用できる
            jQuery CDN
            https://code.jquery.com/
            jquery-3.2.1.min.js

【5Page】
アイコン先生：次は『jQuery』 独特の書き方を 説明する
        $("#anim").click(関数);
        $("#target").fadeOut();
        $(".targets").html("変更！");
アイコン遊：そうそう そこが私も 分からないのよ
アイコン先生：『jQuery』では スタイルシート と同じように 『セレクタ』で 処理の対象を選ぶ
    『$(～)』の部分に セレクタを書き その後に続けて メソッドを書く
        セレクタ例
            $("div")
            $("#target")
            $(".targets")
        メソッド例
            fadeOut()
            fadeIn()
            html()
アイコン遊：ふーん それって 便利なの？
アイコン先生：便利だよ 簡潔に書けるからな

【6Page】
アイコン先生：『jQuery』でDOMを操作するには
    Webページ内でDOMの準備が
    できてから行なう必要がある
    そうした解決は この部分で 行なってくれる
        // DOMの準備が整ったら実行する
        // 処理を関数で登録
        $(function() {
            // ここにDOMの準備が整ったら
            // 実行する処理を書く
        });
アイコン先生：あと 『jQuery』には もう1つ便利な点がある
    それは 多数の 『プラグイン』が 公開されている ことだ
アイコン遊：プラグイン？
アイコン先生：『jQuery』を 拡張する部品だ
    『jQuery』を 使ったページに 『プラグイン』を 導入してみるぞ

【7Page】
        <!DOCTYPE html>
        <html lang="ja">
            <head>
                <meta charset="UTF-8">
                <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
                <script src="jquery.colblink.js"></script>
                <script>
                // DOMの準備が整ったら実行する処理を登録
                $(function() {
                    // 『colblink()』は、『jquery.colblink.js』で拡張したメソッド
                    $("#target1").colblink();   // id『target1』の要素を色付き点滅
                    $("#target3").colblink();   // id『target3』の要素を色付き点滅
                });
                </script>
            </head>
            <body>
                <div id="target1">目標1</div>
                <div id="target2">目標2</div>     この2つの要素が色付き点滅する
                <div id="target3">目標3</div>
            </body>
        </html>
        『目標1』（色付き点滅）
        『目標2』
        『目標3』（色付き点滅）
    『jquery.colblink.js』 が『プラグイン』だ
    文字の色を変えながら 点滅してくれる
    自分でプログラムを 書かなくても こういったことが 簡単に出来てしまう

【8Page】
アイコン先生：どうだ 便利だろう
アイコン遊：人が書いたのを そのまま利用する だけとは！
    なんて素敵なの！
アイコン遊：これは 実生活にも 導入しなければ！
    というわけで 数学のテストに使える 『プラグイン』をちょうだい
アイコン先生：テスト勉強は 自分でやれよ…

説明

JavScriptでは、様々な機能を実現する、数多くのライブラリが公開されています。『jQuery』は、そうしたライブラリの1つです。

この章では、『jQueryの利用』について学びます。『jQuery』は、Webページの操作を劇的に便利にする道具です。

『jQuery』では、『セレクタ』（スタイルシートで出てきた要素指定方法）で処理対象の要素を選択します。そして、要素を書き換えたり、追加、削除したりします。また、イベントやエフェクト、アニメーションも簡単に追加できます。さらに、『Ajax』と呼ばれる通信処理を手軽に行えます（通信処理は、次の回で説明します）。

それだけではなく『jQuery』には、様々な『プラグイン』があります。この『プラグイン』は、『jQuery』の動作を拡張するための道具です。

それでは以下、『jQuery』の使い方について、詳しく見ていきましょう。

『jQuery』の読み込み

『jQuery』をWebページに読み込むには、外部JavaScriptファイルの指定を行います。外部JavaScriptファイルの指定は、既に学習したとおり、『<script>』タグの『src』属性に、ファイルのパスやURLを指定することで行います。

『jQuery』の外部JavaScriptファイル指定は2つの方法があります。

  • 『jQuery』の公式サイトから最新版をダウンロードして利用して利用。
  • 『CDN』（content delivery network）を利用する。

『jQuery』のファイルをダウンロードして利用

最初の方法は、『jQuery』の公式サイトから最新版をダウンロードして利用して利用する方法です。

上記のサイトから、最新版をダウンロードして、HTMLファイルから読み込みます。

<script src="jquery-3.2.1.min.js"></script>

『CDN』（content delivery network）を利用

次の方法は、『CDN』（content delivery network）を利用する方法です。世の中でよく使われているライブラリは、自由に自分のサイトで読み込んでよいように、大手のサーバーで配布されていたりします。そうした配布網のことを『CDN』と呼びます。

それでは、以下、『jQuery CDN』を利用して、『jQuery』を読み込んでみます。

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

検索最大手のGoogleでも『CDN』を行なっており、『jQuery』も配布対象になっています。Googleのサーバーからは、ファイルを高速に読み込めるので、自分のサイトに『jQuery』を置くよりも、高速に読み込むことができます。また、他のサイトでも『CDN』のファイルは利用されているので、キャッシュが効いて（ネットワークの途中やローカルなどにファイルが保存されているため）高速に読み込むことができます。

それでは、以下、Googleの『Hosted Libraries』を利用して、『jQuery』を読み込んでみます。

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

『セレクタ』

『jQuery』のオブジェクトは、『jQuery』もしくは『$』と書きます。

『jQuery』では、『セレクタ』を利用して、操作対象の要素を選択できます。

$(".change")

この1行は、『jQuery』を利用して、『.change』で表される要素、つまりクラスが『change』の要素を選択したことを意味します。

これは、以下の1行と同じ意味を持ちます。『$』の方が短いので、一般的には『$』の方が利用されます。

jQuery(".change")

『セレクタ』の書き方は、『スタイルシート』の書式だけでなく、『jQuery』独自に拡張された書き方もあります。

例えば、以下のものは、偶数番目の要素、奇数番目の要素を表します。

$(".change:even")   // 偶数

$(".change:odd")    // 奇数

他にも、様々な『セレクタ』の指定の仕方があります。

『jQuery』のメソッド

『jQuery』には、多くのメソッドがあります。よく使うメソッドを、以下に示しておきます。

式 意味 使い方
$(セレクタ) 『セレクタ』に合致するDOM要素の集合を、
『jQuery』オブジェクトにして返す		 j = $("div");
j.fadeOut();
$(elements) DOM要素を『jQuery』オブジェクトにして返す j = $(document.getElementById("id"));
j.fadeOut();
[n] 『jQuery』オブジェクトから、n番目のDOM要素を取得 element = $("div")[0];
alert(element.innerHTML);
.length 『jQuery』オブジェクトの要素数を返す len = $("div").length;
.each(関数) 全ての要素に関数の処理を行う
（関数内の『this』は処理対象のDOM要素）		 $("div").each(function(){
    alert($(this).html());
});
.html() 要素のHTML文字列を取得 s = $("div").html();
.html(s) 要素にHTML文字列を設定 $("div").html(s);
.text() 要素の文字列部分を取得 s = $("div").text();
.text(s) 要素に文字列部分を設定 $("div").text(s);
.val() 要素の『value』の値を取得 s = $("div").val();
.val(s) 要素に『value』の値を設定 $("div").val(s);
.filter(セレクタ) 要素の集合を『セレクタ』で絞り込む $("div").filter(".cls")
.css(s) 要素のstyleの『s』の値を取得 s = $("div").css("color");
.css(s, s2) 要素のstyleの『s』の値を『s2』にする $("div").css("color", "red");
.css(obj) 要素のstyleにオブジェクトのキーと値を適用 $("div").css({color: "red",
fontSize: "2em"});
$(関数); DOMが操作可能になれば関数を実行
（『$(document).ready(関数);』の短縮版）		 $(function(){
    alert("開始");
});
.click(関数) クリック時の動作を設定
（各イベントに同様のメソッドあり）		 $("div").click(function(){
    alert($(this).html());
});
.click() クリックを実行
（各イベントに同様のメソッドあり）		 $("div").click();
.show() 要素を表示 $("div").show();
.hide() 要素を隠す $("div").hide();
.toggle() 要素の表示・非表示を切り替え $("div").toggle();

『jQuery』にはこれ以外にもたくさんのメソッドがあります。メソッドは、リファレンスとしてまとまったサイトがWeb上に多くありますので、参考にしてください。

参考

操作対象

要素を操作するメソッドは、対象が複数ある場合は、全ての要素が操作対象になります。以下、『jQuery』を利用した、一般的な書き方で、処理を書いてみます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
        // DOMの準備が整ったら実行する処理を登録
        $(function() {
            // id『check』の要素に、クリック時の処理を登録
            $("#check").click(function() {
                alert($(".targets").text());          // 文字列を表示
                $(".targets").html("全て書き換え");   // 全てのHTMLを書き換え
            });
        });
        </script>
    </head>
    <body>
        <input type="button" id="check" value="複数対象確認">
        <div class="targets">目標の<br>文字列1</div>
        <div class="targets">目標の<br>文字列2</div>
        <div class="targets">目標の<br>文字列3</div>
    </body>
</html>

【結果1 アラート】

目標の文字列1目標の文字列2目標の文字列3

【結果2 表示文字列】

全て書き換え
全て書き換え
全て書き換え

上記のプログラムは、クラスが『targets』の要素全ての内部文字列をアラート表示したあと、文字列を全て書き換えます。

『セレクタ』で選択したあと、メソッドを実行すると、選択した全ての要素に対して処理が実行されるのが確認できます。

マンガ中のプログラムの解説

『jQuery』の『セレクタ』とメソッドを学びましたので、マンガ中のソースを実例として解説を行います。

『jQuery』の代表的な処理1『アニメーション』

『jQuery』の特徴の1つとして、Webページに簡単にアニメーション処理を加えられるというものがあります。『jQuery』では、アニメーションを伴いながら、オブジェクトの表示や非表示、位置やサイズなどを変更できます。

そういった『アニメーションを伴う処理』を実現するメソッドの1つに『fadeOut()』（フェードアウト）、『fadeIn()』（フェードイン）があります。マンガ中では、最初の例として、この2つのメソッドを紹介しています。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
        // DOMの準備が整ったら実行する処理を登録
        $(function() {
            // id『anim』の要素に、クリック時の処理を登録
            $("#anim").click(function() {
                // 『jQuery』の代表的な処理1『アニメーション』
                $("#target").fadeOut();   // id『target』の要素をフェードアウト
                $("#target").fadeIn();    // id『target』の要素をフェードイン
            });
        });
        </script>
    </head>
    <body>
        <input type="button" id="anim" value="アニメ">
        <div id="target">目標の<br>文字列</div>
    </body>
</html>

ブラウザでHTMLファイルを開くと、画面には、『アニメ』ボタンと『目標の文字列』という文字列が表示されます。

『script』タグ内では、『$(function() {～}』として、DOMの準備が整ったあとの処理を登録しています。DOMの準備が整う前に『jQuery』でDOMの操作を行なおうとすると、まだDOMが準備されていないため、きちんと動作しません。そのために、準備が整ったあとに処理を行なう必要があります。

次に、『$("#anim").click(function() {～}』で、id『anim』をクリックした際の処理を登録しています。id『anim』の要素は、『アニメ』と書かれたボタンになります。

この『アニメ』ボタンをクリックすると、『anim』関数が実行されます。そして、『id』が『target』の要素である『目標の文字列』がフェードアウトして、その後、フェードインします。

『$("#target").fadeOut()』とすることで、セレクタで選択したid『target』の要素に、フェードアウト処理を加えて、『$("#target").fadeIn()』とすることで、同じようにフェードインさせています。

処理の流れ

先のプログラムで注目して欲しいのは、『fadeOut()』メソッドを使ったあとに『fadeIn()』メソッドを使っていることです。このように単純に処理を続けて書くだけで、『jQuery』ではフェードアウトのアニメーション処理を実行して、その終了後に、フェードインの処理を実行します。

この時、『fadeOut()』メソッドのアニメーションの終了を待って、『fadeIn()』メソッドの行が実行されるわけではないことに注意してください。『fadeOut()』メソッドが実行されたすぐあと、アニメーションが終わるよりも前に、『fadeIn()』メソッドが実行されます。

つまり、『jQuery』の、『fadeOut()』や『fadeIn()』といった『アニメーションを実行させるメソッド』は、『アニメーションを登録する』ためのメソッドだということです。そして、アニメーション自体は、アニメーションの登録後に自動で実行されます。

この処理の進行を確かめるためには、処理を以下のように書き換えてみてください。

$("#target").fadeOut(); //  フェードアウト
document.title = "set:fade out";
$("#target").fadeIn();  //  フェードイン
document.title = "set:fade in";

『アニメ』ボタンをクリックすると、アニメーションの進行とは無関係に、ブラウザのタイトルバーに『set:fade in』と表示されます。これは、『set:fade out』と表示されたあと、即時に『set:fade in』と書き換えられるためです。

このことから、『fadeOut()』や『fadeIn()』メソッドが、アニメーション処理を待たずに実行されるというのが確認できます。

『jQuery』の代表的な処理2『要素の書き換え』

『jQuery』の代表的な処理の2つ目は、『要素の書き換え』です。『jQuery』では、通常の方法よりも簡単に、Webページの要素を書き換えたり、削除、追加したりできます。

そういった要素の操作でもよく使うのは、内部HTML要素の書き換えです。DOMの操作では、『document.getElementById("target").innerHTML = "変更！";』と書いていた部分は、『jQuery』では『$("#target").html("変更！");』と短く書けます。

それだけではなく、『$(".targets").html("変更！");』とすることで、クラスが『targets』の要素を全て書き換えられます。

このように、『jQuery』を使えば、Webページの要素の操作を効率的に行えます。

それでは以下、マンガ中のソースコードを掲載して、解説を加えていきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
        // DOMの準備が整ったら実行する処理を登録
        $(function() {
            // id『change』の要素に、クリック時の処理を登録
            $("#change").click(function() {
                // 『jQuery』の代表的な処理2『要素の書き換え』
                $(".targets").html("変更！");
                    // クラス『targets』要素の内部HTMLを『変更！』と書き換え
            });
        });
        </script>
    </head>
    <body>
        <input type="button" id="change" value="変更">
        <div>変更しない文字列</div>
        <div class="targets">変更する文字列</div>
        <div class="targets">変更する文字列</div>
        <div>変更しない文字列</div>
    </body>
</html>

WebブラウザでこのHTMLファイルを読み込むと、画面には『変更』ボタンと、『変更しない文字列』『変更する文字列』という文字列が表示されます。

『変更』ボタンをクリックすると、『$(".targets").html("変更！");』が実行されます。

この行は、先ほど説明したとおり、『targets』クラスの要素全ての内部HTMLを『変更！』に書き換えるものです。上記のプログラムでは、『変更する文字列』と書いてある部分が『変更！』に書き換わります。

『プラグイン』

『jQuery』は、Webページ操作の枠組みを提供するだけではありません。この『jQuery』は、ユーザーが自由に拡張できます。この『拡張のための外部JavaScriptファイル』を『プラグイン』と呼びます。

これらはネットで検索すれば多数見つかりますので、目的の機能を探して利用してください。

参考

実例

マンガでは、『jquery.colblink.js』という『プラグイン』を利用しています。この『プラグイン』は、今回の説明用に作成した、非常にシンプルなものです。

この『プラグイン』を、Webページに導入して、利用する方法を、マンガのプログラムを元に解説します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="jquery.colblink.js"></script>
        <script>
        // DOMの準備が整ったら実行する処理を登録
        $(function() {
            // 『colblink()』は、『jquery.colblink.js』で拡張したメソッド
            $("#target1").colblink(); // id『target1』の要素を色付き点滅
            $("#target3").colblink(); // id『target3』の要素を色付き点滅
        });
        </script>
    </head>
    <body>
        <div id="target1">目標1</div>
        <div id="target2">目標2</div>
        <div id="target3">目標3</div>
    </body>
</html>

『jquery.colblink.js』という外部JavaScriptファイルが、『プラグイン』になります。この『jQuery』用の『プラグイン』は、『jQuery』本体を読み込んだあとに、読み込むようにしてください。

この『jquery.colblink.js』は、『jQuery』に『colblink』というメソッドを追加します。そこで、『セレクタ』のあとに『colblink』メソッドを使用して、選択した要素の色付き点滅を実行させています。

『メソッドチェーン』

『jQuery』のメソッドは、『自分自身』（jQueryオブジェクト）を返します。そのため、『メソッドチェーン』と呼ばれる書き方で、処理を繋げて書くことができます。

$(".targets").fadeOut().fadeIn();

上の1行では、『change』クラスの要素をフェードアウトさせた後、フェードインさせています。

この処理を分解して書けば、以下のようになります。

var j = $(".targets")  // this（jQueryオブジェクト）が返る
       ↓
var j2 = j.fadeOut(); // this（jQueryオブジェクト）が返る
       ↓
var j3 = j2.fadeIn(); // this（jQueryオブジェクト）が返る

『jQuery』に慣れてくると、多くのメソッドを繋げて書くようになります。

ブラウザ依存の解消

ブラウザには、Internet ExplorerやFirefox、Google Chrome、Operaなど、いくつかの種類があります。これらのブラウザは、少しずつ仕様が異なっており、JavaScriptを使う際に問題になることがあります。

『jQuery』では、これらの問題を避けることができます。『jQuery』は、ブラウザごとの細かな違いを、内部で処理して使用者から隠してくれます。

サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード （右クリックから保存してください）

『sample1.html』（フェード イン/アウト）を表示

『sample1b.html』（フェード イン/アウトのタイミングを確認）を表示

『sample2.html』（『jQuery』使用時のHTMLの書き換え）を表示

『sample2b.html』（『jQuery』非使用時のHTMLの書き換え）を表示

『sample3.html』（『プラグイン』の利用）を表示

『jquery.colblink.js』（『プラグイン』のサンプル）（右クリックから保存してください）

『sample4.html』（操作対象）を表示

『sample5.html』（『メソッド チェーン』）を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。