jQueryの利用

マンガで分かる JavaScriptプログラミング講座

マンガで分かる JavaScriptプログラミング講座 第2版



第3部 Webページのプログラミング
第22話:jQueryの利用

目次



マンガ




















マンガ台詞

【1Page】
ナビ:2学期が終わり 冬休みが終わり 3学期になった
先生:冬休みは どうだったか?
遊:ばっちり宿題は サボったわ
先生:まあ そうだろうと 思っていた
    さて 3学期は 新しいことを するぞ
    JavaScript プログラミング の応用編だ
遊:ふふふ プログラムをマスターした私に 敵はいないわ!
【2Page】
守:遊ちゃん それは言い すぎだよ
先生:いや 実際 お前たち3人は 非常に上達した
    これから 教えることも 難なくこなせる だろう
    というわけで 今日教えるのは 『jQuery』だ
3人:jQuery?
先生:楽をする ための道具だ
遊:手抜きは 大好きよ
先生:『jQuery』を利用すれば Webページを簡単に 操作できる
    というわけで ページにエフェクトを 加えてみるぞ
【3Page】
        <html>
            <head>
                <script
                    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
                    type="text/javascript"
                ></script>
                <script type="text/javascript">
                <!--
                function anim() {
                    // 『jQuery』の代表的な処理1『アニメーション』
                    $("#target").fadeOut();    // id『target』の要素をフェードアウト
                    $("#target").fadeIn();    // id『target』の要素をフェードイン
                }
                // -->
                </script>
            </head>
            <body>
                <input type="button" onClick="anim();" value="アニメ">
                <div id="target">目標の<br>文字列</div>
            </body>
        </html>
            アニメ
                目標の
                文字列
                フェード アウト
            アニメ
                目標の
                文字列
                フェード イン
先生:どうだ 簡単だろう?
    もう一例 オブジェクトの中身を 書き換えてみるぞ
【4Page】
        <html>
            <head>
                <script
                    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
                    type="text/javascript"
                ></script>
                <script type="text/javascript">
                <!--
                function change() {
                    // 『jQuery』の代表的な処理2『要素の書き換え』
                    $(".targets").html("変更!");    // クラス『targets』の要素の
                                                    // 内部HTMLを『変更!』と書き換え
                }
                // -->
                </script>
            </head>
            <body>
                <input type="button" onClick="change();" value="変更">
                <div>変更しない文字列</div>
                <div class="targets">変更する文字列</div>
                <div class="targets">変更する文字列</div>
                <div>変更しない文字列</div>
            </body>
        </html>
            変更
                変更しない文字列
                変更する文字列
                変更する文字列
                変更しない文字列
            変更
                変更しない文字列
                変更!
                変更!
                変更しない文字列
先生:少し説明しておく
    まずは『jQuery』 の読み込みだ
    『jQuery』は Googleのサーバー から利用できる
            ※開発元は別
            Googleの『AJAX Libraries API』のURL
            http://ajax.googleapis.com/ajax/
            libs/jquery/1.4/jquery.min.js
【5Page】
先生:次は『jQuery』 独特の書き方だ
        $("#target").fadeOut();
        $(".targets").html("変更!");
遊:そうそう そこが私も 分からないのよ
先生:『jQuery』では スタイルシート と同じように 『セレクタ』で 処理の対象を選ぶ
    『$(〜)』の部分に セレクタを書き その後に続けて メソッドを書く
        セレクタ例
            $("div")
            $("#target")
            $(".targets")
        メソッド例
            fadeOut()
            fadeIn()
            html()
遊:ふーん それって 便利なの?
先生:便利だよ
    コードを比べれば 分かる
    先ほどの処理を 『jQuery』なしで 書いてみるぞ
【6Page】
        <html>
            <head>
                <script type="text/javascript">
                <!--
                function change() {
                    var eles = getElementsByClassName("targets");
                    for (var i = 0; i < eles.length; i ++) {
                        eles[i].innerHTML = "変更!";
                    }
                }
                function getElementsByClassName(className){
                    var eleRes = [];
                    var eleAll = 
                        /*@cc_on (document.all) ? document.all : @*/
                        ((typeof(context) != 'undefined') ? context : document)
                        .getElementsByTagName("*");

                    for (var i = 0; i < eleAll.length; i ++) {
                        var ele = eleAll.item(i);
                        if (ele.className == className){
                            eleRes.push(ele);
                        }
                    }
                    return eleRes;
                }
                // -->
                </script>
            </head>
            <body>
                <input type="button" onClick="change();" value="変更">
                <div>変更しない文字列</div>
                <div class="targets">変更する文字列</div>
                <div class="targets">変更する文字列</div>
                <div>変更しない文字列</div>
            </body>
        </html>
