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

無理せずflowtypeを導入していく

Hirokazu Hata
April 20, 2018
740

 無理せずflowtypeを導入していく

Hirokazu Hata

April 20, 2018
Tweet

Transcript

  1. だれ • full name:Hirokazu Hata • github: h-michael • twitter:

    h_michael_z • freee株式会社でRubyとかJavaScriptとか書いてます ◦ 最近関西支社が大阪にできました
  2. • 最初に読むと良さそうなところ1 ◦ 使い方(https://flow.org/en/docs/usage) ◦ 型の付け方周り(https://flow.org/en/docs/types) ▪ Opaque, Interface, Generic,

    Utilityの項はバリバリ使いだしてから よめば良いと思う ▪ Try flow(https://flow.org/try) で動かしながら読み進めると吉
  3. • 最初に読むと良さそうなところ2 ◦ Flow内で定義されている型のチートシート (https://www.saltycrane.com/flow-type-cheat-sheet ) ▪ React, React DOM,

    DOM, Event, Nodeとかの定義とかしょっちゅ う使わないけどあれなんだっけ?っていうときに見る ◦ Editorの設定(https://flow.org/en/docs/editors) ▪ Language Server Protocolが使えるEditorなら flow-language-server もおすすめです。特にvim-flowはPRがな かなかmergeされないので。
  4. • とりあえずObjectで定義してたところをもっと詳細に定義する ◦ Utility Type(https://flow.org/en/docs/types/utilities ) とか使ってみるともっと自分が 定義したい形にできるかも • 自分が手を入れるファイルが型が未定義だったら型を付けてから手を

    入れるという自分ルールを作る ◦ 新規のファイルは型定義されてるのに昔からある神Moduleとかは 一向に誰も型を付けないとかはありがち ◦ 開発時に一度関係するModuleの仕様を確認しながら手を入れて いくのでそのときに型を定義していく ◦ プログラムは書く時間より読む時間のほうが長い、それを短くする ため
  5. ※ 外部ライブラリを使っていてたまにハマること2 • flow-typedはflowのバージョンを指定して型定義できるので自分のflowの バージョンに合った型定義をインストールすればよい(もちろん自分の使っ ているバージョンの定義があるとは限らない、そんなときは他のバージョ ンの定義があればそれをもとに作ってPR!!) • 使っているライブラリが *.flow.js

    を定義しているけどバージョン管理した いという理由でflow-typedへ移動を促したりするも、ownerの手を離れるこ とになるので断られることが多い(https://github.com/facebook/immutable-js/issues/1365 , https://github.com/react-navigation/react-navigation/issues/3146 )
  6. ❏ そういう目線でFlowのChangeLog.mdを見ると ほぼ毎バージョンに「Likely to cause new Flow errors」というのがあること に気づく。 要するに今まで検知できていなかったけど新しくFlowのエラーにできる

    ケースを追加したよ! ということで、バージョンを上げることでより安全になるということなので、 Flowにとってはnew featureよりも大切なことだと思います。
  7. ❏ Upgradeの際に修正箇所が多かったり躓いたバージョン1 • v0.41.0 ◦ findDOMNodeの返り値がMaybeになった ◦ キーボードイベント拾ってinputのfocus操作とかしているところに 軒並みnullチェックが必要に ▪

    あるべき姿になってくれただけ • v0.53.0 ◦ Reactの型定義が変わった ▪ Reactの型定義はFlow内で定義している ▪ やること単純だけど置換スクリプト1発というわけにもいかず
  8. ❏ ドキュメントがupdateされていないんじゃない?2 • なのでFlowの仕様追加、変更を追うのは Changelog.md(https://github.com/facebook/flow/blob/master/Changelog.md ) をみるのが一番楽とい うのが現状かと思います。 • ドキュメントにのってなかったり、Changelog.mdだけだとよくわからないなと

    いうときはレポジトリの /test を見ます。 • 例えば今だと$Composeがドキュメントにはないので https://github.com/facebook/flow/blob/master/tests/compose/recompose.js をみたりすると仕様がよくわ かります
  9. ❏ Flow関係で個人的に面白かった記事とか • Flowtype+reduxにおけるreducerの正しい型付け ◦ akamecoさん ◦ https://qiita.com/akameco/items/fe7ba22c158a2593b077 • swagger-to-flowtypeでswaggerファイルからFlow

    type aliasを作成する ◦ yayoc_さん ◦ http://blog.yayoc.com//js/2017/06/19/swagger-to-flowtype.html • なぜ TypeScript の型システムが健全性を諦めているか ◦ na-o-ysさん ◦ https://qiita.com/na-o-ys/items/aa56d678cdf0de2bdd79