「Flux」アーキテクチャとは？　MVCやMVPとの違いとテスタビリティー

「MVC」や「MVP」では、ModelやViewの数が膨大になり構造が複雑化するという問題があった。FluxアーキテクチャはMVCやMVPとどう違うのか。

[石黒邦宏，デジタルハーツ]

　本連載は、ソフトウェア開発のさまざまなアーキテクチャの中で、特にテストに強いものを紹介していきます。第4回は「Flux」を取り上げます。

著者紹介：石黒邦宏

デジタル・マジック・ラボでインターネット経路制御運用に関わり、オープンソースウェアで経路制御を実現する「GNU Zebra」を開発。1999年IP Infusionを共同設立し、CTOに就任。2009年Access CTO、2015年アプリックス CTOを経て、2018年デジタルハーツホールディングスCTOに就任。

「Flux」の特長と仕組み

　Fluxは、Facebookが提唱するアーキテクチャです。画面遷移が多く、情報のリアルタイムアップデートが必要なサービスの場合、MVC（Model、View、Controller）やMVP（Model、View、Presenter）といったアーキテクチャでは、ModelやViewの数が膨大になったり、ModelやView間での双方向のやりとりなどから、システム構造が非常に複雑化してしまったりという問題がありました。

　Fluxはこれらの問題を解決するために提案されたアーキテクチャです。最大の特徴は、ModelとView間の双方向のデータフローではなく、全て単方向のデータフローであることです。

図1　MVC／MVPとFluxのデータフローの違い

　Fluxアーキテクチャでは、「Dispatcher」がMVCやMVPのControllerやPresenterの役割を、「Store」がModelに近い役割を担っています（図1）。Fluxはイベントが発生したときにどのようにStoreを更新するかをDispatcherが判断し、StoreはDispatcherからの指示に基づき、Viewを更新します。これらのやりとりは全て単方向で行われることから、ModelとViewの関係がシンプルになり、その結果システムの構造もシンプルになり、機能追加の際のコード修正やテストもしやすくなります。

#CmsMembersControl .CmsMembersControlIn {width:100%;background:url(https://image.itmedia.co.jp/images/spacer.gif) #DDD;opacity:0.05;filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=5);z-index:1;}