デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery.map( )配列などの要素を個別に処理して配列として返す

構文

配列の要素を個別に処理して配列として返す返値:配列
jQuery.map( array, function )ver1.0〜
引数に設定するfunctionは以下の引数を受け取ります
・第1引数:配列の要素
・第2引数:インデックス番号
objectオブジェクトのプロパティを個別に処理して配列として返す返値:配列
jQuery.map( object, function )ver1.6〜
引数に設定するfunctionは以下の引数を受け取ります
・第1引数:プロパティの値
・第2引数:プロパティ名

機能

jQuery.mapメソッドは第1引数に指定した配列の各要素を個別に第2引数のfunctionで処理します。またv1.6から第1引数にobjectオブジェクトを設定できるようになりました。objectオブジェクトを設定した場合でも配列を返すことに注意してください。第2引数のfunction内でnullを返すと、その要素を削除します。

jQuery.eachメソッドと似ていますが、jQuery.mapメソッドは処理した結果の配列を返す点が異なります。jQuery.eachメソッドは対象を変更せずにそのまま返します(各要素を個別に処理するだけです)。

jQuery.grepメソッドと似ていますが、jQuery.grepメソッドは要素を選別するだけで、要素の値を変更することはできません。またobjectオブジェクトにも利用できません。

解説

配列の要素を個別に処理して配列として返す

サンプル(map/01.html)を開いてbody内にbutton要素しかない確認して下さい。jQueryでは、まず以下の部分を確認してください。配列「myArray」が作成されています。

var myArray = ["john", "bob", "tom"];

続いて以下の部分を確認してください。buttonをクリックするとjQuery.mapメソッドを利用して、配列「myArray」をfunction「mapFunc」によって処理します。これにより得られた配列は変数「ansArray」に代入します。そしてjQuery.eachメソッドappendメソッドを利用して配列の内容をbody要素に表示するようにしました。

$("button").click(function(){
	var ansArray = $.map(myArray, mapFunc);
	$.each(ansArray, function (index, value){
		$("body").append(index + "番目の内容は" + value + "<br/>");
	});
});

jQuery.mapメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数を2つ(要素の値, インデックス番号)を受け取ります。この引数の順番は$.eachメソッドと逆なので、紛らわしいです...

これらの引数の値は{}内の処理で利用することができます。処理した要素をreturnで返すと新しく作成される配列の要素となります。このときnullを返すと、その要素は返す配列には含まれなくなります

jQuery.eachに設定するFunctionの構文(配列を処理する場合)
function 任意の名前(要素の値, インデックス番号){
 任意の処理(引数を利用可能)
 return 処理した要素の値 or null;
}

サンプルmap/01.htmlで利用したmapFuncは以下の様になっており、要素の先頭に「Mr.」を追加します。

function mapFunc(elem, index){
	return "Mr." + elem;
};

