Zenn
🐇

JavaScript 入門： reducer とは？

2024/10/14に公開
JavaScript
fp
tech

JavaScript を勉強していると、reducer(リデューサー) という言葉に出会うことがあります。

初めて聞いたときは、「これって何？」と思うかもしれませんが、難しいものではありません。

この記事では、reducer について説明します。

reducer って何？

「reduce」には「減らす」という意味があります。ここに「-er」が付くことで、「減らすもの」という意味になりますが、具体的には何を減らすのでしょうか？

JavaScript における reducer は、配列内の複数の要素を1つの値にまとめるための関数です。複数の要素を「まとめる」イメージが、最終的に1つの値に集約されるイメージと一致していますね。

例えば、配列の中にたくさんの数字があり、それらをすべて足して合計を求めたい場合、reducer 関数を使うことができます。

JavaScript には実際に reduce() というメソッドがあり、これを利用して reducer 関数を適用します。reduce() メソッドは、配列の要素を1つずつ処理し、最終的に1つの値にまとめる役割を果たします。

具体的な例： 配列の合計を求める

まずは、具体的な例を見てみましょう。配列の中に数字が入っていて、その合計を求める場合を考えてみましょう。

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

const sumReducer = (accumulator, currentValue) => accumulator + currentValue;

const total = numbers.reduce(sumReducer, 0);  // 初期値は0
console.log(total);  // 出力: 15

どういう仕組み？

  1. reduce()メソッド: reduce() メソッドは、配列の中の数字を順番に取り出して、reducer関数（sumReducer）に渡します。
  2. sumReducer関数: sumReducerは、2つの引数を受け取ります。
    • accumulator（累積値）: 前回までに計算した結果を保持する変数。
    • currentValue（現在の値）: 配列の中の現在処理中の要素。
  3. 最終的に、この sumReducer が全ての配列要素を足し算し、合計を返します。

上の例では、配列 [1, 2, 3, 4, 5] のすべての数字を足し合わせて、結果として 15 という合計が求められました。

reduce()メソッドの使い方

もう少し詳しく reduce() メソッドの使い方を見ていきましょう。

reduce() メソッドは次のように使います。

array.reduce(reducer関数, 初期値)
  • reducer 関数: 配列の各要素を処理する関数です。配列の要素を1つずつ取り出して、どう処理するかを決めます。
  • 初期値: accumulator の最初の値。たいていの場合は0や空のオブジェクトなど、最初に必要な初期の値を指定します。

もう一つの例： 配列の最大値を求める

次に、配列の中から最大の数を見つける例を見てみましょう。

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

const maxReducer = (accumulator, currentValue) => {
  return accumulator > currentValue ? accumulator : currentValue;
};

const maxNumber = numbers.reduce(maxReducer, 0);
console.log(maxNumber);  // 出力: 9

この例では、maxReducer 関数を使って配列の中の最大値を探しています。accumulator がこれまでの最大値を保持し、currentValue と比べて大きい方を次に進めていきます。最終的に、最大の数 9 が出力されます。

状態管理ライブラリ「Redux」でのreducer

JavaScriptを使ってアプリを作る際に、よく出てくるのが「状態管理」です。この状態管理に使われるライブラリの一つが Redux です。Redux でも reducer という考え方が重要な役割を果たします。

例えば、カウンターアプリの例を考えてみましょう。状態を「増やす」「減らす」といった操作を管理するために、次のような reducer 関数を使います。

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

この例では、counterReducer 関数がアクション（例えば「増やす」「減らす」）に応じて、状態をどう変化させるかを決めています。アプリの状態がどう変わるかを制御するために、Redux ではこうした reducer 関数を使います。

まとめ

JavaScript における reducer は、配列の要素をまとめて1つの値にするために使われる非常に便利な関数です。配列の合計を求める、最大値を見つける、あるいは状態管理で使用するなど、さまざまなシチュエーションで活躍します。

始めのうちは少し複雑に感じるかもしれませんが、実際にコードを書いてみると、どんどん慣れて使いこなせるようになります。何度も練習して、reducer の仕組みをしっかり理解しましょう。

Discussion