Flux
読み方: ふらっくす
Fluxとは
Facebook社が提唱している、クライアントサイドのWebアプリケーション開発のための、アプリケーション・アーキテクチャ（設計思想）です。
Fluxは Action 、Dispatcher 、Storeという3つの要素を持った実装パターンに分けられ、それぞれの役割は以下になります。
Viewからのイベント（ユーザーのボタンタップなど）により通信などの処理を行い、Dispatcherに通知する。
Actionからの通知をStoreに伝達する。
Dispatcher経由で流れてきたActionの結果を格納（保管）しておく。
Fluxの特徴
Action → Dispatcher → Store → View と、単一方向のデータフローによってUI設計をしていることが最大の特徴です。これにより、開発規模が大きくなってもデータフローが複雑になりにくいメリットがあります。
また、一度リクエストした通信の結果を他の画面でも使用したい時には、結果がStoreに保管されているため、もう一度他の画面で通信を行うことなく、Storeから以前の結果を取り出すことが可能です。
Fluxを用いたとあるニュース記事の一覧実装の例
Fluxを用いると以下のように分業されます。
- Action
Viewの生成完了トリガーにより、ニュース記事一覧の取得処理をリクエスト。結果をDispatcherに流します。 - Dispatcher
Actionから受け取った通信結果をStoreに通知します。 - Store
Dispatcher経由で受け取った通信結果を格納します。View側ではStoreの変更を購読している為、最終的にViewに通知が行き、通信結果であるニュース記事一覧が表示されます。
現場の声
複数の画面において、共通の処理結果を使用したり、大規模な画面数でのアプリを開発する上で、メリットを感じています。処理結果を1つのStoreという場所に集約していることで、他の画面に受け渡すという煩雑な処理が不要になる上、他の実装者のコードでも流れを追いやすくなっています。
関連用語
MVVM
MVC
＜執筆・監修＞
アルサーガパートナーズ株式会社 DX技術用語集制作チーム App Div.