こんにちは、ライターのマサトです！
今回は、HTML要素や配列・オブジェクトに対して繰り返し処理を実行して配列を作成できる「map()」について学習をしていきましょう！
この記事では、
- 「map()」とは？
- HTML要素での「map()」の使い方
という基本的な内容から、
- 配列・オブジェクトでの「map()」の使い方
- 「map()」の活用
などの応用的な使い方に関しても解説していきます。この記事で、「map()」をしっかり学習して自分のスキルアップを目指しましょう！
「map()」とは？
それでは、「map()」について基本的な知識から学習を進めていきましょう！ 「map()」は、HTML要素や配列・オブジェクトなどに対して繰り返し処理を実行して新しい配列要素を返してくれるのが特徴です。ただし、2種類の使い方があるので混乱しないようにしましょう！
1つ目は、主にHTML要素などのjQueryオブジェクトを対象にする「.map()」メソッドとしての使い方です。
2つ目は、配列やオブジェクトに対して実行する「$.map()」メソッドとしての使い方になります。
それぞれの用途に応じて使い分ける必要があるので、本記事でその基本と応用についてしっかりと学習をしていきましょう！
HTML要素での「.map()」の使い方
この章では、HTML要素を対象にした「.map()」の基本的な使い方について見ていきましょう！一般的な構文から実際の繰り返し処理の方法について学んでいきます。
基本的な構文と書き方について
まずは、もっとも基本となる構文から見ていきましょう！「.map()」は主にHTML要素を対象に実行することで繰り返し処理を行うことができます。
jQueryオブジェクト(HTML要素).map(function(index, element) {
return 処理
})
「.map()」のなかで実行したい処理を記述した関数を設定することができます。引数に「index(インデックス番号)」と「element(HTML要素)」を取得できるので、複数の要素に対して繰り返し処理が実行できるわけです。
また、「return」を使うことで処理を行った結果を返すことができ、最終的に配列として取得できるのが大きな特徴と言えるでしょう。
HTML要素に対して繰り返し処理を行う方法
それでは、実際のプログラミング手法について見ていきましょう！ まずは、次のようなHTML要素があると考えて下さい。
<p>サンプルサンプル1</p> <p>サンプルサンプル2</p> <p>サンプルサンプル3</p>
単純なp要素が3つ並んでいますね。このp要素に対して「.map()」の繰り返し処理を使い、それぞれのテキストだけを抽出してみましょう！
次のサンプル例を見て下さい！
var result = $('p').map(function(index, element) {
return element.innerHTML;
});
console.log(result);
console.log(result[0]);
実行結果
["サンプルサンプル1", "サンプルサンプル2", "サンプルサンプル3"] サンプルサンプル1
この例では、p要素に対して「.map()」を使い繰り返し処理を実行しています。関数内の処理では「return」を使い、引数のelementで「innerHTML」プロパティを呼び出すことでテキスト文字を返しています。
このように「return」で返した値は、最終的に配列となって取得できているのが実行結果からも分かりますね！
配列・オブジェクトでの「map()」の使い方
この章では、配列やオブジェクトに対して利用できる「$.map()」の使い方について見ていきましょう！ 一般的な構文や実際のプログラミング手法について学んでいきます。
基本的な構文と書き方について
まずは、最も基本となる構文から見ていきましょう！ 基本的な機能は先ほどのHTML要素を扱う「.map()」と同じですが、配列・オブジェクトを扱う「$.map()」は指定方法が少し異なります。
次の構文例を見て下さい！
$.map(配列・オブジェクト, function(value, index) {
return 処理
})
対象となる配列やオブジェクトを第1引数に指定することに注目してください！ さらに、関数の引数には「value(値)」「index(インデックス番号)」を取得できますが、indexが第2引数である点に注意しましょう。（前章の「.map()」では第1引数がindexでした）
「return」を使うことで処理した結果を返すことができ、最終的に配列として取得できる点は同じです。
配列要素に対して繰り返し処理を行う方法
実際に、配列を使って「$.map()」による繰り返し処理をしてみましょう！ そこで、次のような配列を用意します。
var array = ['リンゴ', 'バナナ', 'イチゴ', 'メロン'];
この配列に対して、各要素に任意の文字列を追加して新しい配列を取得してみましょう！
次のサンプル例を見て下さい。
var result = $.map(array, function(value, index) {
return value + 'です';
});
console.log(result);
実行結果
["リンゴです", "バナナです", "イチゴです", "メロンです"]
この例では、配列に対して「$.map()」による繰り返し処理を実行しています。関数内では、引数の「value」を使い「です」という文字列を追加しているのが分かりますね。これをreturnすることで、実行結果のように新規の配列を取得することができるわけです。
オブジェクトを繰り返し処理する方法
今度は、オブジェクトに対して「$.map()」を実行してみましょう！そこで、次のようなオブジェクトを用意します。
var obj = {
name: '太郎',
age: 30,
area: 'Tokyo'
};
「name / age / area」という3種類だけのデータが格納された単純なオブジェクトです。このオブジェクトに対して、それぞれの「値」を抜き出してみましょう！
var result = $.map(obj, function(value, index) {
return value;
});
console.log(result);
実行結果
["太郎", 30, "Tokyo"]
基本的な使い方は配列の時と同じで、オブジェクトを第1引数に指定して関数内に処理を記述します。関数内では単純に「value」をreturnしているだけなので、オブジェクトの「値」だけが返されます。
最終的に実行結果のように値だけが抽出された配列を取得することができます。オブジェクトの場合は、配列に変換されるという点に注意しておきましょう！
「map()」の活用
この章では、「map()」を活用したプログラミング手法について見ていきましょう！主に、「null」を使った条件分岐の方法と「each()」との使い分けについて学んでいきます。
nullを使って条件分岐する方法
まずは、「null」を活用した条件分岐の方法について見ていきましょう！「null」というのは値が空っぽという意味を持っているのですが、map()のreturnに利用すると処理をパスするという意味にもなるのです。
これがどういう意味なのか、簡単な配列を使って確認してみましょう！ 次のサンプル例を見て下さい！
var array = ['リンゴ', 'バナナ', 'イチゴ', 'メロン'];
var result = $.map(array, function(value, index) {
if(value === 'イチゴ') {
return null;
} else {
return value;
}
});
console.log(result);
実行結果
["リンゴ", "バナナ", "メロン"]
「$.map」の関数内の記述に注目してください！ IF文を使って「value === ‘イチゴ’」という条件式にすることで、配列内に「イチゴ」という値があれば真の処理を実行することになります。
その「真の処理」というのが「return null」です！ このように記述することで、配列内に「イチゴ」という値があれば処理をパスするという意味になります。
つまり、実行結果のように「イチゴ」以外の値を抜き出して配列化しているわけです。
「each()」との違いについて
次に、「map()」の類似メソッドである「each()」の違いと使い分けについて見ていきましょう！ もっとも分かりやすい大きな違いとしては、新規に配列を作成するかどうか？という点になります。
次のサンプル例を見て下さい！
var array = ['太郎', '花子', '佐藤', '田中'];
var result1 = $.map(array, function(value, index) {
return value + 'さん';
});
var result2 = $.each(array, function(index, value) {
return value + 'さん';
})
console.log(result1);
console.log(result2);
実行結果
["太郎さん", "花子さん", "佐藤さん", "田中さん"] ["太郎", "花子", "佐藤", "田中"]
この例では、同じ配列を使って「map()」「each()」それぞれの繰り返し処理を実行しています。処理内容としては、各配列の値に「さん」という文字列を追加しているだけですが実行結果を見て下さい！
「map()」は新規に配列を作成するのでそれぞれの値に「さん」が付与されているのが分かります。しかし、「each()」の場合は元の配列のままですね。
つまり、新規に配列を作るのではなく元の配列を使ってさまざまな操作をする用途に向いているというわけです！
まとめ
今回は、繰り返し処理を実行して新規に配列を作成できる「map()」について学習をしました！ 最後に、もう一度ポイントをおさらいしておきましょう！
- 「.map()」はHTML要素に続けて実行することで繰り返し処理を実行できる
- 「$.map()」は配列・オブジェクトを第1引数に指定することで繰り返し処理を実行できる
- 「null」を使うと繰り返し処理をパスする条件分岐が可能になる
- 類似メソッドの「each()」との違いは新規に配列を作れるかどうか
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
