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引数のみ指定していれば問題ないため、必要に応じて使い分けるのが良いです。

では、具体的なmapメソッドの使い方を見ていきましょう。

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

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

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

console.log(arr);
console.log(mapArr);

実行結果

//[1, 2, 3, 4, 5]
//[2, 4, 6, 8, 10]

javascript-map

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

このことから、mapは新しい配列を作るというのが特徴ですが、言い換えると、関数や他のメソッドを用いて、配列要素をあらゆる形に変換することが可能ということになります。

もう少し具体例を見ていきましょう。

要素の文字の長さに変換

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

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

console.log(mapArr);

実行結果

//[7, 9, 7]

javascript-map

引数に入れた「value」と「length」を繋げることで、各要素の文字の長さを取得し、新しい配列が作られます。

文字列を大文字に変換

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

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

console.log(mapCity);

実行結果

//['TOKYO', 'HOKKAIDO', 'OKINAWA']

javascript-map

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

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

つぎに、単純な配列からオブジェクトの配列に変換する方法を見てみましょう。

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

console.log(obj);

実行結果

//[{id: 10},
// {id: 20},
// {id: 30}]

javascript-map

「id」というプロパティ名と「key(元の配列要素)」という値を持ったオブジェクトを生成し、配列に入れて返します。

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

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

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

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

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

console.log(getKey);

実行結果

//[10, 20, 30]

javascript-map

「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"}]

javascript-map

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

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

まとめ

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

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

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

Javascript関連記事