ハンバーガー屋で隣の女子高生が語るReact 第2話 データの持ち方

ハンバーガー屋さんで隣の女子高生がReactにおけるデータの持ち方について語っていました。

・ 第一話 隣の女子高生が語るReact
・ 第三話 React Hooks
・ 予定 React Hooks チューニング
・ 予定 React 自動テスト

このシリーズを加筆・修正して、働きアップグレードガイド2020 〜楽しく働くために取り組めること〜という合同誌に収録することが決まりました。この合同誌、フルリモート・フルフレックスの会社でどうやって楽しく働くのか？2020年代の働き方についててんこ盛りの本なので、興味ある人はぜひチェックリストに追加してみてください。

データの持ち方

J美「R子がReactやってるっていうから触ってみたんだけど、Flux?Redux?って何なの？」
R子「FluxはReactに適したデータフローのアーキテクチャやねー。ReduxはFluxの考え方の大半を実装したライブラリで、MVCとかMVVMが抱えていた根本的な複雑性を解決する冴えたやり方やねー。コツはデータの流れを一方通行にすることと、受け口が一箇所に定まってることやなー」

　データフローは、データの流れる向きや順序のこと。プログラミングにおいてはデータがどう流れて制御が移っていくかを追いかけると理解しやすい
　アーキテクチャは、広い意味を持つ言葉だけど、ここでは大きい枠組みくらいに捉えておくと吉。
　Fluxは、MVC/MVVMなどが抱えていた、多対多の関係性をなくすために、データの流れを一方通行にすることで簡単にしようぜというアイデア。React と対になるように、Facebook社員が提唱したもの。
　MVCやMVVMは、度々ファットコントローラ、ファットモデルなど、特定の層に処理が集中するアンチパターンが生じがちだったり、それぞれのレイヤーのコンポーネントが、別のレイヤーの複数のコンポーネントと関係性を持つ、多対多の構造になりやすく、複雑性を持つという仕組み上の欠陥を持っていた。
　Reduxは、Fluxが提唱されてから、一番シェアを持っているライブラリ。

J美「データの流れが一方通行ってどういうこと？」
R子「MVCとか既存のアーキテクチャやと、それぞれの役割のコンポーネントが相互にデータを投げ合うけど、Flux/Reduxではそれぞれのコンポーネントは、好き勝手にデータを投げたらあかんねんよー」
R子「例えばUIの最前線はもちろんビュー（Reactのコンポーネント）やけど、Fluxでのビューは自分で状態更新はしたらあかんねん。できるのんはビューのイベント（マウスクリックとかキーを押したとか）に応じて、アクションっていうプレインオブジェクトを、ディスパッチャに投げることだけやねー（※1）。」

　※1 正確には、React コンポーネントに引数で渡ってきた関数を叩くのはあり。というか、もともとReactの考え方で、引数で渡ってきた関数を叩くことでツリーの根っこに近い方で状態管理できるようにするというものだった。よく props のバケツリレーなどと言われるもの。
　プレインオブジェクトは、JavaだとPOJOとも言われるもの。JavaScriptだとJSON化できるオブジェクトというと分かりやすいか。要するに基本的な最小限のデータ（文字列、数字、真偽値、配列などで構成されるツリー状のデータ構造）
　ディスパッチャとは、その関数を実行することで、決められた1つの場所にデータを渡すことができるという、交通整理できる優れた便利関数。

R子「非同期処理なんかも、API通信とかの結果をダイレクトにビューの更新をするわけじゃなくて、同じようにディスパッチャに投げるんやなー。Reduxの場合は非同期処理をするためのミドルウェアがあんでー」

　　非同期ミドルウェアとは、React + Redux だけではAPIアクセスなどの非同期処理が綺麗にさばけないため使われるもの。Reduxは、とても簡単にミドルウェアを追加できるため、様々なミドルウェアが存在する。redux-saga や redux-thunk などが有名。

J美「つまり直接データを書き換えるんじゃなくて、アクションっていう、データを書き換えるためのデータを作って、ディスパッチャに投げるっていう間接操作でやるってこと？なんでそんな面倒なことするん？」
R子「データを直接書き換えると、データの書き換え方のルールを決められへんやろ？たとえば、データ作成の時間情報を更新するときに、Date型を入れたり、UNIX time入れたり、UNIX timeのミリ秒入れたり、なんでも出来てしまうやん？」
J美「でもそれだけなら、データモデルをTypeScriptで記述すれば型で制約かけるんじゃない？」
R子「UNIX timeの秒とミリ秒とかだと、TypeScriptでは同じモノに見えてまうからなー。でもディスパッチャ経由にして、ワンクッションおけばユニットテストなんかも書きやすくなるやろー」

