と思っていたんですが、意外とそうでもなくて、アプリの骨子をReact標準のPropsとStateだけで組んでから、複雑度が増してきた段階でReduxやMobXを導入しても遅くないんだなぁというのが最近ようやく分かったので、道のりをまとめておこうと思います。
また、ReduxとMobXを両方試してみての感想も後半に書いてみました。
なお、Reduxについての言及が多めですが、これは「Reduxは5時間ぐらい試して上手く行かなかったけど、MobXは1時間で上手くいくようになった」というだけの話ですので、特に意図はないです。
GoogleHomeでパソコン起動させるやつです pic.twitter.com/AQf0OOzdKd
— 八遊菜 (@happou31) 2018年3月6日
我が家にもGoogle Home miniが来たので、色々遊んでみました。
ざっくりこういう仕組みです↓
Switch落とした…ありえんけど…
— すっごーい菜 (@happou31) 2017年9月24日
となってから、
ｳｵｵｵｵｵｵｵｵｵｵｵｵｵｵｵｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱｱ!!!!!!!!!!!!!!! pic.twitter.com/9tLSLc0bPX
— すっごーい菜 (@happou31) 2017年10月4日
こうなるまでの話です。
ポイントは2つです。
ニンテンドーアカウントとダウンロードソフトについては権利がガチガチなイメージがありましたが、特に任天堂と揉めたということはなく、非常に丁寧かつ素早く(2回問い合わせて合計4営業日)対応して頂けました。本当にありがとうございました。
以下は、どうしてこうなったかを時系列順にお話しします。
Angular4でも2でも動くと思うけど4って書いたほうがかっこいいかなと思って。
Angular4でComponentを書いてるとしばしば次のような問題にブチ当たります。
最初から適切に画面の分割ができていればいいんですが、実際のプロダクトだと設計書の段階ですでに闇鍋だったりして、頑張ってServiceにロジックを詰め込んでも、一つのcomponent.tsがUI操作だけで2000行とかになったりして無事に死にます。
これに対する応急措置として、親子関係を作ってComponentを分割するというのがありますが、FormGroupを使って入力値の管理をしている場合は一筋縄では行きません。(僕は行きませんでした)
特に、親元のFormGroupの中にFormArrayが入っていてるときに、その部分を分割しようとすると、子Componentから直接親のFormGroupが見えないため、Cannot read property 'getFormArray' of nullようなエラーが出て上手く動きません。
公式ドキュメントもイマイチ参考にならなかったので色々試行錯誤したところ、ようやくうまくいく方法が見つかったので、覚え書きしておきます。
