- アーキテクト(バックエンド)
- プロダクトマネージャー
- カスタマーサポートMFK
- 他90件の職種
-
開発
- アーキテクト(バックエンド)
- Railsエンジニア
- アーキテクト(フロントエンド)
- Webエンジニア
- エンジニアリングマネージャー
- バックエンドエンジニア/MFK
- フルスタックエンジニア
- MOpsエンジニア
- フロントエンドマネージャー
- バックエンドエンジニア
- Webフロントエンド
- Webエンジニア
- サーバーサイドエンジニア
- フロントエンジニア
- エンジニア@京都
- エンジニア@大阪
- エンジニア オープンポジション
- エンジニアマネージャー
- Rails@京都
- バックエンド@BFW
- Androidエンジニア
- iOSエンジニア
- SRE
- クラウドエンジニア
- SRE、インフラエンジニア
- テスト自動化エンジニア
- QAエンジニア
- エンジニアリング
- エンジニア職
- コーポレートエンジニア
- マーケティングエンジニア
- Webアナリティクスエンジニア
- SDET
- QA関連職種オープンポジション
- データアナリスト
- セキュリティエンジニア
- コミュニケーションデザイナー
- UIデザイナー
- プロダクトデザイナー
- デザイナーオープンポジション
- グラフィックデザイナー
-
ビジネス
- プロダクトマネージャー
- スクラムマスター
- プロダクトマネージャー
- リスク管理
- グローバル採用担当者
- グローバル採用担当
- 金融コンプライアンス
- 新卒採用リクルーター
- エンジニア採用担当
- 中途採用担当
- 労務
- システム監査
- ビジネス採用担当
- 経営企画(予実・IR)
- HRBP
- 法務
- 債権管理/MFK
- セールス・事業開発
- 新規事業開発
- ビジネス職
- フィールドセールス
- セールスマネージャー候補
- インサイドセールス SDR
- インサイドセールス企画
- オンラインセールス
- SaaS営業、MFBC
- インサイドセールス MFBC
- セールス MFBC
- マーケター
- マーケティング
- サービス企画
- データマーケター
- BtoBマーケティングリーダー
- CRMスペシャリスト
- WEBマーケティング(B2B)
- Webマーケティング
- デジタルマーケター
- イベントマーケター
- コンテンツマーケ MFBC
- SEO MFBC
- その他
ReactとReactNativeでFluxなTODOを実装してみた話
流行り言葉ばかりのタイトルになりました。フロントエンドエンジニアの平山です。
先に言っておきますと、マネーフォワードでは流行り言葉を使いこなすフロントエンドエンジニアを募集しています!!!
とりあえず押してからでも遅くはない!
マネーフォワード 採用情報 https://recruit.moneyforward.com/
というわけで、タイトルの通り、ReactとReactNativeで同じ動作をする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周りはサクッと仕上げることができるので、モックなんかには向いているのかもしれませんね!