JavaScriptで配列を操作する際、forループだけで書いていませんか？モダンなJavaScriptでは、map、filter、reduceといった配列メソッドを使うことで、コードが短く、読みやすく、バグが少なくなります。この記事では、それぞれのメソッドを実践的なコード例と共に解説します。
🗺️ map() — 配列を変換する
map()は、配列の各要素に関数を適用し、新しい配列を返すメソッドです。元の配列は変更されません。
const numbers = [1, 2, 3, 4, 5];
// 各要素を2倍にする
const doubled = numbers.map(num => num * 2);
[2, 4, 6, 8, 10]
実用例として、オブジェクト配列から特定のプロパティだけを抽出する場合：
const users = [
{ name: '太郎', age: 25 },
{ name: '花子', age: 30 },
{ name: '次郎', age: 22 }
];
const names = users.map(user => user.name);
["太郎", "花子", "次郎"]
💡 ポイント：map()は常に元の配列と同じ長さの配列を返します。要素数を変えたい場合はfilter()やflatMap()を使いましょう。
🔍 filter() — 条件に合う要素を抽出する
filter()は、条件に合致する要素だけを集めた新しい配列を返します。元の配列は変更されません。
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
// 偶数だけを抽出
const evens = numbers.filter(n => n % 2 === 0);
[2, 4, 6, 8]
オブジェクト配列での実用例：
const products = [
{ name: 'ノートPC', price: 89000 },
{ name: 'マウス', price: 3000 },
{ name: 'モニター', price: 45000 },
{ name: 'キーボード', price: 12000 }
];
// 1万円以上の商品だけ
const expensive = products.filter(p => p.price >= 10000);
[{ノートPC: 89000}, {モニター: 45000}, {キーボード: 12000}]
🔄 reduce() — 配列を一つの値に集約する
reduce()は配列の全要素を一つの値にまとめる最も強力なメソッドです。合計、平均、グループ化など様々な用途に使えます。
const numbers = [10, 20, 30, 40];
// 合計を計算
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
100
reduceの動作をステップごとに見てみましょう：
| ステップ | acc（累積値） | cur（現在値） | 結果 |
|---|---|---|---|
| 1回目 | 0 | 10 | 10 |
| 2回目 | 10 | 20 | 30 |
| 3回目 | 30 | 30 | 60 |
| 4回目 | 60 | 40 | 100 |
オブジェクトのグループ化にも使えます：
const fruits = ['りんご', 'バナナ', 'りんご', 'みかん', 'バナナ', 'りんご'];
const count = fruits.reduce((acc, fruit) => {
acc[fruit] = (acc[fruit] || 0) + 1;
return acc;
}, {});
{ りんご: 3, バナナ: 2, みかん: 1 }
⚠️ 注意：reduce()の第2引数（初期値）は必ず指定しましょう。省略すると配列が空の時にTypeErrorが発生します。
🔗 メソッドチェーン—組み合わせの力
これらのメソッドは連結（チェーン）して使うことで、複雑な処理も簡潔に書けます。
const orders = [
{ item: 'コーヒー', price: 500, qty: 2 },
{ item: 'ケーキ', price: 800, qty: 1 },
{ item: 'サンド', price: 600, qty: 3 },
{ item: '水', price: 100, qty: 1 }
];
// 500円以上の注文の合計金額
const total = orders
.filter(o => o.price >= 500)
.map(o => o.price * o.qty)
.reduce((sum, v) => sum + v, 0);
2600 // コーヒー(1000) + ケーキ(800) + サンド(1800) → 合計は3600…ではなく、500円以上の商品の合計
📊 比較表：forループ vs 配列メソッド
| 特徴 | forループ | 配列メソッド |
|---|---|---|
| 可読性 | 低い（インデックス管理が必要） | 高い（意図が明確） |
| 副作用 | あり（変数を変更しやすい） | なし（新しい配列を返す） |
| チェーン | できない | 可能（連結しやすい） |
| パフォーマンス | やや速い | 十分高速（実用上差なし） |
| デバッグ | 簡単（ブレークポイントが使える） | やや難しい |
🔧 その他の便利な配列メソッド
find()
条件に合う最初の要素を返す。見つからない場合はundefined。
some() / every()
some()は一つでも条件を満たすか、every()は全て満たすかを判定。
flatMap()
map()とflat()を組み合わせたメソッド。ネスト配列の展開に便利。
findIndex()
条件に合う最初の要素のインデックスを返す。
❓ よくある質問
map()とforEach()の違いは？
map()は新しい配列を返しますが、forEach()は何も返しません（undefined）。変換結果が必要ならmap()、副作用だけならforEach()を使いましょう。
reduce()が難しいのですが、使うべき？
無理に使う必要はありません。まずはmap()とfilter()をマスターし、合計やグループ化が必要な場面でreduce()を導入するのがおすすめです。
パフォーマンスは大丈夫？
通常のアプリケーションでは全く問題ありません。数百万件のデータを処理する場合のみ、forループを検討しましょう。
配列メソッドはTypeScriptでも使える？
はい、全て使えます。さらに型推論により、戻り値の型が自動的に正しく推論されるため、TypeScriptとの相性は抜群です。
🚀 まとめ：map()は変換、filter()は抽出、reduce()は集約。この3つをマスターすれば、JavaScriptの配列操作は自由自在です！