【JavaScript】配列メソッド map() を理解する

1. はじめに

JavaScript において配列操作は非常に重要だと思い、メモついでに記事を書くことにしました。

map()メソッドは、最も頻繁に使用され、かつ強力な配列操作メソッドの一つだと思います。単純なコードで簡単にデータ加工を実現できるmap()は、早い内に習得し、使いこなせるようにしておきたいですね！

map()は JavaScript の配列メソッドで、配列の各要素に対して指定された関数を呼び出し、その結果から新しい配列を生成します。元の配列は変更されず、新しい配列が返されるという特徴があります。

基本的な構文は次のとおり：

const 新しい配列 = 元の配列.map((currentValue) => 変換後の値);

また、以下の引数を受け取ることができる：

• 現在処理中の要素の値（必須）

• 現在処理中の要素のインデックス（省略可能）

• map が呼び出されている配列（省略可能）

2. 使い方

基本的な使い方

例 1：数値の配列を 2 倍にする

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((num) => num * 2);

console.log(doubled); // [2, 4, 6, 8, 10]
console.log(numbers); // [1, 2, 3, 4, 5] - 元の配列は変更されていない

例 2：オブジェクトの配列から特定のプロパティを抽出する

const users = [
  { id: 1, name: "佐藤", age: 28 },
  { id: 2, name: "鈴木", age: 34 },
  { id: 3, name: "田中", age: 22 },
];

const names = users.map((user) => user.name);

console.log(names); // ['佐藤', '鈴木', '田中']

高度な使い方

インデックスを活用する

const letters = ["a", "b", "c"];
const result = letters.map(
  (letter, index) => `${index + 1}：${letter.toUpperCase()}`
);

console.log(result); // ['1：A', '2：B', '3：C']

条件付きマッピング

const numbers = [1, 2, 3, 4, 5];
// 偶数は10倍、奇数はそのまま
const mapped = numbers.map((num) => (num % 2 === 0 ? num * 10 : num));

console.log(mapped); // [1, 20, 3, 40, 5]

他のメソッドとの組み合わせ

map()は他の配列メソッドと組み合わせると、便利に使える！

filter() との組み合わせ

const numbers = [1, 2, 3, 4, 5, 6];

// 偶数のみを取り出して2倍にする
const result = numbers
  .filter((num) => num % 2 === 0) // [2, 4, 6]
  .map((num) => num * 2); // [4, 8, 12]

console.log(result); // [4, 8, 12]

実践的な例：データの整形

API から取得したデータを整形する例を考えてみましょう：

// APIから取得したユーザーデータ（想定）
const apiResponse = [
  { user_id: 1, first_name: "太郎", last_name: "山田", user_age: 28 },
  { user_id: 2, first_name: "花子", last_name: "佐藤", user_age: 24 },
  { user_id: 3, first_name: "一郎", last_name: "田中", user_age: 32 },
];

// アプリケーションで使いやすい形式に整形
const formattedUsers = apiResponse.map((user) => {
  return {
    id: user.user_id,
    fullName: `${user.last_name} ${user.first_name}`,
    age: user.user_age,
    canDrink: user.user_age >= 20,
  };
});

console.log(formattedUsers);
/*
[
  { id: 1, fullName: '山田 太郎', age: 28, canDrink: true },
  { id: 2, fullName: '佐藤 花子', age: 24, canDrink: true },
  { id: 3, fullName: '田中 一郎', age: 32, canDrink: true }
]
*/

3. 最後に

map()メソッドは、JavaScript で配列を扱う際に頻繁に使用するメソッドです。以下のような特徴があります：

• 常に元の配列と同じ長さの新しい配列を返す

• 元の配列は変更されない（非破壊的操作）

• 配列要素の順序は保持される

map()は以下のようなケースで特に有用：

1. 既存の配列の各要素を加工して新しい配列を作成したい場合

2. データ形式を変換したい場合（例：API レスポンスの整形）

3. 複雑なオブジェクト配列から特定のプロパティのみを抽出したい場合

4. コンポーネントレンダリング（特に React など）でリストを表示する場合

map()を使いこなせるようになるよう是非積極的に使っていきましょう！！