初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
1章：jQuery入門
2章：jQuery基礎
3章：jQuery発展
番外編：研究

thisについて

イベントが発生した要素を指す

サンプル（02/02_01.html）を開いて下さい。このように大抵の場合、メニューのボタンは複数あります。body内のdiv要素にはメニューであることが分かるようにmenuとclassを付けています。jQuery部分は以下の様に前回のサンプル（02/01_03.html）のセレクタ部分を.menuに変更しただけです。クリックしてどの様になるか確認してください。どれか１つでもmenuクラスの付いたdiv領域をクリックすると、全てのmenuクラスの付いたdiv領域にCLICK!と表示されてしまいます。 

function clickFunc() {
	$(".menu").text("CLICK !");
}
$(function () {	
	$(".menu").click(clickFunc);			
});

これではメニューとして機能しません。そこで登場するのがthisです。thisはイベントで実行する処理内で利用されるとイベントが発生した要素を指します。サンプル（02/02_02.html）でクリックされたときに実行される処理「clickFunc」内のjQueryを確認してください。セレクタにthisが利用されています。このときthisは（ダブル）クォートで囲まないことに気を付けてください。 

function clickFunc() {
	$(this).text("CLICK !");
}
$(function () {	
	$(".menu").click(clickFunc);			
});

サンプル02/02_02.htmlではクリックした要素に対してだけCLICK!と表示されることから、セレクタに設定したthisがクリックされた要素を指していることが確認できます。

thisが指すもの
イベントが発生したときに実行する処理内で利用された場合、イベントが発生した要素を指す。利用する際はセレクタ内で（ダブル）クォートを付けないことに注意してください。

ちなみにサンプル（02/02_03.html）でthisの内容を確認するためアラートでthisを表示させています。アラートには[object HTMLDiVElement]と表示されdiv要素を指していることが確認できます。

メニューを識別する

コンテンツによってはクリックされた要素を特定するだけでは足りない場合があります。次はクリックされた要素が何かを識別する方法を紹介します。サンプル（02/02_04.html）のdiv要素にid（1〜5）が付けられているのを確認してください（idはclassと異なり識別子ですからページ内におなじidが存在してはいけません）。 

function clickFunc() {
	alert(this.id);
}

続いてjQueryを確認してください。注目するのは上記clickFunc内のアラートです。thisに.（ドット）を挟んでidを付けると、イベントが発生した要素のidを取得することができるのです。この手法は次に紹介するsplitと合わせてコンテンツ作成によく利用され、サンプルのページスライダー（未完成のためリンク無し）でも利用されています。覚えるようにしましょう。

splitを使いこなす

idは識別子（identifier）であるため、ページ内（document内）に同じものがあってはいけません。ですので、idの重複を避けるためサンプル02/02_04.htmlのように数字だけというシンプルな命名は避けます。複雑なコンテンツでは複数のメニューが存在し、それらが全て数字だけのidだと分かりにくくなってしまいます。そこで私はmenu_1等のように英名と数値を_でつなげて命名しています。

このidの命名法に合わせて、覚えておくと便利なテクニックを紹介します。それはjavascriptのsplitメソッドを利用して、id名から数値の部分を取得するテクニックです。splitメソッドは文字列を任意の文字列で分割し、配列に格納するメソッドですが、このサイトでは以下の様に文字列から、特定の部位の文字列を抽出することにしか利用しないので、以下の様な構文で覚えてしまってかまいません。

splitの構文
抽出文字列 = 文字列.split(分割文字列)[要素番号]
※要素番号は0から始まることに注意しましょう。

サンプル（02/02_05.html）のdiv要素に付けられたid名を確認してください。数字だけではなくmenu_1〜menu_5と付けられています。つづいてclickFunc内の処理を確認してください。以下の様にsplitを利用して数字部分だけを抽出し変数myIDに代入しています。 

function clickFunc() {
	var myID = this.id.split("_")[1];
	alert(myID);
}

上記の処理ではまずthis.idつまりmenu_1〜menu_5の文字列がsplitの対象となります。分割文字列が"_"であるためmenuの文字部分と数字部分に分割され配列に格納されます。そして要素番号が1と指定されているので、数値の部分だけが選択されその値が左辺のmyIDに代入されるのです。要素番号は0から始まることに注意してください。サンプルの場合は0番目の要素はmenuとなります。

これでメニューの多い複雑なコンテンツでも、分かりやすくメニューを管理することができます。これでthisについての説明は一旦終了です。次回以降イベントの説明を続けますが、説明をシンプルにするためthisは当面利用しません。次回はマウスオーバー時の演出に役立つhoverイベントを紹介します。