結果として、buttonをクリックすると「Mr.」が追加された要素が表示されます。第2引数のfunctionは無名関数にして直接設定することができます。→サンプル(map/01b.html

var ansArray = $.map(myArray, function (elem, index){
	return "Mr." + elem;
});

nullを返して要素を削除する

引数に設定するfunction内でnullを返すと、その要素は返される配列には含まれません。
サンプル(map/02.html)を開いて、ほとんどmap/01.htmlと同じ事を確認してください。異なるのはmapFuncの内容で以下の様に変更され、要素が「bob」の場合はnullを返すようにしました。

function mapFunc(elem, index){
	if (elem == "bob"){
		return null;
	}else{
		return "Mr." + elem;
	}
};

結果として、buttonをクリックするとmap/01.htmlからbobを抜かした結果となります。if elseの構文は三項演算子「?」を利用することで短く記述できます。→サンプル(map/02b.html

function mapFunc(elem, index){
	return elem == "bob" ? null : "Mr." + elem;
};

objectオブジェクトのプロパティを個別処理して配列にする

v1.6からjQuery.mapメソッドの第1引数にobjectオブジェクトを設定できるようになりました。しかし返される配列であることに注意してください。

サンプル(map/03.html)を開いてbody内にbutton要素しかない確認して下さい。jQueryでは、まず以下の部分を確認してください。objectオブジェクト「myObj」が作成され、3つのプロパティが設定されています。

var myObj = new Object();
myObj.apple = 100;
myObj.orange = 40;
myObj.banana = 10;

buttonをクリックする時の処理はほとんどmap/01.htmlと同じですが、jQuery.mapメソッドに設定されたmapFuncは以下の様に変更されています。引数で受け取ったプロパティ名「prop」を返しているだけです。

function mapFunc(value, prop){
	return prop;
};

結果として、buttonをクリックするとobjectオブジェクトからプロパティ名だけを抽出した配列が作成され、body内に表示されます。

尚、objectオブジェクトの場合はFunctionが受け取る引数が以下の様になり、配列とは異なります。
nullを返すと、その要素は返される配列には含まれなくなるのは配列と同じです。

jQuery.eachに設定するFunctionの構文(objectオブジェクトを処理する場合)
function 任意の名前(プロパティの値, プロパティ名){
 任意の処理(引数を利用可能)
 return 処理した要素の値 or null;
}

関連項目

配列やobjectオブジェクトではなく、html内の要素について処理したい場合はTraversingのmapメソッドを利用してください。

配列は選別するだけで、要素を変更する必要がない場合はgrepメソッドを利用してください。

配列を返して貰う必要がない場合(単純に配列内の各要素を処理したいだけの時)はjQuery.eachメソッドを利用してください。

メモ

objectオブジェクトも配列が返されることを確認

サンプル(map/test01.html)を開いて、map/03.htmlと似ていることを確認して下さい。異なるのは以下の部分だけで、返された配列の内容を確認するのではなく、処理される前の「myObj」と処理された後の「ansArray」に対してjQuery.typeメソッドを利用し、値の型を取得して表示するように変更しました。

$("button").click(function(){
	var ansArray = $.map(myObj, mapFunc);
	$("body").append("myObjの型は" + $.type(myObj) + "<br/>");
	$("body").append("ansArrayの型は" + $.type(ansArray) + "<br/>");
});

結果として、myObjは「array」、ansArrayは「object」と表示され、変化してしまっていることが確認できます。objectオブジェクトはobjectオブジェクトを返してくれれば良いのに、とも思うのですが...。

元のデータは変更しません

これまで確認してきたように変更したデータは返値として返しますが、元のデータは変更しません
サンプル(map/test02.html)を開いて、内容がほとんどmap/01.htmlと同じ事を確認して下さい。異なるのは配列内の要素をjQuery.eachメソッドで確認する部分です。以下のように確認する配列を「ansArray」ではなく、元のデータ「myArray」にしました。

$.each(myArray, function (index, value){
	$("body").append(index + "番目の内容は" + value + "
"); });

buttonをクリックして名前の前に「Mr.」が追加されていないことを確認して下さい。このサンプルから$.mapメソッドは元のデータは変更しないことが確認できます。

少し実用的なサンプル

$.mapメソッドはデータをフィルタリングできるので、特定のデータから任意の要素のみを取得するのに利用します。サンプル(map/test03.html)を開いてjQueryを確認してください。

まず以下の様な配列データ(各要素はobjectオブジェクト)が作成されています。

var myArray = [
	{name:"bob", sex:"male", age:18},
	{name:"meg", sex:"female", age:20},
	{name:"tom", sex:"male", age:22},
	{name:"beth", sex:"female", age:25},
	{name:"john", sex:"male", age:30}
];

そしてbuttonをクリックすると、以下の処理を行うようにしました。ポイントは2行目のif文で、要素のsexプロパティが「female」の場合だけreturnで要素をそのまま返し(3行目)、それ以外はnullを返す(5行目)の処理を行うようにしています。

var ansData = $.map(myArray, function(elem, index){
	if (elem.sex == "female") {
		return elem;
	}else{
		return null;
	}
});
alert(ansData.length);

結果として$.mapメソッドで情勢のデータだけが取得され、変数「ansData」に代入されます(1行目)。そして8行目で変数「ansData」の要素数をアラートで表示するようにしました。

女性データは「meg」と「beth」なので、アラートでは「2」と表示されます。もしデータを抽出する必要がない場合はjQuery.eachメソッドを利用してください。
→リファレンス:jQuery.eachメソッド「少し実用的なサンプル

このサンプルではフィルタリングするものの、要素を変更していません(3行目で引数のelemをそのまま返しています)。要素を変更する必要がない場合はgrepメソッドを利用した方が簡単に記述できます。
→リファレンス:jQuery.grepメソッド「データの抽出に便利かも