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

Transcript

1. 無理せずflowtypeを導入していく 関西Node学園 梅田キャンパス 1時限目 Hirokazu Hata/h-michael

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

   h_michael_z • freee株式会社でRubyとかJavaScriptとか書いてます ◦ 最近関西支社が大阪にできました

3. • Flowも着々とバージョン上がっているのだけど最近あまり話題を聞かない ので ◦ 簡単にFlowの導入の話とか ◦ Upgradeしていく上でのハマりポイントとか 今日お話したいこと

4. Flowの導入

5. • プロジェクトでBabelを使っていればインストールは

6. • そうでなければ

7. • ちなみに昔のドキュメントとか古い紹介記事だとちょっと違うので注意

8. あとは npm run flow で実行！

9. • 最初に読むと良さそうなところ1 ◦ 使い方(https://flow.org/en/docs/usage) ◦ 型の付け方周り(https://flow.org/en/docs/types) ▪ Opaque, Interface, Generic,

   Utilityの項はバリバリ使いだしてから よめば良いと思う ▪ Try flow(https://flow.org/try) で動かしながら読み進めると吉

10. • 最初に読むと良さそうなところ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されないので。

11. 型をつけ始める

12. はじめは無理に細かく型付けをしない

13. プロジェクトメンバー全員が型に馴染みがあるとは限らないので、 なんか面倒くさいという心理的ハードルを下げるためにもはじめの頃は以下く らい多少大雑把な型付けでいいかなとおもいます。 • Primitive, Array, Union, Object, Mixedでかける範囲で型を付ける •

    Anyはなるべく使わずMixedかObjectを使うようにする

14. ObjectのpropertyがOptionalかどうか、 値がMaybe Typeかどうか迷う箇所はとりあえずOptional にもMaybeにもしない

15. Reactを使っているとよくあること - このComponentのこのpropsはrequiredなのかoptionalなのかはこれを利 用している他のComponentを全部見てみないといまいちわからん - PropTypesが定義されてはいるんだけど明らかに渡ってくる可能性が あるっぽいんだけど定義から漏れててrequiredなのかoptionalなのか わからん

16. そういうときはOptionalにしない • 他に利用しているComponentが何を渡しているかを地道に調べている といくら時間があってもたりない！ • 仮にOptionalを前提として利用しているComponentがあったとしてもそ ちらに型を付けるときにErrorになるはずなのでそのとき直せばいい

17. 慣れれば型の未定義なものでも1ファイル10分くらいで型付けが終わるの で10分でそこそこ安全な世界が得られる！

18. 慣れてきたら

19. • とりあえずObjectで定義してたところをもっと詳細に定義する ◦ Utility Type(https://flow.org/en/docs/types/utilities ) とか使ってみるともっと自分が 定義したい形にできるかも • 自分が手を入れるファイルが型が未定義だったら型を付けてから手を

    入れるという自分ルールを作る ◦ 新規のファイルは型定義されてるのに昔からある神Moduleとかは 一向に誰も型を付けないとかはありがち ◦ 開発時に一度関係するModuleの仕様を確認しながら手を入れて いくのでそのときに型を定義していく ◦ プログラムは書く時間より読む時間のほうが長い、それを短くする ため

20. 3rd partyのライブラリでも型安全を手に入れたい

21. ❏ flow-typedを使ってみる • flow-typedって何よ？ ◦ 3rd partyのlibraryでそれがflowを使っていないprojectだと全部any にキャストされてしまうので困る！ ◦ それでも型の(Flow)の恩恵を受けたい！

    ◦ 有志が作った型定義ファイルをcliからinstallするためのlibrary ◦ TypeScriptでいうDefinitelyTyped

22. • flow-typedについてよく言及されること1 ◦ TypeScriptでいうDefinitelyTypedと比べると圧倒的に数が少ない し品質も微妙じゃない？ ▪ 1年くらい前までほぼ一人でメンテされてたからPRが上がって もなかなかmergeされんかったんや！ ▪ でもここ1年位でメンテナーが3人くらい増えて活発になってき

    た (https://github.com/flowtype/flow-typed/issues/1296 , https://github.com/flowtype/flow-typed/issues/1816 ) ▪ 428ライブラリ/バージョン違い含めると509(TSは3,305)

23. • flow-typedについてよく言及されること2 ◦ TypeScriptでいうDefinitelyTypedと比べると圧倒的に数が少ない し品質も微妙じゃない？ ▪ 自分個人の印象ですがflow-typedにあるもので大体こと足り てる(仕事でも趣味でもReactを使っているからというのはある と思う) ▪

    小さめのライブラリで定義がなかったらPRしていこ 今は ちゃんとmergeされていってる

24. ※ 外部ライブラリを使っていてたまにハマること1 • flowは外部ライブラリに*.flow.jsという命名のファイルがあると、それを型 定義ファイルと認識して勝手に読み込んでいってくれる • しかしながらそのライブラリが使っているflowのバージョンと自分のプロ ジェクトのflowのバージョンが違うせいで無慈悲なエラーがでて悩まされる ことがたまにある。 •

    RFC(https://github.com/facebook/flow/issues/4917 ) は出ているけど話は進まず

25. ※ 外部ライブラリを使っていてたまにハマること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 )

26. Flowのupgradeの話

27. 既にFlowを使っている皆さん、定期的にupgradeはしていますか？

28. ❏ もしあまりupgradeしていないとしたら考えられそうな理由 • ん？バージョン上がってたんだ？知らんかったわ！ • 他にやることたくさんあるから手を付けられない • 最近目新しいfeatureがそんなに入らないからほっといてた • etc....

29. • 他にやることたくさんあるから手を付けられない ◦ 一気に上げなくてもちょっとづつでいいので上げてみてください！ (ためるとめちゃしんどい思います！後述)

30. • 最近目新しいfeatureがそんなに入らないからほっといてた ◦ 確かにv0.60.0くらいからは新しいUtility Typeとかが追加みたいな 目を引くものはありませんが…

31. ❏ 今一度考えたい我々がFlowを使う理由 • イカしたSyntaxでカッコよく型をキメたい！！ ◦ 違う、Utility Typeとかは型の表現力を上げるためのもので、より 型を細かくだったり抽象化したい人のための道具だ！

32. ❏ 今一度考えたい我々がFlowを使う理由 型のないJavaScriptの世界でも型安全を手に入れて大規模なプロジェクト でも安心して運用しうる世界がほしい！

33. ❏ そういう目線でFlowのChangeLog.mdを見ると ほぼ毎バージョンに「Likely to cause new Flow errors」というのがあること に気づく。 要するに今まで検知できていなかったけど新しくFlowのエラーにできる

    ケースを追加したよ！ ということで、バージョンを上げることでより安全になるということなので、 Flowにとってはnew featureよりも大切なことだと思います。

34. ということで皆さんFlowのバージョン上げていきましょう

35. Flowのupgradeするときの個人的なtips

36. ❏ Upgradeの際に修正箇所が多かったり躓いたバージョン1 • v0.41.0 ◦ findDOMNodeの返り値がMaybeになった ◦ キーボードイベント拾ってinputのfocus操作とかしているところに 軒並みnullチェックが必要に ▪

    あるべき姿になってくれただけ • v0.53.0 ◦ Reactの型定義が変わった ▪ Reactの型定義はFlow内で定義している ▪ やること単純だけど置換スクリプト1発というわけにもいかず

37. ❏ Upgradeの際に修正箇所が多かったり躓いたバージョン2 • v0.63.0 ◦ setTimeoutとsetIntervalの戻り値の型がnumberからTimeoutIDと IntervalIDになった ▪ ChangeLogにないからdiffを見て解決

38. ❏ 新しいバージョンがでたら1週間くらい様子見する • 自分の肌感だと3~4バージョンに一回くらいデグレの報告があって、 v0.xx.1がリリースされている印象があるので新しいバージョンがでる度に 1週間くらい置いてから特にデグレのissueがないか見てからupgradeして いる

39. ❏ バージョンあげた時どれくらい新しいエラー出る？ • 肌感でしか無いですが一例として • 今運用しているプロダクトでFlowで型定義しているファイルが976ファイル くらいあるようなのですが、だいたいFlowのバージョンを上げる度に平均し て新たに50個くらいエラーが検出されるようになる印象

40. ❏ ドキュメントがupdateされていないんじゃない？1 • TypeScriptと比べられるときに良く言われるのはFlowはドキュメントがあま り充実していないということ。 • 確かに一時期ドキュメントに存在したはずのUtility Typesがドキュメントか らなくなったり(今はあります)、新しいUtility Typeが追加されてもドキュメン

    トに反映されないとかはまだある気がします。

41. ❏ ドキュメントが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 をみたりすると仕様がよくわ かります

42. ❏ Immutable.js(特にImmutableRecord)どうしてる？ • 同僚が取り組んだのでこちらを ◦ FlowtypeでImmutable.Recordの型定義がつらい ▪ tohashiさん ▪ http://64.hateblo.jp/entry/2017/07/16/103527

    • Immutable.js-4.0.0-rc-9 の後にRecord周りの型定義に修正が加えられた のでちょっとはましになったかも？？

43. ❏ 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

44. ご静聴ありがとうございました