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

投稿日: 2025年04月14日

学習振り返り

要約

JavaScriptのmap()メソッドは、配列の各要素に対して関数を適用し、新しい配列を生成する強力なツールです。
元の配列は変更されず、特定のプロパティの抽出やデータ形式の変換などに役立ちます。
特にReactなどのコンポーネントレンダリングで活用され、積極的に使用することでスキルを向上させましょう。

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 }
]
*/