JavaScript Array.map() メソッド - すべての要素を変換

Array.map()を理解する

Array.map()はJavaScriptで最も頻繁に使用される配列メソッドの1つです。元の配列のすべての要素に提供された関数を呼び出して新しい配列を作成します。元の配列は変更されません。

構文

const newArray = array.map((element, index, array) => {
  // 変換された要素を返す
});

コールバックは3つの引数を受け取ります：

• element — 処理中の現在の要素
• index — 現在の要素のインデックス
• array — 元の配列（ほとんど使用されない）

基本例

// すべての数値を2倍にする
const nums = [1, 2, 3, 4];
const doubled = nums.map(n => n * 2);
// doubled: [2, 4, 6, 8]

// オブジェクトからプロパティを抽出
const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
];
const names = users.map(user => user.name);
// names: ["Alice", "Bob"]

Reactでのmap()

Reactでは、map()はコンポーネントのリストをレンダリングする標準的な方法です：

const items = ["Apple", "Banana", "Cherry"];
return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

map() vs forEach()

どちらもすべての要素を反復処理しますが：

• map()は変換された値の新しい配列を返します
• forEach()はundefinedを返し、副作用のみに使用されます

結果の配列が不要な場合は、代わりにforEach()を使用してください。

よくある落とし穴

1. returnの忘れ — 中括弧なしのアロー関数は自動的にreturnしますが、中括弧ありでは明示的なreturnが必要
2. 副作用にmapを使用 — 結果配列が不要ならforEachを使用
3. スパース配列 — map()はスパース配列の空スロットをスキップします