JavaScript の「reduce」メソッドを理解する

Mar 27 2023

reduce という言葉は、文字通り「何かを小さくする」という意味です。これは、アキュムレータと配列内の各要素に対して関数を適用して、それを単一の値に減らす関数型プログラミングの概念です。

reduceという言葉は、文字通り「何かを小さくする」という意味です。これは、アキュムレータと配列内の各要素に対して関数を適用して、それを単一の値に減らす関数型プログラミングの概念です。これは非常に強力な概念であり、 ReduxやRamdaなどの複雑なライブラリやフレームワークの開発に使用されます。

JavaScript ではreduce は配列メソッドとして利用できます。私は仕事でreduceメソッドを長い間使用してきました。しかし、私の友人や同僚の多くが、この方法を効果的に理解して使用するのに苦労していることに気付きました. したがって、reduce メソッドをより簡単に説明するために、この記事を書くことにしました。この強力な概念は、コードを最適化し、複雑なシステムとロジックを実装するのに役立ちます。うまくいけば、これはより多くの人々がそれを正しく理解するのに役立ちます.

ここではArrayreduceメソッドのことは忘れましょう。reduce実際に何をするのかをよりよく理解するために、独自の関数をゼロから作成します。

物事を分解する

まず、reduce関数のさまざまなコンポーネントを分解してみましょう。

Accumulator — リダクションの各ステップの後に結果を格納する変数です。次のステップへのインプットにもなります。
Reducer — アキュムレータと配列の各要素を受け取る関数です。次のステップのアキュムレータ値を返す必要があります。削減の各ステップを定義します。
初期値—最初の削減ステップのアキュムレータの値です。これはある種のシード値と考えることができます。リダクションの最終結果は、初期値とreducerのみに依存します。
入力配列— これについてはこれ以上説明する必要はありません .

この記事では、 TypeScriptを使用して関数を作成します。これにより、静的型を使用して関数をより適切に定義し、読者がよりよく理解できるようになります。

type Reducer<TEle, TAcc> = (acc: TAcc, ele: TEle) => TAcc;

function reduce<TEle, TAcc>(
 arr: TEle[],
 reducer: Reducer<TEle, TAcc>,
 initialValue: TAcc
) {
// TODO: Implement
}

リダクションの簡単な例を考えてみましょう — 「配列内の要素の合計」 . このロジックを実装するのはかなり簡単です。やってみましょう：

const arr = [1,2,3,4,5,6,7,8,9,10];

let sum = 0;

for (let num of arr) {
    sum = sum + num;
}

console.log(sum);

リダクションの成分としての要素の合計

reduce の異なるコンポーネントの組み合わせとして、同じコードを簡単に書き直すことができるようになりました。

const arr = [1,2,3,4,5,6,7,8,9,10];
const initialValue = 0;
const reducer = (acc: number, ele: number) => acc + ele;

let acc = 0;

for (let ele of arr) {
    acc = reducer(acc, ele);
}

これで、上記の情報を使用してreduce関数を完成させることができます。

type Reducer<TEle, TAcc> = (acc: TAcc, ele: TEle) => TAcc;

function reduce<TEle, TAcc>(
 arr: TEle[],
 reducer: Reducer<TEle, TAcc>,
 initialValue: TAcc
) {
    let acc = initialValue;
    for (let ele of arr) {
        acc = reducer(acc, ele);
    }
    return acc;
}

reduceメソッドのreducerパラメータもindexと入力配列を引数として取りますが、本質的には先ほど作成したreduce関数と同じ方法で実装されています。

次は何？

さて、 reduce を本当に上手に使うためにもっとできることがあります。あなたが試すことができるアイテムのいくつかは次のとおりです。