JavaScriptのreduceメソッドを使いこなす：実務で役立つ5つの活用パターンと基礎知識を解説

2026年5月12日

配列

JavaScriptにおける配列操作の中で、もっとも強力でありながらもっとも習得が難しいと言われるのがreduceメソッドです。

このメソッドは、配列の各要素に対して関数を実行し、最終的に単一の値を生成するために使用されます。

単純な合計計算だけでなく、データの構造変換や非同期処理の制御など、その活用範囲は多岐にわたります。

本記事では、reduceメソッドの基礎から、実務で即座に役立つ5つの具体的な活用パターンまでを詳しく解説します。

目次 [ close ]

reduceメソッドの基礎知識と動作原理

まずは、reduceメソッドの基本的な構文と、内部でどのような処理が行われているのかを整理しましょう。

reduceは、配列の各要素を順番に処理し、一つの累積値（アキュムレータ）にまとめていくという特徴を持っています。

基本的な構文

reduceメソッドは、第一引数にコールバック関数を、第二引数に初期値を受け取ります。

JavaScript

// 基本構文
array.reduce((accumulator, currentValue, currentIndex, array) => {
  // 処理内容
  return accumulator;
}, initialValue);

コールバック関数には、以下の4つの引数が渡されます。

引数	役割
`accumulator`	前回のループでの戻り値、または初期値が保持される累積変数です。
`currentValue`	現在処理されている配列の要素です。
`currentIndex`	現在処理されている要素のインデックス番号です。
`array`	`reduce`を実行している元の配列そのものです。

初期値の重要性

reduceを使用する際に、第二引数の初期値（initialValue）を指定することは非常に重要です。

もし初期値を省略した場合、配列の最初の要素が初期値として使用され、2番目の要素から処理が開始されます。

しかし、空の配列に対して初期値なしでreduceを実行すると、ランタイムエラーが発生してしまいます。

予期せぬバグを防ぐためにも、原則として常に初期値を明示的に指定する習慣をつけましょう。

活用パターン1：数値配列の集計と平均算出

もっとも一般的な使い方は、数値配列の合計値を求める処理です。

forEach文を使用しても同様のことは可能ですが、reduceを使うことでコードを宣言的かつ簡潔に記述できます。

合計値の計算

以下の例では、商品の価格リストから合計金額を算出しています。

JavaScript

const prices = [1200, 2500, 800, 4300];
const total = prices.reduce((acc, curr) => {
  return acc + curr;
}, 0);

console.log(total);

実行結果

平均値の計算

第三引数（現在のインデックス）と第四引数（元の配列）を利用すれば、一度のreduce処理で平均値を出すことも可能です。

JavaScript

const scores = [80, 90, 70, 100];
const average = scores.reduce((acc, curr, index, array) => {
  acc += curr;
  if (index === array.length - 1) {
    return acc / array.length;
  }
  return acc;
}, 0);

console.log(average);

実行結果

このように、ループの最後だけ特定の処理を行うといった柔軟な操作もreduceの得意分野です。

活用パターン2：配列からオブジェクトへの変換

実務においては、APIから取得した「オブジェクトの配列」を、特定のIDをキーとした「ひとつのオブジェクト」に変換したい場面が多々あります。

これを正規化（Normalization）と呼び、データ検索の高速化に役立ちます。

IDをキーにしたマップの作成

以下のコードは、ユーザー情報の配列をIDベースのオブジェクトに変換する例です。

JavaScript

const users = [
  { id: 'u1', name: 'Alice', role: 'admin' },
  { id: 'u2', name: 'Bob', role: 'user' },
  { id: 'u3', name: 'Charlie', role: 'user' }
];

const userMap = users.reduce((acc, user) => {
  acc[user.id] = user;
  return acc;
}, {});

console.log(userMap);

実行結果

{
  u1: { id: 'u1', name: 'Alice', role: 'admin' },
  u2: { id: 'u2', name: 'Bob', role: 'user' },
  u3: { id: 'u3', name: 'Charlie', role: 'user' }
}

初期値に空のオブジェクト{}を渡すことで、累積変数accの中に次々とプロパティを追加しています。

