JavaScript Array map()

1. map() メソッド

map() メソッドは、配列のすべての要素に対して指定した関数を呼び出し、その実行結果から構成される新しい配列を作成します。

1.1 基本的な使用例：数値を2倍にする

const numbers = [1, 2, 3, 4];
// 各要素を2倍にした新しい配列を生成
const doubled = numbers.map(x => x * 2);

2. React における map()

React では、データの配列から要素のリストをレンダリング（描画）するために、map() メソッドが頻繁に利用されます。

2.1 リストレンダリングの実装例

const fruitlist = ['りんご', 'バナナ', 'チェリー'];

function MyList() {
  return (
    <ul>
      {fruitlist.map(fruit => 
        <li key={fruit}>{fruit}</li>
      )}
    </ul>
  );
}

       注意： React で map() を使用してリスト項目を作成する場合、各項目を識別するために一意（ユニーク）な key プロパティ を付与する必要があります。

3. オブジェクト配列での利用

map() は、オブジェクトを要素に持つ配列を処理する際にも非常に強力です。

3.1 ユーザーデータのリスト表示

const users = [
  { id: 1, name: 'ジョン', age: 30 },
  { id: 2, name: 'ジェーン', age: 25 },
  { id: 3, name: 'ボブ', age: 35 }
];

function UserList() {
  return (
    <ul>
      {users.map(user => 
        <li key={user.id}>
          {user.name} は {user.age} 歳です
        </li>
      )}
    </ul>
  );
}

4. map() メソッドの引数

map() メソッドのコールバック関数は、最大で 3 つの引数を受け取ることができます。

• currentValue：現在処理されている要素
• index（オプション）：現在処理されている要素のインデックス番号
• array（オプション）：map メソッドが呼び出された元の配列自体

4.1 すべての引数を使用した例

const fruitlist = ['りんご', 'バナナ', 'チェリー'];

function App() {
  return (
    <ul>
      {fruitlist.map((fruit, index, array) => {
        return (
          <li key={fruit}>
            名称: {fruit}, インデックス: {index}, 元の配列: {array.join(', ')}
          </li>
        );
      })}
    </ul>
  );
}

       重要なポイント：map() メソッドは常に新しい配列を返します。元の配列（オリジナル）を破壊的に変更することはないため、イミュータブル（不変性）を重視する React と非常に相性が良いメソッドです。