JavaScriptのArrayメソッドmap, filter, reduceを徹底解説

作成日 2025.03.11
javascript
javascript

JavaScriptの配列操作において、map, filter, reduceは非常に強力なメソッドです。本記事では、それぞれのメソッドの使い方、ユースケース、パフォーマンスの観点から徹底的に掘り下げます。

1. mapメソッドの概要
2. mapのユースケース
3. filterメソッドの概要
4. filterのユースケース
5. reduceメソッドの概要
6. reduceのユースケース
7. mapとfilterの組み合わせ
8. reduceとfilterの組み合わせ
9. map, filter, reduceの実行順序とパフォーマンス
10. ネストしたデータの操作
11. reduceRightの活用
12. まとめ

mapメソッドの概要

mapメソッドは、配列の各要素に対して関数を適用し、新しい配列を作成します。

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

mapのユースケース

データを変換する際に便利です。

const names = ['Alice', 'Bob', 'Charlie'];
const upperNames = names.map(name => name.toUpperCase());
console.log(upperNames); // ['ALICE', 'BOB', 'CHARLIE']

filterメソッドの概要

filterメソッドは、指定した条件に合致する要素を抽出して新しい配列を作成します。

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

filterのユースケース

データの絞り込みに利用します。

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 18 },
  { name: 'Charlie', age: 30 }
];
const adults = users.filter(user => user.age >= 20);
console.log(adults); // [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 30 }]

reduceメソッドの概要

reduceメソッドは、配列を1つの値に集約します。

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // 10

reduceのユースケース

データの集計や複雑な変換に活用できます。

const products = [
  { name: 'Laptop', price: 1000 },
  { name: 'Phone', price: 500 },
  { name: 'Tablet', price: 700 }
];
const totalCost = products.reduce((total, product) => total + product.price, 0);
console.log(totalCost); // 2200

mapとfilterの組み合わせ

複数のメソッドを組み合わせることで柔軟なデータ操作が可能になります。

const numbers = [1, 2, 3, 4, 5];
const doubledEvenNumbers = numbers.filter(num => num % 2 === 0).map(num => num * 2);
console.log(doubledEvenNumbers); // [4, 8]

reduceとfilterの組み合わせ

データの絞り込みと集計を同時に行います。

const transactions = [
  { amount: 200, type: 'income' },
  { amount: 100, type: 'expense' },
  { amount: 300, type: 'income' }
];
const totalIncome = transactions
  .filter(transaction => transaction.type === 'income')
  .reduce((sum, transaction) => sum + transaction.amount, 0);
console.log(totalIncome); // 500

map, filter, reduceの実行順序とパフォーマンス

大量データの処理では、メソッドの組み合わせ順序がパフォーマンスに影響を与えます。

// 良い例（filterを先に実行）
const largeArray = Array.from({ length: 1000000 }, (_, i) => i);
const result = largeArray.filter(num => num % 2 === 0).map(num => num * 2);

// 悪い例（mapを先に実行）
const result2 = largeArray.map(num => num * 2).filter(num => num % 4 === 0);

ネストしたデータの操作

map, filter, reduceを使ってネストされたデータを処理します。

const data = [
  { id: 1, items: [1, 2, 3] },
  { id: 2, items: [4, 5] },
  { id: 3, items: [6, 7, 8] }
];
const flattened = data.reduce((acc, obj) => acc.concat(obj.items), []);
console.log(flattened); // [1, 2, 3, 4, 5, 6, 7, 8]

reduceRightの活用

reduceRightを使って配列を逆方向に処理します。

const numbers = [1, 2, 3, 4];
const reversed = numbers.reduceRight((acc, num) => acc.concat(num), []);
console.log(reversed); // [4, 3, 2, 1]

まとめ

map, filter, reduceは、配列の操作において非常に強力で柔軟性の高いツールです。これらのメソッドを適切に組み合わせることで、複雑なデータ操作を簡潔に実現できます。