ReactとReactNativeでFluxなTODOを実装してみた話

流行り言葉ばかりのタイトルになりました。フロントエンドエンジニアの平山です。
先に言っておきますと、マネーフォワードでは流行り言葉を使いこなすフロントエンドエンジニアを募集しています！！！

とりあえず押してからでも遅くはない！
マネーフォワード 採用情報　https://recruit.moneyforward.com/

というわけで、タイトルの通り、ReactとReactNativeで同じ動作をするTODOリストを作ってみました。

デモ

React-flux-todo デモ

※ React（ウェブ）です。ReactNative編はお手数ですが、READMEを参考に実行をお願いします。

[React編] React-flux-todo[ReactNative編] ReactNative-flux-todo

試した理由と目的

これを試した理由はいくつかあります。

npmモジュールとかって動くのかJSの知識しかない僕でも動くものが作れんるんですかっ！？Flux的な実装をしたとき、StoreやAction使いまわせたら、効率的かもっ！

といったあたりです。以下で分かったことを共有していきます。

npmモジュールとかって動くのか

fluxのTutorialで使われているモジュールは動きました。
他のものも概ね動くようです。Poyfillがあるようで、対応しているものは使えるとのこと。
参考: React Native ファーストインプレッション

JSの知識しかない僕でも動くものが作れんるんですかっ！？

ネイティブ未経験で半日程しか触ってないのですが、一通り動かすことができました。
良い実装かは怪しいですが、Fluxな実装を取っていたため、基本的にComponentを書き換えるだけで動かすことができました。
input要素などhtmlに慣れている方は、下記ページのcomponentsを見て、htmlとうまくマッピングさせるとよいかもしれません。
React Native – Getting Started

Flux的な実装をしたとき、StoreやAction使いまわせたら、効率的かもっ！

ほぼ使い回すことができました。今回、全てのコードをindex.ios.jsに集約してしまったのですが、内容はReact編とほとんど変わりません。
ですが、StoreのgetAll()に少し違いがあります。ReactではArrayでなくObjectでtodosを扱っているのですが、完了を変更するtoggleなどを行ったとき、ReactNativeでは動きませんでした。（ListViewのstateにしたListView.DataSourceが、Objectのkeyしか見てない？）
そのため、ObjectをArrayに変換しています。イケてない感満載なので、解決法や良い方法があれば、ぜひお声掛けください！

まとめ

「learn once, write anywhere」と謳っているとおり、ネイティブ未経験でもスムーズに入ることができました。
特にフロント側でもModel（FluxでいうStore）にあたるものを持つ場合には、ある程度共通化を図れるため、開発効率の面でも有益かもしれません。
もっと深掘りしていくと、ReactNativeの良さと通常のネイティブの良さがわかってくるのかなと感じています。
実用に関しては技術面・体制面、それぞれ利点や欠点があると思いますが、UI周りはサクッと仕上げることができるので、モックなんかには向いているのかもしれませんね！