Array.prototype.reduce TIPS

最終更新日

reduce reuse recycle rihanna

概要

先週の土曜日に開催されたGunma.web #35にて発表した内容に一部追記した記事です。

* 記事内のcodepen blockについて
コードブロックは実行済みの状態で表示されているので、動作を確認したい場合は、各コードブロックエディタの右下にある codepen実行ボタン を押して再度実行してください。

Array.reduceとは

reduceメソッドは、配列の各要素に対して順番にコールバック関数を実行します。
コールバック関数の一つ目の引数は、アキュームレーターと呼ばれ、コールバック関数が処理された際の戻り値が次のコールバックの引数として渡されます。

このメソッドは非常に使い勝手がよく、応用範囲が広いのでその一部を紹介したいと思います。

総和を求める

reduceメソッドのサンプルとしてよく紹介されるコードです。
配列に収められた値の総和をreduceを使うことで簡潔に求めることができます。

See the Pen reduce sample – sum by shimizu masayuki (@shimizu) on CodePen.dark

動作解説

なにが便利なのか?

プログラムでは、「前の処理の結果を受けて次の処理を行う」という順番が重要となる連結処理が頻出します。reduceメソッドを使うことで、連結処理を簡潔に記述することができます。

ここからは、reduceメソッドを使って逐次処理を行うサンプルを紹介します。

ファンクション・チェイン

複数の関数をreduceを使って連続的に処理します。
その際、直前に実行された関数の戻り値を引数として受け取ります。
関数を入れ子にしたり、スコープ外に余計なテンポラリ変数を設定しなくてもよいので、すっきりと記述することができます。

See the Pen reduce sample – chain functions by shimizu masayuki (@shimizu) on CodePen.dark

プロミス・チェイン

非同期処理を同期的に逐次処理したい場合にもreduceを活用することができます。
通常のthenメソッドを用いたチェインやPromise.allでは実現するのが難しい連続処理も配列を使って記述することができます。

See the Pen reduce sample – chain promise by shimizu masayuki (@shimizu) on CodePen.dark

Redux/Reducer

Reduxに含まれる機能の一つであるReducerは、現在のステートとステートを変更させる指示(アクション)を受け取り、新しいステートを生成します。
reducerを副作用のない純粋関数で記述することで、照透過性を保ったままステートのハンドリングを行うことができます。

Reducers · Redux

ここでは、Pure Javascriptのreduceを使って簡易的なReducerを実装してみます。

ベースとなるファンクション・チェイン

先ほど紹介したファンクション・チェインをベースとしてreducer風に書き換えて行きます。

See the Pen reduce sample – chain functions by shimizu masayuki (@shimizu) on CodePen.dark

関数を直接渡すのではなく、アクションを渡してreducerの中で処理をするように変更

See the Pen reduce sample – chain functions2 by shimizu masayuki (@shimizu) on CodePen.dark

さらにRedux/Reducer風に

See the Pen reduce sample – chain functions3(reducer) by shimizu masayuki (@shimizu) on CodePen.dark

まとめ

reduceを使うと、関数と関数の間での値の受け渡しを副作用のない形で記述することができます。複雑な逐次処理も、意外と簡潔に記述できたりするのでぜひ使ってみてください。