DX技術用語辞典

by Arsaga Partners

Flux

読み方: ふらっくす

Fluxとは

Facebook社が提唱している、クライアントサイドのWebアプリケーション開発のための、アプリケーション・アーキテクチャ(設計思想)です。
Fluxは Action 、Dispatcher 、Storeという3つの要素を持った実装パターンに分けられ、それぞれの役割は以下になります。

 

  • Action
    Viewからのイベント(ユーザーのボタンタップなど)により通信などの処理を行い、Dispatcherに通知する。
  •  

  • Dispatcher
    Actionからの通知をStoreに伝達する。
  •  

  • 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.