See the Elephant

渋谷でWebプログラマをやっている25歳が書く日常ブログ

Fluxとは何か MVC, MVVMとの違いも含めて

動機

仕事で, React + Redux + TypeScirpt + WebPackを使うことになりそうなので学んでいく.
そもそもjsに疎いので探り探りやっていく.
間違えもあるかもしれないが, 徐々にやっていこう.

TL;DR

  • Fluxとは, アプリケーションのデータフロー管理のためのアーキテクチャパターン
  • イベント駆動であり, 一方向のデータフロー制御を行う
  • Fluxの特徴は, Viewで独立したデータを持つ, データ状態を一方向のフローで制御, Event駆動である.
  • FluxはAction, Dispatcher, Store, Viewの4要素で構成される.

Reduxとは

Reduxとは, Facebookが提唱, 開発しているJsApp.
jsにおいて, データの状態(データの流れ)を管理するためのツールである.
ReduxはFluxの実装と聞いたことがあるので, Reduxの前にFluxについて学んでいこう.
FluxもFacebookが提唱しているアーキテクチャである.

Fluxとは

qiita.com github.com

FB公式から抜粋

Flux is a pattern for managing data flow in your application.
The most important concept is that data flows in one direction.
Fluxとは, アプリケーションのデータフロー管理のためのアーキテクチャパターンである.   
もっとも重要なコンセプトは`データフローが一方向にしか流れないこと`である.  

JavaScriptでWebページのデータを制御する際に, データの状態制御が複雑になりやすい.

Fluxはデータの流れを一方向に限定することで状態遷移を単純にし, データ状態の複雑さを軽減させようとする考え方である.

あくまでも考え方なので, 実装は伴わない.
RESTの実装がHTTPのように, Fluxの実装がReduxという関係性なのかなと想像している.
Reduxの源流なので, Fluxから追っていこうと思う.

Fluxのアーキテクチャ

https://github.com/facebook/flux/raw/master/examples/flux-concepts/flux-simple-f8-diagram-with-client-action-1300w.png

図をみると, 4つのパーツから構成されていることがわかる.

  • Dispatcher
  • Store
  • Action
  • View

データは必ず以下の動作で変更されていく.

  1. 何らかのActionがあり(Apiからのレスポンス, ViewEvent), Dispatcher がその全てを受ける.
  2. DispatcherStoreActionを伝搬.
  3. Storeは, Dispatcherから受けたAction によってデータの状態を変更. change eventを発火する.
  4. Storeのデータ状態が Viewに渡される. change eventでトリガーされる.
  5. ViewStore から受けたデータを表示.
  6. Viewで何らかの Actionが発生. 1に戻る.

storeは必ずしも1つではなく複数個持てる.
todoアプリであれば, 未消化タスク, 消化済みタスクstoreを分けることが可能である.

https://camo.qiitausercontent.com/0c5e672d5d5c6a46a84a54d407fd8d5c3ca3a280/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3133343239342f34363066366666332d666434382d393839612d336633302d6135326330623863646339392e706e67

Fluxとはなんなのか より引用

Fluxのなにがいいのか

Fluxとはなんなのかより引用するが,
Fluxを導入すると以下のメリットがあると言える

  • ViewにEvent(Action)の発行元だけ持たせ, App全体をEventDrivenにした
  • Storeに状態や副作用を集約したことで, そこ以外では参照等価になった.
    • これにより, App全体の見通しがよくなった

個人的にまだよくわかっていないこと

MVC, MVVCとの違い

正直, MVC(Model/View/Controller)との違いがそれほど大きくわかってない. MVVC(Model/View/ViewModel/Contoller)もそうだが, Viewの中の話でほぼ終始しているような気がする.

一回整理してみよう

MVC

MVCについて振り返る. at-grandpa.hatenablog.jp より図を引用.

https://cdn-ak.f.st-hatena.com/images/fotolife/a/at_grandpa/20131101/20131101070231.png

ViewModelの状態を参照しているだけ.
ViewはあくまでもModelの状態を表示しているだけで, ユーザの入力はControllerを伝ってModelで処理されデータの状態が変化する. サーバサイドレンダリングで作ったページを思い浮かべると良さそう.
Viewの中でデータの状態そのものは気にせず, ユーザの明示的な操作(formのPOSTなど)としてフォームの値が渡ってくるイメージ.
(Viewの中でformデータなどの状態はあるがDOMで閉じる)

MVVM

qiita.com より図を引用.

https://camo.qiitausercontent.com/d92ae1332c66d98e07f9b0c830bb28f49a4b2804/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f31353930322f62336361613534312d313535662d346162642d373436632d3966303335323137646634382e6a706567

MVC の場合は, ViewModelを直接参照していた.
MVVM では, ViewModelの間にViewModelという中間層を置く.

  • ViewViewModelの状態を参照し, ViewModelは常にViewの入力を監視する.
  • Viewに対する入力(Event)があれば, 即座に検知してViewModelの状態が変わる.
  • 逆にViewModelの状態が変わればViewの表示が変更される.

これを, Two-way data Bindingと呼ぶ.

Modelの状態変更は, ユーザの明示的な操作(formのPOSTなど)によって行われる. このとき, ViewModelの状態がModelに反映される.

この図には, Controller が存在しないが ModelViewModelの間にControllerがある.
言い換えれば, MVVMCとなる.

Flux

f:id:namu_r21:20180321205524j:plain

Fluxの場合は, 上のような図になる. MVCと比較するためあえてMCを書いている.
Fluxは Fluxのアーキテクチャ で述べた通り, データフローが一方向に制御されるコンセプトを持っている.

こうやって見てみると, MCVで明確な境界線がある.
View側で独立のデータを持ち, データ状態の制御だけに関心をあてているのがFluxである.
Viewで独立のデータ構造をもつアプリケーション, と考えてしまえばMVVMとそう変わらない

MVVMと比較すると, ViewModelStoreとなり, データの方向制御のためにDispatcherが登場したという形になる. Fluxでは, EventActionと呼ぶためここは同義として見て良いだろう.

MVC, MVVM, Fluxの違い まとめ

こうやってMVC, MVVM, Fluxを同じ構成で見てみると,
実はどれもMVCの延長線上にあることがわかる. というか, そもそもVIewのデータフローアーキテクチャなのでMCとは関係ないものである. そもそも関心ごとが違うので比較するまでもなかった.

MVCMVVM, Fluxで大きく異なるのは, View側にサーバ(Model, Controller)とは独立したアプリケーションがあり, Viewで独立したデータ状態を持つ/制御することであろう.
ここさえ理解すれば, MVVM, Fluxはあくまでもデータフローが双方向か一方向かの違いしかないことに気づける.

まとめ

  • Fluxの特徴は, Viewで独立したデータを持つ, データ状態を一方向で制御, Event駆動である.
  • Actionを起因としたイベント駆動であり, 一方向のデータフロー制御を行うアーキテクチャ
  • FluxはAction, Dispatcher, Store, Viewの4要素で構成される.
  • MVVM, FluxはMVCの延長線上にある概念
  • MVCとの大きな違いは, Viewで独立したデータを持つことである.
  • MVVMとの大きな違いは, Viewのデータフローの方向性が一方向であることである.