JavaScript | 配列メソッドの使い分け（map / forEach / filter / reduce の違い）

JavaScript

2020.07.282025.10.26

いいテーマです！配列メソッドは「どれを使えばいいのか」が最初は混乱しやすいポイント。ここでしっかり整理しておきましょう。

配列メソッドの使い分け

メソッド	目的	戻り値	使いどころ	サンプルコード
forEach	配列の全要素に対して「処理を実行」する	なし（`undefined`）	単純に繰り返し処理したいとき	`js [1,2,3].forEach(n => console.log(n)); // 1,2,3`
map	各要素を「変換」して新しい配列を作る	新しい配列	値を加工して別の配列を作りたいとき	`js const doubled = [1,2,3].map(n => n*2); // [2,4,6]`
filter	条件に合う要素だけを「抽出」する	新しい配列	条件で絞り込みたいとき	`js const evens = [1,2,3,4].filter(n => n%2===0); // [2,4]`
reduce	配列を「1つの値」にまとめる	単一の値	合計・平均・オブジェクト化など集計処理	`js const sum = [1,2,3,4].reduce((acc,n)=>acc+n,0); // 10`

const fruits = ['apple', 'banana', 'orange'];
fruits.forEach(f => console.log(f.toUpperCase()));
// APPLE
// BANANA
// ORANGE

const fruits = ['apple', 'banana', 'orange'];
fruits.forEach(f => console.log(f.toUpperCase()));
// APPLE
// BANANA
// ORANGE

JavaScript

👉 「処理するだけ」で新しい配列は作らない。

const prices = [100, 200, 300];
const withTax = prices.map(p => p * 1.1);
console.log(withTax); // [110, 220, 330]

const prices = [100, 200, 300];
const withTax = prices.map(p => p * 1.1);
console.log(withTax); // [110, 220, 330]

JavaScript

👉 元の配列を加工して「別の配列」を作る。

const ages = [15, 18, 20, 25];
const adults = ages.filter(age => age >= 20);
console.log(adults); // [20, 25]

const ages = [15, 18, 20, 25];
const adults = ages.filter(age => age >= 20);
console.log(adults); // [20, 25]

JavaScript

👉 条件に合う要素だけ残す。

const scores = [70, 80, 90];
const average = scores.reduce((acc, s, _, arr) => acc + s / arr.length, 0);
console.log(average); // 80

const scores = [70, 80, 90];
const average = scores.reduce((acc, s, _, arr) => acc + s / arr.length, 0);
console.log(average); // 80

JavaScript

👉 配列全体を「1つの値」にまとめる。

💡 補足：