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

では「メソッドチェーン」を使って、filter → map → reduce をつなげて書くとどうなるかを見てみましょう。

お題（再掲）

配列 [1, 2, 3, 4, 5] から 偶数を2倍にして合計を求める。

メソッドチェーンで書くと

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

const total = numbers
  .filter(n => n % 2 === 0)   // 偶数だけ残す → [2, 4]
  .map(n => n * 2)            // 2倍に変換 → [4, 8]
  .reduce((acc, n) => acc + n, 0); // 合計 → 12

console.log(total); // 12

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

const total = numbers
  .filter(n => n % 2 === 0)   // 偶数だけ残す → [2, 4]
  .map(n => n * 2)            // 2倍に変換 → [4, 8]
  .reduce((acc, n) => acc + n, 0); // 合計 → 12

console.log(total); // 12

メリット

• 処理の流れが上から下に自然に読める
  「偶数を選ぶ → 2倍する → 合計する」と順番が明確。
• 中間変数が不要
  1行ごとに新しい配列を作るけど、変数名をいちいち付けなくていい。
• 読みやすく保守しやすい
  データ処理のパイプラインのように見える。

デメリット

• 長くなると読みにくい
  複雑な処理を全部チェーンに詰め込むと理解しづらい。
• 途中結果を確認しにくい
  デバッグしたいときは一時的に変数に分けた方が楽。

まとめ

• 短くてシンプルな処理 → メソッドチェーンが最適
• 複雑で途中確認が必要 → 途中で変数に分ける方が安全

💡 ちなみに、最近の JavaScript では pipe や pipeline operator (|>) の導入も議論されていて、将来的にはもっと自然に「データを流す」書き方ができるようになるかもしれません。