　Date型は、JavaScriptで日時を表現するオブジェクト。機能が乏しく操作が面倒なため、度々momentみたいな便利ライブラリが使われる。
　UNIX time （epoch エポックとも言う）は、1970年1月1日0時0分からの通算時刻を秒で表現したもの。ただし、JavaScriptでは秒単位ではなくミリ秒単位で表現したものが主に使われる。そのため、APIなどで秒単位のUNIX time を取得したときには、JavaScript向けにミリ秒やDate型に、データ変換をすることになる。
　TypeScript は、Microsoft社が開発するJavaScriptの完全上位互換かつ、静的型付けをサポートしたハイブリッド言語。最近のJavaScript開発では半分以上のシェアを占めている事実上の標準。

J美「ユニットテストはどういう風に書くん？」
R子「たとえば、アクションを生成するアクションクリエイターのテストやなー。APIの結果から、データモデルを変更するためのミリ秒の数値を生成できるかどうかテストしたりとかやなー。」
J美「なんかまた登場人物増えたね。アクションクリエイタは関数？」
R子「せやねー。ビューのイベントや、非同期処理の結果を、アクションクリエータに食わせて、アクションの生成やディスパッチをするんや。登場人物は確かに増えるけど、通り道が限定されるから、ユニットテストが書きやすくなるし、バグに対処しやすくなるよー」

　実際にはここらへんはバランス感覚が重要なところ。通り道が限定されるのがいいのか？レイヤーが増えることで複雑に感じるか？ユニットテストをどれくらい重視するのか？など、アーキテクトの腕の見せ所である。

J美「関数型プログラミング的な考え方ってやつ？」
R子「せやねー。コンピュータの仕組みまで遡ると、プログラムは基本的にはデータ変換がお仕事やからねー。APIやビューのデータを、アクションに変換する関数って考えると、シンプルかつ堅牢なものにできるやろー」

　関数型プログラミング、ここでは基本的に純粋関数と呼ばれる、入力が同一なら出力が必ず同一になるもの、かつ副作用（わかりやすいものはI/O）を持たないもので、アクションクリエイターは作成可能。そもそもやってることシンプルなんだし。

J美「アクションやディスパッチは分かったけど、ディスパッチされたアクションはどうなるん？」
R子「ディスパッチされたアクションは、ストアに配送されんねんよ。Reduxとかだと、ストアにはReducer（リデューサ）っていう、アクションの応じてデータモデルを変更する関数を登録しておいて、リデューサがデータを書き換えるんよ」

　ストアは、データを貯めるところであり、かつ登録されたリデューサによってデータの変換の過程を保証する装置。

J美「ストアがデータを書き換えたとして、そのあとどうなんの？それだけだとビューの状態変わんないでしょ？」
R子「大前提として、ビューに渡るデータは全部ストアが管理しとんねんよー。デザインパターンでいうObserverパターンやねんけど、ストアでデータが更新されたら、ビュー、つまりReactに渡すデータを書き換える。そしたらReactのライブラリがビューの状態を変えるんやなー」

　Observerパターンは、デザインパターンの一種で、値が更新したり、なにがしかのイベントに応じて登録したコールバック関数を実行するというもの。イベントドリブンプログラミングやGUIなどでは当たり前のように使われるパターンでもある。

J美「なるほど。ビューのイベントハンドラや、非同期処理の結果は、アクションクリエイターが作ったアクションをディスパッチして、ストアはディスパッチされたアクションでデータを更新する。そうしたらストアはReactコンポーネントに渡すデータを更新することで、ビューの状態が更新されるんだね。なんかめんどくさくない？」
R子「ぶっちゃけ構造全体を見ると面倒くさいというか大げさに見えるけど、MVCやMVVMよりは交通整理されてるだけマシやと思うわ。あと、ここまで説明してなんやねんけど、今のReactは、Flux/Reduxより先の世界にいってるから、もっとシンプルになっとんねんよ」

シリーズ

・ 第一話 隣の女子高生が語るReact
・ 第三話 React Hooks
・ 予定 React Hooks チューニング
・ 予定 React 自動テスト

このシリーズを加筆・修正して、働きアップグレードガイド2020 〜楽しく働くために取り組めること〜という合同誌に収録することが決まりました。この合同誌、フルリモート・フルフレックスの会社でどうやって楽しく働くのか？2020年代の働き方についててんこ盛りの本なので、興味ある人はぜひチェックリストに追加してみてください。