Redux の罠

Redux の罠

React などでフロントエンドの開発をする場合、Redux を利用するとデータをページ間で共有できるので便利です。しかし、Web ブラウザが動作している PC のメモリを多く消費する場合があるので注意が必要です。

Redux の活用

React などの開発で、少し複雑なページ構成でフロントエンドのアプリやサービスを開発する場合、ページ間やコンポーネント間でデータの受け渡しが結構面倒になります。シンプルな場合は、パラメータを利用して渡せば良いのですが、ページやコンポーネントの関係が複雑になると結構大変です。

そうした場合に利用されるのが Redux です。要はサービス（アプリ）全体でまとめてデータを管理する仕組みで違うページやコンポーネントから共通のデータにアクセスできるので便利です。

React のフレームワーク自体はこうした、データをまとめて管理する機能がありません。従って、データをまとめて一元管理する場合は、外部のモジュールである Redux を利用する場合が多くなっています。

設定が面倒な Redux

ところが、Redux 自体は React とは別のモジュールになるので、慣れないと設定が面倒なので、初めて学習する方には厄介な代物として扱われる事が多くなります。一旦、設定の仕方と、データをやり取りする仕組みを理解して仕舞えばそれほど難しい物ではありませんが、必要な設定を行うファイルや仕組みがわかりにくいので初心者には何をしているのかがよく見えずに使いこなすのに苦労している方が多い様です。

やっている事自体はシンプルで、データを更新する際には、「Reducer」と呼ばれる仕組みを通して行うという事と、Reducer を呼び出すための仕組み（Action）を設定する必要があるのがわかりにくいところです。

設定の仕方自体は確かに面倒ですが、「型（テンプレートの様な物）」を作って仕舞えば、あとは同じようにやれば良いだけなので、最初は多少時間はかかりますが本質的な問題ではありません。

大きな問題は使用するメモリ容量！

では、何が問題かというと、気をつけて設計しないと、フロントエンド（Web ブラウザ）で使用するメモリのサイズが非常に大きくなってしまう場合がある事です。 Redux を利用するとデータを Redux に入れておけばどのページでも、どのコンポーネントからもデータにアクセスできるので、面倒なデータの受け渡しの設計をしなくて済むので開発者にはありがたいです仕組みです。しかし、なんでもかんでも Redux に入れてしまうと、データのサイズが大きくなってしまいます。つまり、使用するメモリの容量が大きくなってしまう事にあります。

アプリでどの様なデータを使うかによる部分も大きいのですが、よく PC のメモリの使用状況をみると、Google Chrome は結構メモリを使っている場合がかなりあります。それほど沢山のタブを開いているわけではないのに、メモリの使用量が予想以上に大きい場合があります。あまり気にしていない方も多いと思いますが、利用者にとっては問題になる場合があります。

Web 開発などをする方の場合、比較的高性能の PC を利用する方が多いので、メモリも通常の PC より多い場合が多くなります。この場合、開発者がテストで動かす場合は、PC のメモリに余裕があるので余り問題にならないことでも、利用者の PC のメモリ容量が少ないと、PC の他のアプリの実行などが極端に遅くなったりする場合があります。

開発時のテストで問題が無いという事が、必ずしも実際の利用者が問題なく利用できるということでは無いということです。そう考えると、余り考えずにデータを Redux に入れて使うのは少し考えた方が、より利用者重視のアプリを作れる事になります。

アプリで必要なデータはいずれにしても、保持する必要がありますが、実際に表示していない、ページやコンポーネントの表示に関するデータを Redux で本当に保持する必要があるかをよく考える必要があるという事になります。

ではどうするか？

ではどうするかという事になると思います。 Web 開発の基本は、表示するデータのみを保持するというのを基本にすると必要以上のメモリを浪費する可能性は少なくなります。

Redux の場合は、データをブラウザで保持するという考え方ですが、そのデータを本当にブラウザで持つ必要があるかをよく検討する事がサービスを設計するに当たって需要になります。ブラウザで持たない場合は、どこで持つかというと、よく利用されるのはデータベースです。データベースにデータをもっておいて、必要な時に取り出すと言う方法をとれば、Web ブラウザでデータを保持する必要がなくなります。

では、なぜそうしないのか？

理由は簡単です！データベースを利用するには通常はバックエンドのサーバー側に持たせる必要があることが第一の理由です。もう一つは、Web ブラウザは利用している PC 上のメモリにデータをも着く事ができますが、データベースの場合は殆どの場合、ネットワークを介してデータを取得する必要があるので、データの取得に時間がかかると言う問題があります。

そう考えると、多少メモリを使ったとしても、Redux を利用するのはよりよいサービスを利用者に提供する一つの方法と言えます。

しかし、一つの方法として、Firegbase のデータベース（Cloud Firestore）を利用する方法があります。Firegbase は通常のデータベース（SQL のデータベース）より高速にアクセスできる場合が多く、自分でバックエンドのサービスを作る必要はありません。Redux の代わりに必要なデータを Firebase のデータベースに保存しておいて、必要な時に取得する様にすれば、Web ブラウザで必要なメモリ容量を押させる事が可能になります。実際に、Firebase を併用すると Redux に保持するデータを最小限にしても、十分な性能で機能の実現ができるケースが増えます。

Firebase を利用する方が、Redux の設定をするより初心者にわかりやすいという事も大きな魅力です。

まとめ

React でのフロントエンドの開発では、Redux が活躍するケースも多いですが、初心者には設定の手間も係わかりづらい分野でもあるのでちょっと面倒です。さらに、Redux になんでもデータを放り込んでしまうと、Web ブラウザが利用するメモリ容量も増大してしまいます。

こうした、マイナス面を考えると、より利用者に優しく便利なサービスを作るためには、やたらに Redux に頼るのではなく、最低限のデータを厳選して Redux を利用する工夫が必要になってきます。

Firebase のデータベースは一部の Redux に置いていたデータを置くのに利用すると、そうした問題を軽減することができます。