配列の高度なメソッド(filter・reduce)

このレッスンでは、配列の.filter()と.reduce()を使いこなし、条件に合うデータの抽出や集計を短いコードで書けるようになることを目標にします。「JavaScript filter reduce 使い方」「JavaScript 配列 集計」で調べている方向けです。

.filter(条件)は条件に合う要素だけを集めた新しい配列を作ります。.reduce((積み上げ値, 要素) => { ... }, 初期値)は配列全体を1つの値にまとめる(合計するなど)ときに使う、少し高度ですがとても便利なメソッドです。for文で1つずつ処理を書くよりも、これらのメソッドを使うと「何をしたいか」がコードにそのまま表れて読みやすくなります。

サンプルコードでは、テストの点数の配列から.filter((s) => s >= 70)で70点以上だけを抽出し、.reduce((sum, s) => sum + s, 0)で全員の合計点を計算しています。reduceの第2引数(この場合0)は、積み上げを始める初期値で、合計を求める場合は0、掛け算をする場合は1にするなど、目的によって変える必要があります。

初心者がよくつまずくのが、.reduce()のコールバック関数の引数の順番と役割です。1つ目の引数がここまでの積み上げ値、2つ目が現在処理中の要素であることを混同しやすく、最初は動きを1つずつコンソールに出力して確認するのがおすすめです。初期値を指定し忘れると、配列の最初の要素が初期値として扱われる点にも注意しましょう。

実際の開発現場では、注文履歴から特定条件の注文だけを抽出したり、カート内の商品の合計金額を計算したりと、filterとreduceの組み合わせはデータ集計処理の定番パターンです。データ分析や売上集計といった実務のロジックで頻繁に組み合わせて使われる、覚えておく価値の高いメソッドです。

.filter()と.reduce()はメソッドチェーンでつなげて書くこともでき、scores.filter((s) => s >= 70).reduce((sum, s) => sum + s, 0)のように、絞り込みと集計を1行で表現することもできます。

同じような集計処理は.map()と組み合わせて、「条件に合うデータを抽出し、必要な情報だけに変換し、最後に合計する」という一連のデータ加工パイプラインとして書かれることが実務では非常に多くあります。