What flow brings to React

Transcript

1. What flow brings to React Takanori Oki
2. 目次 • 自己紹介 • flow? • Reactにもたらすもの • まとめ
3. 自己紹介
4. 大木尊紀 ( takanorip ) • フロントエンドエンジニア • 株式会社スマートドライブ • 最近のハイライト：
 Facabookのライセンス問題
 エウレカセブン・ハイエボリューション
5. flow ?
6. flow • Facebook製のJavaScript静的型チェッカー • 言語ではなく外部ライブラリ • nullやundefinedにとても厳しい
7. flowは JSに静的型の概念をもたらす
8. 詳しい導入方法を知りたい方は 下の記事へGO! Reactにflowtypeを導入したまとめ
9. flowがくれたもの
10. flowのいいところ • 小さく試せる
 →レガシーな環境下でも使える • AltJSではないのでESの機能すべて使える • Reactと相性がいい
11. flowを導入してよかったこと • reduxまわりの見通しがよくなった • propsをバケツリレーしてたりするところも、 そこに何が入っているかわかりやすくなった • 実行時エラーが減った
13. 親Component 子Component 孫Component propsのバケツリレー ↓ これは一体何者？ props props
14. つらみ
15. つらかったこと • エラーが出てきたときに参考にできる情報が 少ない • 知見がない状態だと、何が正解なのかわから ない • 冗長な書き方になってしまう場合がある
16. つらかったこと • チーム内でのモチベーションの共有が難しい • なくても動くので、「なんでやるのか？」を 共有していないと、ただ工数が増えるだけに 感じてしまう。
17. まとめ
18. まとめ • flowは後から入れても大丈夫 • 小さく入れてみると良いかも • 型チェックをすることで保守しやすいコード を書くことができる！