Flux入門してみた

Fluxとは?

Fluxはアプリケーションアーキテクチャの1つです。要は"こんな構造でアプリを構成すると見通しが良くなるよ"というような方針みたいなものですね。

元々はFacebookが提唱した考え方で、Reactと共に用いられるアーキテクチャです。

Reactでアプリを構築する際に、ある程度アプリが複雑になってくるとデータやイベントの流れが判りにくくなるので、Fluxの考え方を利用することで綺麗にまとめられるようになります。

こちらの記事にも少し詳しく紹介されています。最初見た時はちょっと複雑そうで拒否反応が起こりましたが、実際触ってみるとそんなでもないので大丈夫です。

で、Fluxの考え方を実際にコードに落とした実装はいくつもあり、どれを使うか迷います。 今回はわかり易そうだったFluxxorRefluxJSを使って簡単なアプリを作ってみました。

つくってたもの

B-Viewer はてなブックマークのホットエントリを閲覧するためのChrome拡張機能です。Fluxxorを使用しています。

f:id:gibachan03:20150406164038p:plain

piccheck 画像ファイルに埋め込まれているEXIFのデータを閲覧するWebアプリです。Refluxを使用しています。

f:id:gibachan03:20150406164033p:plain

感想

Fluxの考え方ではデータやイベントの流れが常に一方向に流れます。

データの流れ  : Store -> View
イベントの流れ:          View -> Action -> Store 

(かなり簡略化しています。詳しくは上記の記事をご覧下さい)

これが意識できるとアプリの構造をシンプルに考えられます。ReactはVirtualDOMについて良く取り上げられてるみたいですが、React & Fluxでアプリの構造全体がシンプルに記述できるところが個人的に気に入りました。

FluxxorもRefluxJSも基本的には考え方は同じだし、正直どちらも簡単なアプリだったので、あんまり比較はなりませんでしたね。 個人的にはRefluxの方がActioins等が簡略的に書けるので好みです。 ただRefluxJSについてはネット上の情報が少ないようです。 せっかくなので、後で使い方の解説みたいなものを書けたらと思っています。

もしこれから始めてみようという方の参考になればと思い、ここで公開しておきます。