［2］メソッドチェーンとイベント処理

［2］メソッドチェーンとイベント処理

2012/05/15
山田 祥寛

出典：日経ソフトウエア　2011年11月号　pp.57-60
（記事は執筆時の情報に基づいており、現在では異なる場合があります）

連載目次へ >>

• 
  
• 
  
• 

ポイント4
繰り返し処理は不要

　jQueryオブジェクトでは繰り返し処理を意識する必要がありません。 $()関数は条件によっては複数の要素を返すことがあります。例えば、図2の例でも$()関数は複数の＜img＞要素を取り出しています。うれしいことに、jQueryオブジェクトはこれら要素のすべてに対して、「.」以降のメソッド部分の処理を実行してくれるのです。

　一般的なJavaScriptであれば、要素のセットから一つずつ要素を取り出し、処理していく必要があります。JavaScriptを理解している人であれば、まずはfor命令の利用を思い浮かべるでしょう。しかしjQueryではこのような手間をかける必要がありません。この性質もまた、jQueryがシンプルにコードを書ける理由となっています。

ポイント5
メソッドは連結して呼び出せる

　図3のリストに、ちょっとだけコードを追加してみましょう（リスト1）。これで、アイコン画像をリサイズするとともに、枠線で画像を囲みなさいという意味になります。このように、jQueryでは複数のメソッドをどんどん連結して書けます。この性質のことを、「メソッドチェーン」と呼びます。メソッドチェーンを利用することで、特定の要素に対する操作を$() 関数を何度も呼び出すことなく、なに（オブジェクト）を、こうして（メソッド1）、ああして（メソッド2）、そうする（メソッド3）…のように、自然に表現できます。

リスト1●メソッドチェーンを使用したコード（basic.htmlの修正）

[画像のクリックで拡大表示]

　例えば、リスト2はメソッドチェーンを活用した典型的な例です。findメソッドは「現在の要素の配下からセレクタに合致した要素を取り出す」というメソッドです。ここでは、このfindメソッドを利用して＜div id="#area"＞要素配下のtype1～3クラスを持つ要素を検索し、その背景色をそれぞれ黄色、水色、黄緑色に設定しています（図8）。

リスト2●メソッドチェーンを利用したコード（basic2.html）

[画像のクリックで拡大表示]

図8●それぞれの＜p＞要素にスタイルを設定

　ここで注目してほしいのは、find／cssメソッドで個々の子要素を処理した後、endメソッドを呼び出している点です。endメソッドは、「直前の、要素セットに影響を与える処理を取り消す」ためのメソッドで、この場合であれば直前に行ったfindメソッドの処理を打ち消します。これによって、次のfindメソッドは前のfindメソッドで見つかった要素セットを基点としてではなく、もともとの＜div id="area"＞要素を基点として検索を行うことができるのです（図9）。

図9●リスト2のfindとendメソッドの挙動

　このように、メソッドチェーンとendメソッドとを併用することで、複数の要素に対する処理をまとめて記述できるだけでなく、毎回、＜div id="area"＞要素を検索する必要がなくなるため、処理も効率化できます。

jQueryによるイベント処理

リスト3●jQueryによるイベント処理の例（basic3.html）

[画像のクリックで拡大表示]

図10●マウスポインタを当てると段落をハイライト表示

　JavaScriptでは、ユーザーがボタンをクリックした、メニューにマウスポインタが乗った／外れた、キーボードから文字を入力した──といった動作をきっかけに処理を行うことがほとんどです。そして、このきっかけのことを「イベント」と呼びます。

　 jQueryでは、こうしたイベント処理もカンタンに表現できます。例えば、リスト3は簡単なテキストハイライトの例で、マウスボタンを＜p＞要素の上に乗せると、該当する段落の背景色を黄色に変化させます（図10）

ポイント6
イベント処理は＜イベント名＞メソッドで定義

　jQueryでは、以下のような構文でイベントに対応する処理を登録できます。

$(セレクタ).イベント名(function() {
...イベントが発生した時に実行する処理...
});

　これで「＜イベント名＞が発生したときに、以降の処理を実行しなさい」という意味になるわけです。

リスト4●リスト3をbindメソッドで書き換えた例（basic3.html）

[画像のクリックで拡大表示]

　例えばリスト4であれば、mouseover、mouseoutメソッドでマウスが段落の上に乗ったとき、外れたときの処理を決めています。そのほかにも、click（クリック時）、keypress（キーの押下時）、submit（フォーム送信時）、focus（フォーカスが移動した時）のようなイベント名を指定できます。

　イベント処理の中では、「$(this)」でイベント発生元の要素（ここでは＜img＞要素）にアクセスできる点にも注目です。素のJavaScriptに慣れている人は、this.css(...)のように書いてしまいそうですが、thisそのままではjQueryのメソッドにはアクセスできません。

ポイント7
イベントに関するメソッドは満載

　jQueryでは、イベント関連のメソッドとして、＜イベント名＞メソッドのほかにも、さまざまなイベント系メソッドを公開しています。その中でも、特に知っておきたい代表的なものをいくつか補足しておきます。

　まずは、bindメソッドです。これは汎用的なイベントメソッドで、＜イベント名＞メソッドで対応していないイベントの処理を登録したい場合に利用します。たとえば、先ほどのリスト3をbindメソッドを使って書き換えると、リスト4のようになります＊5。要は、＜メソッド名＞メソッドとはbindメソッドの省略形であったわけです。

リスト5●リスト4をhoverメソッドで書き換えた例（basic3.html）

[画像のクリックで拡大表示]

　もうひとつ、hoverメソッドはmouseover、mouseoutイベントをまとめて登録するためのメソッドです。mouseover、mouseoutメソッドはその性質上、合わせて利用することが多いので、利用する機会はかなり多いでしょう。なお、リスト5は、リスト4をhoverメソッドで書き換えたものです。

jQueryオブジェクトの生成方法は他にもある

　 jQueryオブジェクトは、既存のドキュメントからセレクタによって抽出するほか、リストAのような方法でも生成できます。特に前者の記法は、動的に生成したコンテンツをドキュメントツリーに追加する場合によく使用しますので、覚えておくとよいでしょう。

リストA●jQueryオブジェクトを生成する2つの方法