これにより、特定のIDを持つユーザーへのアクセスがuserMap['u1']のように定数時間（O(1)）で可能になります。

活用パターン3：条件に基づいた要素のグルーピング

配列内の要素を特定のカテゴリごとに分類してまとめたい場合にも、reduceは非常に有効です。

例えば、商品のリストをカテゴリ別にグループ化する処理を考えてみましょう。

JavaScript

const products = [
  { name: 'Apple', category: 'Fruit' },
  { name: 'Onion', category: 'Vegetable' },
  { name: 'Orange', category: 'Fruit' },
  { name: 'Carrot', category: 'Vegetable' }
];

const groupedProducts = products.reduce((acc, product) => {
  const key = product.category;
  if (!acc[key]) {
    acc[key] = [];
  }
  acc[key].push(product.name);
  return acc;
}, {});

console.log(groupedProducts);

実行結果

{
  Fruit: ['Apple', 'Orange'],
  Vegetable: ['Onion', 'Carrot']
}

このロジックは、SQLのGROUP BY句のような操作をJavaScript側で実現するものです。

フロントエンドで複雑なデータ表示を行う際に、生データを表示用の構造へ整形する手法として重宝されます。

活用パターン4：重複要素の削除とフィルタリング

配列から重複した値を取り除きたい場合、通常はSetオブジェクトを使用するのがもっとも効率的です。

しかし、単純な重複削除だけでなく「特定の条件を満たしながら重複を省く」といった複雑な要件がある場合は、reduceが適しています。

ユニークな配列の作成

JavaScript

const numbers = [1, 2, 2, 3, 4, 4, 4, 5];
const uniqueNumbers = numbers.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []);

console.log(uniqueNumbers);

実行結果

[1, 2, 3, 4, 5]

この手法を応用すれば、「特定のプロパティが重複しているオブジェクトを除外する」といった高度なフィルタリングも容易に実装できます。

filterメソッドとindexOfを組み合わせるよりも、ロジックを一箇所に集約できるため、コードの可読性が向上する場合があります。

活用パターン5：非同期処理のシーケンシャル実行

reduceの非常にユニークな活用法として、Promiseを順番に実行する（直列実行）仕組みの構築があります。

通常、Promise.allを使用するとすべての非同期処理が並行して実行されます。

しかし、サーバーへの負荷制限や処理の順序性が重要な場合には、一つずつ順番に処理を完了させる必要があります。

Promiseチェーンの動的構築

JavaScript

const taskIds = [1, 2, 3];

const fetchTask = (id) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`Task ${id} completed`);
      resolve(`Result ${id}`);
    }, 1000);
  });
};

taskIds.reduce((promiseChain, currentId) => {
  return promiseChain.then((chainResults) => {
    return fetchTask(currentId).then((currentResult) => {
      return [...chainResults, currentResult];
    });
  });
}, Promise.resolve([]))
.then((allResults) => {
  console.log('All tasks finished:', allResults);
});

実行結果

Task 1 completed
Task 2 completed
Task 3 completed
All tasks finished: ['Result 1', 'Result 2', 'Result 3']

このコードでは、初期値としてPromise.resolve([])を渡し、.then()の中で次の非同期処理を繋いでいます。

これにより、前のタスクが終わるのを待ってから次のタスクが開始される「パイプライン」のような動きを実現しています。

reduceを使用する際の注意点とベストプラクティス

reduceは非常に強力なツールですが、使い方を誤るとコードの解読を困難にする「諸刃の剣」でもあります。

開発現場でreduceを適切に運用するためのポイントをいくつか紹介します。

可読性を損なわない工夫

reduceの中で複雑すぎるロジックを書くと、他のエンジニア（あるいは未来の自分）がコードを理解するのに時間がかかってしまいます。

もしreduce内の処理が10行を超えるようなら、コールバック関数を外部に切り出すことを検討してください。

JavaScript

// 関数を切り出して可読性を高める
const groupByCategory = (acc, product) => {
  const key = product.category;
  acc[key] = acc[key] || [];
  acc[key].push(product.name);
  return acc;
};

const result = products.reduce(groupByCategory, {});