【JavaScript】map()入門: 配列の要素を順番に変換する方法｜forEach()との違いも徹底解説

「map()」は配列の要素に関数を適用して新しい配列を生成する便利なメソッドです。数値の変換や文字列の操作、オブジェクトのプロパティ抽出など、さまざまな用途に活用できます。特徴的な点は、元の配列を変更せず、新しい配列を返すことです。また、同じく配列要素に関数を適用する「forEach()」とは異なり、新しい配列を作成するため、変換したデータを保持することができます。適切に返り値を設定することで、効果的にデータ処理を行えます。

「map()」の基本的な使い方

「map()」とは？

map()は、配列の各要素に関数を適用し、その結果を要素として持つ新しい配列を生成するメソッドです。このメソッドを使うことで、配列の各要素を一括して操作することができます。

let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

コールバック関数とは？

map()メソッドの中で使用する関数を「コールバック関数」といいます。この関数は、map()メソッドが配列の各要素に対してどんな操作を行うかを指定するためのものです。コールバック関数は、3つの引数を取ることができます：現在の要素、現在の要素のインデックス、そして配列自体です。

let numbers = [10, 20, 30];
let detailed = numbers.map((num, index, array) => {
  return `要素${num}は、配列${array.toString()}の${index + 1}番目です。`;
});
console.log(detailed);
// ["要素10は、配列10,20,30の1番目です。", "要素20は、配列10,20,30の2番目です。", "要素30は、配列10,20,30の3番目です。"]

上記の例では、コールバック関数が各要素の情報（値、インデックス、配列全体）を使用して新しい配列の要素を生成しています。このように、map()メソッドのコールバック関数を理解することは、その機能を最大限に活用するための鍵となります。

「map()」の使用例4パターン

数値の配列を変換する

数字の配列を取り、それを2倍にする例です。

let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

文字列の配列を操作する

文字列の先頭を大文字に変換する例です。

let fruits = ["apple", "banana", "cherry"];
let capitalizedFruits = fruits.map(fruit => fruit.charAt(0).toUpperCase() + fruit.slice(1));
console.log(capitalizedFruits); // ["Apple", "Banana", "Cherry"]

オブジェクトの配列を操作する

オブジェクトの特定のプロパティだけを抽出する例です。

let users = [{id: 1, name: "Alice"}, {id: 2, name: "Bob"}];
let names = users.map(user => user.name);
console.log(names); // ["Alice", "Bob"]

2次元配列を変換する

2次元配列の各要素の合計を求める例です。

let matrix = [[1, 2], [3, 4], [5, 6]];
let sums = matrix.map(arr => arr[0] + arr[1]);
console.log(sums); // [3, 7, 11]

「map()」と「forEach()」

「forEach()」とは？

forEach()も配列の各要素に関数を適用するメソッドですが、新しい配列を返さず、元の配列の要素をその場で操作します。

let numbers = [1, 2, 3];
numbers.forEach((num, index) => numbers[index] = num * 2);
console.log(numbers); // [2, 4, 6]

「map()」と「forEach()」の違い

map()とforEach()は、JavaScriptでよく使われる配列のメソッドですが、それぞれ異なる目的と結果を持っています。

目的と返り値

• map(): 配列の各要素に関数を適用し、その結果を新しい配列として返します。

  ```javascript
  let numbers = [1, 2, 3];
  let doubled = numbers.map(num => num * 2);
  console.log(doubled); // [2, 4, 6]
  ```
  

• forEach(): 配列の各要素に関数を実行するだけで、特定の返り値を期待しない。返り値はundefinedです。

  let numbers = [1, 2, 3];
  numbers.forEach(num => console.log(num * 2));
  // 以下が出力される
  // 2
  // 4
  // 6
  

使用シーン

- `map()`: 元の配列を変更せずに、何らかの変換を適用した新しい配列が必要なとき。
- `forEach()`: 配列の各要素に何らかの操作を適用したいだけのとき。新しい配列を生成するわけではない。

簡単に言うと、新しい配列を生成する必要がある場合はmap()を、単に配列の各要素に何らかの操作を適用するだけの場合はforEach()を使うと良いでしょう。

「map()」を使用する際の注意点

返り値を確実に設定する

map()は新しい配列を生成しますが、関数内で返り値を指定しないと、新しい配列の要素はすべてundefinedになります。

let numbers = [1, 2, 3];
let result = numbers.map(num => { num * 2 }); // 不正な使用
console.log(result); // [undefined, undefined, undefined]

「map()」の使い方まとめ

• map()は配列の各要素に関数を適用し、新しい配列を生成する強力なツールです。
• 数値や文字列、オブジェクトの配列など、多様なデータに適用できます。
• 返り値を正しく設定することで、期待通りの結果を得ることができます。