engineers_blog流行り言葉ばかりのタイトルになりました。フロントエンドエンジニアの平山です。https://recruit.moneyforward.com/というわけで、タイトルの通り、ReactとReactNativeで同じ動作をするTODOリストを作ってみました。React(ウェブ)です。ReactNative編はお手数ですが、READMEを参考に実行をお願いします。ReactNative-flux-todo試した理由と目的これを試した理由はいくつかあります。npmモジュールとかって動くのかJSの知識しかない僕でも動くものが作れんるんですかっ!?Flux的な実装をしたとき、StoreやAction使いまわせたら、効率的かもっ!といったあたりです。以下で分かったことを共有していきます。npmモジュールとかって動くのかfluxのTutorialで使われているモジュールは動きました。他のものも概ね動くようです。Poyfillがあるようで、対応しているものは使えるとのこと。ファーストインプレッションJSの知識しかない僕でも動くものが作れんるんですかっ!?ネイティブ未経験で半日程しか触ってないのですが、一通り動かすことができました。良い実装かは怪しいですが、Fluxな実装を取っていたため、基本的にComponentを書き換えるだけで動かすことができました。input要素などhtmlに慣れている方は、下記ページのcomponentsを見て、htmlとうまくマッピングさせるとよいかもしれません。StartedFlux的な実装をしたとき、StoreやAction使いまわせたら、効率的かもっ!ほぼ使い回すことができました。今回、全てのコードをindex.ios.jsに集約してしまったのですが、内容はReact編とほとんど変わりません。StoreのgetAll()に少し違いがあります。ReactではArrayでなくObjectでtodosを扱っているのですが、完了を変更するtoggleなどを行ったとき、ReactNativeでは動きませんでした。(ListViewのstateにしたListView.DataSourceが、Objectのkeyしか見てない?)そのため、ObjectをArrayに変換しています。anywhere」と謳っているとおり、ネイティブ未経験でもスムーズに入ることができました。フロント側でもModel(FluxでいうStore)にあたるものを持つ場合には、ある程度共通化を図れるため、開発効率の面でも有益かもしれません。深掘りしていくと、ReactNativeの良さと通常のネイティブの良さがわかってくるのかなと感じています。