✅ mapとは

JavaScriptの配列には map() という便利なメソッドがあります。

mapは、「配列の要素を1つずつ変換して、新しい配列を作る」ために使われます。

実務シーンではすごく頻繁に使われるので、練習しておきましょう。

✅ 基本構文

const newArray = oldArray.map((value, index) => {
  // returnする値が新しい配列に入る
});

• value: 現在の要素
• index: 現在のインデックス（使わない場合は省略可）
• returnされた値が、新しい配列の各要素として使われる

✅ mapの特徴

• 元の配列を変更しない（イミュータブル）
• 新しい配列が返ってくる
• 変換処理が簡潔に書ける

✅ 練習

コピペではなく実際に打ち込んで練習してみましょう。

数字を2倍にする

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

各名前を「さん」付けにする

const names = ["Taro", "Hanako", "Jiro"];
const withSan = names.map(name => `${name}さん`);
console.log(withSan);
// ["Taroさん", "Hanakoさん", "Jiroさん"]

オブジェクト配列から特定のプロパティだけ取り出す

const users = [
  { name: "Alice", age: 24 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 28 }
];

const names = users.map(user => user.name);
console.log(names);
// ["Alice", "Bob", "Charlie"]

indexを使って変換する

const colors = ["red", "green", "blue"];
const numberedColors = colors.map((color, index) => `${index + 1}: ${color}`);
console.log(numberedColors);
// ["1: red", "2: green", "3: blue"]

✅ まとめ（map）

• map() は配列の要素を変換して新しい配列を作るためのメソッド
• 元の配列は変更されない
• return した値が新しい配列になる
• アロー関数と基本的に一緒に使う