SCOUTER 社でエンジニアをしている匠平(@show60)です。
突然ですが、私は Flux の無い世界を知りません。
エンジニアとして物心ついた時には、すでに世の中に Flux が存在していました。
開発業務では Vue.js (Nuxt.js) で Vuex を使用して開発していますが、改めて Flux の登場した背景を知ることは Vuex や Flux を理解する上で重要かと思いますので、あらためて調べてみました。
Flux が解決した問題
Flux が広く世に出たのは 2014 年の Facebook の開発者カンファレンス「 F8 」です。
既存の MVC パターンを放棄し、より機能的なアーキテクチャを支持する方法として紹介されています。
Hacker Way: Rethinking Web App Development at Facebook
(YouTube, 2014/05/04)](https://youtu.be/nYkdrAPrdcw)
Delivering reliable, high-performance web experiences at Facebook's scale has required us to challenge some long-held assumptions about software development. Join us to learn how we abandoned the traditional MVC paradigm in favor of a more functional application architecture.
React 以前のアーキテクチャ
JavaScript のフレームワークとして人気となった AngularJS の登場が 2010 年 10 月。
当時のフロントエンドのフレームワークにおけるアーキテクチャの原則は、すでにサーバーサイドで確立されていた MVC モデルを拝借する形で作られていました。
They borrowed practices that were already well established for server-side architecture. And at that moment, all the popular server-side frameworks involved some sort of implementation of the classic MVC model (also known as MV* because of its variations).
参考: Is Model-View-Controller dead on the front end?
React の登場
AngularJS の登場から約 2 年半後の 2013 年 5 月、 JSConf US で React が オープンソース化されました。
Facebook は、この MVC モデルをあらゆる箇所で実験したが、コード量が多く、開発が大きくなるとあらゆることが急激に複雑になることが分かったそう。
上記の動画では、そのデータフローについて "unpredictable" 、「予測不可能」という言葉を使い、フロントエンドフレームワークと MVC モデルが不適合であることを表現しています。
この問題を解決するため、 Flux パターンが考えられました。
Flux is a pattern for managing data flow in your application. The most important concept is that data flows in one direction.
Flux とはアプリケーション上のデータを管理するパターンの一つ。
最も重要なコンセプトは、データの流れを単一方向にする、ということです。
Flux はどのように問題を解決するか
Flux とは設計概念と原則のことで、その実装方法を限定しているものではありません。
データの流れを単一方向にすることを設計概念とし、
データの流れを Action, Dispathcer, Store, View で構成することを原則としています。
flux/examples/flux-concepts at master · facebook/flux · GitHub
データの状態は Store が持っていますが、 Action から Dispatcher を経由しないとそれに変更を加えられないという強い制約があります。
Flux がデータの流れにこの強い制約を与えることで、 Store を安全な状態に保つことができます。
Store の状態を予測可能にできることで、 MVC モデルで抱えていた複雑さの問題を解決しているというわけです。
Vuex と Flux
React で Flux パターンを実現するためのライブラリとして最も人気のあるのが Redux。
Vuex は Flux, Redux などから影響を受けた状態管理のライブラリです。
上記の通り、 Flux はその実装方法を限定していませんが、 Vuex もその構造化する方法を制限していません。
「原理原則を守ろう」と強調しています。
- アプリケーションレベルの状態はストアに集約されます。
- 状態を変更する唯一の方法は、同期的に処理を行うミューテーションをコミットすることのみです。
- 非同期的なロジックはカプセル化されるべきであり、それはアクションによって構成されます。
これらのルールに従っている限り、プロジェクトをどのように構造化するかはあなた次第です。 と記述されており、制限を持ちながらも柔軟な実装方法を許可しています。
開発チームやプロジェクトによって変えられるということは、チームやプロジェクトによって一定のルールを決める必要があるということですね。
最低限持つべきルールとして、 弊社の石岡が書いた記事がとてもわかり易いので、ぜひこちらもご参考ください。
まとめ
過去の記事を振り返って見ると、フレームワークの登場からしばらくの間、フロントエンドのアーキテクチャは長い答え探しのだったようにも思えます。
Flux パターンが世に出て 5 年が経ち、 React のみでなく Vue.js やそのユーザーからも支持されているということは、フロントエンドのアーキテクチャの一つの答えであるということでしょう。
その恩恵を受けて楽しく開発ができていることに、感謝を惜しんではいけません。
Flux を考えた人たちに足を向けて眠れないですね。
さいごに
私達 SCOUTER では、一緒にプロダクト開発を行うエンジニア、デザイナーを募集しています。
ぜひご応募ください！
