JavaScriptでは、配列処理としてmapメソッドが頻繁に使われています。
配列のすべての要素に対してさまざまな処理を行うことができ、非常に便利です。
しかし、できることが多彩であることから、慣れるまでに少し時間がかかるとも言われています。

そこで今回は、mapメソッドの基本的な使い方と、どのようなことができるのか解説していきます。

mapメソッドとは

mapメソッドとは、元となる配列から新しく配列を作るためのメソッドです。
配列のすべての要素に対して、与えられた関数を実行し、関数で返された値で新しい配列を生成します。

基本構文は以下です。

arr.map((value, index, array) => {
  実行したい処理
});

コールバック関数の引数には、値・インデックス・配列の最大3つの引数を記述することができます。
試しにそれぞれの引数のデータを取得してみましょう。

const arr = [1, 2, 3];

const mapValue = arr.map(value => {
  return value;
});
console.log(mapValue);
// [1, 2, 3]

const mapIndex = arr.map((value, index) => {
  return index;
});
console.log(mapIndex);
// [0, 1, 2]

const mapArray = arr.map((value, index, array) => {
  return array;
});
console.log(mapArray);
// [[1, 2, 3], [1, 2, 3], [1, 2, 3]]

それぞれの関数で取得したデータは以下です。

  • mapValue関数では、第1引数にvalueを記述し、配列の値を取得
  • mapIndex関数では、第2引数にindexを記述し、配列のインデックス番号を取得
  • mapArray関数では、第3引数にarrayを記述し、現在処理している配列を取得

このように最大3の引数を用いることで、さまざまな条件に応じた実装が可能になります。
上記では3つの引数を使用しましたが、第1引数のみ指定していれば問題ないため、必要に応じて使い分けるのが良いです。

以下は、配列の要素に2を掛けて新しい配列を生成した例です。

const arr = [1, 2, 3, 4, 5];

const mapArr = arr.map(value => {
  return value * 2;
});

console.log(arr);
// [1, 2, 3, 4, 5]

console.log(mapArr);
// [2, 4, 6, 8, 10]

この結果を観察すると、元の配列は変更されずに、新しい配列が返り値として渡っていることが分かります。
引数となる関数が、元の配列要素に処理を加え、新しい配列を作っているという仕組みです。

関数や他のメソッドを用いて、配列要素をあらゆる形に変換することが可能ということになります。

要素の文字の長さに変換

以下は、各要素をその長さに変換しています。

const arr = ['morning', 'afternoon', 'evening'];
const mapArr = arr.map(value => value.length);

console.log(mapArr);
// [7, 9, 7]

value.lengthによって、各要素の文字の長さを取得し、新しい配列が作られます。

文字列を大文字に変換

以下は、文字列を大文字に変換した例です。

const cities = ['tokyo', 'hokkaido', 'okinawa'];
const mapCity = cities.map(city => city.toUpperCase());

console.log(mapCity);
// ['TOKYO', 'HOKKAIDO', 'OKINAWA']

toUpperCase()は、文字列を大文字に変換するメソッドです。
mapメソッドを同時に使うことで、各要素の文字列が大文字に変換され、新しい配列として返されます。

配列からオブジェクトの配列に変換

以下は、単純な配列からオブジェクトの配列に変換した例です。

const arr = [10, 20, 30];
const obj = arr.map(key => ({ id: key }));

console.log(obj);
// [{id: 10},
//  {id: 20},
//  {id: 30}]

key => ({ id: key })に注目すると、中括弧がさらに丸括弧で囲まれています。
アロー関数の都合上、丸括弧の記述がなければオブジェクトであると認められず、エラーとなるため注意が必要です。

オブジェクトの配列から配列に変換

上記では、配列からオブジェクトの配列を作りました。
ここでは反対に、オブジェクトの配列からプロパティの値だけ取り出した配列を作ってみます。
つまり、一番はじめのシンプルな配列の状態に戻す形です。

const objArr = [
  {id: 10},
  {id: 20},
  {id: 30}
];

const getKey = objArr.map(key => key.id);

console.log(getKey);
// [10, 20, 30]

key.idで、オブジェクトのプロパティにアクセスします。それをmapメソッドと掛け合わせることで、プロパティの値で配列を作ることができます。

2つの配列を合体させ、オブジェクトの配列に変換

さいごに、2つの配列を合体させ、オブジェクトの配列に変換してみます。

const scores = [70, 95, 80];
const subjects = ['Math', 'History', 'Music'];

const getScores = scores.map((score, i) => ({
  score: scores[i],
  subject: subjects[i]
}));

console.log(getScores);
// [{score: 70, subject: "Math"},
//  {score: 95, subject: "History"}, 
//  {score: 80, subject: "Music"}]

第2引数iを使って、2つの配列から要素をそれぞれ順番に取得し、オブジェクトに格納しています。最終的にはそのオブジェクトが配列に格納された状態で返されます。

お互いの配列は同じ要素数でなければいけないことに注意が必要ですが、複数の配列をまとめたい場合にもmapメソッドが役に立ちます。

まとめ

今回は新しい配列を作るmapメソッドについて解説しました。
mapメソッドはできることが多彩な分、メリットが掴みにくいとも言われていますが、まずは以下のポイントをおさえると理解に繋がりやすいです。

// ポイント
* mapメソッドは、配列のすべての要素に対して処理が実行される
* value, index, arrayの最大3つの引数を用いることができる
* 元の配列は残し、新しい配列を作る
* あらゆる処理を実行し、配列を変換させる

mapメソッドを扱えるようになると、効率的な配列操作の実感ができるようになります。これを機にmapメソッドの理解を深めていきましょう。

配列メソッドの関連記事

・配列メソッド -追加・削除・抜き取り・分割・結合
・配列メソッド -検索
・配列メソッド -並び替え
・配列メソッド -繰り返し
・配列メソッド -新しい配列（当記事）
・配列メソッド -forEach・map・filterの違い