【7Page】
遊:えっ えらく 長くなったわね
先生:『jQuery』の便利さが 分かっただろう
    あと 『jQuery』には もう1つ便利な点がある
    それは 多数の 『プラグイン』が 公開されている ことだ
遊:プラグイン?
先生:『jQuery』を 拡張する部品だ
    『jQuery』を 使ったページに 『プラグイン』を 導入してみるぞ
【8Page】
        <html>
            <head>
                <script
                    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
                    type="text/javascript"
                ></script>
                <script src="jquery.colblink.js" type="text/javascript"></script>
                <script type="text/javascript">
                <!--
                    // 『$(document).ready(関数)』で
                    // 『document』の準備が整えば処理を開始
                    $(document).ready(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』 が『プラグイン』だ
    文字の色を変えながら 点滅してくれる
    自分でプログラムを 書かなくても こういったことが 簡単に出来てしまう
【9Page】
先生:どうだ 便利だろう
遊:人が書いたのを そのまま利用する だけとは!
    なんて素敵なの!
遊:これは 実生活にも 導入しなければ!
    というわけで 数学のテストに使える 『プラグイン』をちょうだい
先生:テスト勉強は 自分でやれよ…



説明

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

『jQuery』では、『セレクタ』で処理対象の要素を選択します(『セレクタ』は、スタイルシートで出てきた要素指定方法です)。そして、要素を書き換えたり、追加、削除をしたりします。

また、イベントやエフェクト、アニメーションを簡単に追加できます。さらに、『Ajax』と呼ばれる通信処理を手軽に行えます(通信処理は、次の回で説明します)。

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

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



『jQuery』の読み込み

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

『jQuery』の外部JavaScriptファイルは、『jQuery』の公式サイトから最新版をダウンロードして利用しても構いません。また、Googleのサーバーから読み込んでも構いません。

 『jQuery』の公式サイト
 http://jquery.com/

以下、いくつかの読み込み方を書いておきます。

『jQuery』のファイルをダウンロードして利用
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
Googleの『AJAX Libraries API』を利用
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
    type="text/javascript"
></script>
Googleの『Google AJAX API 』を利用して、『load』メソッドで『jQuery』を読み込み
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script>
google.load("jquery", "1.4");
</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();
.get()『jQuery』オブジェクトを、DOM要素の配列にして返すelements = $("div").get();
alert(elements[0].innerHTML);
.get(n)『jQuery』オブジェクトから、n番目のDOM要素を取得するelement = $("div").get(0);
alert(element.innerHTML);
.size()『jQuery』オブジェクトの要素数を返すsize = $("div").size();
.each(関数)全ての要素に関数の処理を行う
(関数内の『$(this)』は処理対象の『jQuery』オブジェクト)
$("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")
.filter(関数)要素の集合を関数の戻り値trueで絞り込む$("div").filter(
  function(){
    return ($(this).text() != "");
  }
)
.css(s)要素のstyleの『s』の値を取得s = $("div").css("color");
.css(s, s2)要素のstyleの『s』の値を『s2』にする$("div").css("color", "red");
$(document).ready(関数);DOMが操作可能になれば関数を実行$(document).ready(
  function(){
    alert("初期化");
  }
);
.click(関数)クリック時の動作を設定
(各イベントに同様のメソッドあり)
$("div").click(
  function(){
    alert($(this).html());
  }
);
.show()要素を表示$("div").show();
.hide()要素を隠す$("div").hide();
.toggle()要素の表示・非表示を切り替え$("div").toggle();

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


参考:jQuery日本語リファレンス
参考:jQuery逆引きリファレンス

操作対象

要素を操作するメソッドは、対象が複数ある場合は、全ての要素が操作対象になります。

<html>
    <head>
        <script
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
            type="text/javascript"
        ></script>
        <script type="text/javascript">
        <!--
        function check() {
            alert($(".targets").text());    // 文字列を表示
            $(".targets").html("全て書き換え");    // 全てのHTMLを書き換え
        }
        // -->
        </script>
    </head>
    <body>
        <input type="button" onClick="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つのメソッドを紹介しています。

<html>
    <head>
        <script
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
            type="text/javascript"
        ></script>
        <script type="text/javascript">
        <!--
        function anim() {
            // 『jQuery』の代表的な処理1『アニメーション』
            $("#target").fadeOut();    // id『target』の要素をフェードアウト
            $("#target").fadeIn();    // id『target』の要素をフェードイン
        }
        // -->
        </script>
    </head>
    <body>
        <input type="button" onClick="anim();" value="アニメ">
        <div id="target">目標の<br>文字列</div>
    </body>
</html>

ブラウザでHTMLファイルを開くと、画面には、『アニメ』ボタンと『目標の文字列』という文字列が表示されます。この『アニメ』ボタンをクリックすると、『anim』関数が実行されます。そして、『id』が『target』の要素である『目標の文字列』がフェードアウトして、その後、フェードインします。

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

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

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

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

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

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

『アニメ』ボタンをクリックすると、アニメーションの進行とは無関係に、ブラウザのタイトルバーに『set:fade in』と表示されます。

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

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

『jQuery』の代表的な処理の2つ目は、『要素の書き換え』です。『jQuery』では、DOMで要素を扱うよりも簡単に、Webページの要素を書き換えたり、削除、追加したりすることができます。

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

それだけではなく、『$(".targets").html("変更!");』とすることで、クラスが『targets』の複数の要素を、全てまとめて書き換えるといったことが行えるようになっています。

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

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

<html>
    <head>
        <script
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
            type="text/javascript"
        ></script>
        <script type="text/javascript">
        <!--
        function change() {
            // 『jQuery』の代表的な処理2『要素の書き換え』
            $(".targets").html("変更!");    // クラス『targets』の要素の
                                            // 内部HTMLを『変更!』と書き換え
        }
        // -->
        </script>
    </head>
    <body>
        <input type="button" onClick="change();" value="変更">
        <div>変更しない文字列</div>
        <div class="targets">変更する文字列</div>
        <div class="targets">変更する文字列</div>
        <div>変更しない文字列</div>
    </body>
</html>

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

『変更』ボタンをクリックすることで、『change』関数が呼び出されて、『$(".targets").html("変更!");』が実行されます。

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



『プラグイン』

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

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


参考:Google検索 - jQuery プラグイン
参考:jQuery Plugins

実例

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

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

<html>
    <head>
        <script
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
            type="text/javascript"
        ></script>
        <script src="jquery.colblink.js" type="text/javascript"></script>
        <script type="text/javascript">
        <!--
            // 『$(document).ready(関数)』で
            // 『document』の準備が整えば処理を開始
            $(document).ready(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』として『http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js』を読み込んでいます。

この『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ファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

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

≫ 「マンガで分かる JavaScriptプログラミング講座」トップに戻る


『柳井政和』 の初心者向け講座

『柳井政和』 のサイト

マンガで分かる Java入門講座
Javaのオブジェクト指向を解説するサイトです。
Webページ100ページ以上、マンガ800ページ以上で
解説を行っています。


PuzzleAndGame.com
JavaScriptで作ったゲームが中心のサイト。
タワーディフェンス、リバーシ、パズルゲームなどを公開。
Webブラウザ、PCアプリ、Androidアプリとして動作。


クロクロ・ツールズ
全てJavaScriptで作られた、ブラウザから利用できる各種アプリケーションです。
HTML5に対応しているモダンブラウザから使えます。
ブックマークに入れるなどして、ご利用ください。


『柳井政和』 執筆の本

「顔貌売人 ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2017年8月7日、予約可能)。
プログラマーが探偵役のエンタメ・ミステリー第2弾。
最先端の情報犯罪に安藤と鹿敷堂が挑みます。


「裏切りのプログラム ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2016年8月27日発売、予約注文可能です)。
2016年の松本清張賞で、最終候補に残った小説です。
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美とともに、
IT業界で起きた事件の解決に挑みます。
プログラマーが探偵役のエンタメ・ミステリーです。


「マンガでわかるJavaScript」
本講座が書籍になりました。 本用に、より分かりやすく、読みやすく、再構成して書き直しました。
よければ、手にとっていただけると嬉しいです。
秀和システムより発売。


「プログラマのためのコードパズル〜JavaScriptで挑むコードゴルフとアルゴリズム」
コードゴルフやアルゴリズム問題、その解説、関連知識の紹介を行った本です。
プログラマーなら、楽しめる内容になっています。
技術評論社より発売。


「JavaScript 仕事の現場でサッと使える! デザイン教科書」
プログラミング初心者向けに、様々な利用例を元に、プログラムとJavaScriptを解説する本。
プログラム自体が初めての方にも、なるべく分かりやすいように書いています。
技術評論社より発売。


『柳井政和』 開発のWebアプリやソフトなど

PuzzleAndGame.com
全自動4コマ
全自動百科事典(オートペディア)
全自動似顔絵
新刊・新作カレンダー
EX リバーシ
全自動迷路
めもりーくりーなー
ラジオ・ブラウザ
PCソフト
マンガで分かる JavaScriptプログラミング講座
スクリーンセーバー「なう」
開発元:クロノス・クラウン




Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 - 弊社への連絡 -
までお願いします。