Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What flow brings to React

78f5efc1e98c71e473cc7827de1c5db4?s=47 takanorip
August 25, 2017

What flow brings to React

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

August 25, 2017
Tweet

More Decks by takanorip

Other Decks in Technology

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をバケツリレーしてたりするところも、 そこに何が入っているかわかりやすくなった • 実行時エラーが減った

  12. None
  13. 親Component 子Component 孫Component propsのバケツリレー ↓ これは一体何者? props props

  14. つらみ

  15. つらかったこと • エラーが出てきたときに参考にできる情報が 少ない • 知見がない状態だと、何が正解なのかわから ない • 冗長な書き方になってしまう場合がある

  16. つらかったこと • チーム内でのモチベーションの共有が難しい • なくても動くので、「なんでやるのか?」を 共有していないと、ただ工数が増えるだけに 感じてしまう。

  17. まとめ

  18. まとめ • flowは後から入れても大丈夫 • 小さく入れてみると良いかも • 型チェックをすることで保守しやすいコード を書くことができる!