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

by Hirokazu Hata

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

だれ ● full name:Hirokazu Hata ● github: h-michael ● twitter: h_michael_z ● freee株式会社でRubyとかJavaScriptとか書いてます ○ 最近関西支社が大阪にできました

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Flowの導入

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

● そうでなければ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

あとは npm run flow で実行！

Slide 9

Slide 9 text

● 最初に読むと良さそうなところ1 ○ 使い方(https://flow.org/en/docs/usage) ○ 型の付け方周り(https://flow.org/en/docs/types) ■ Opaque, Interface, Generic, Utilityの項はバリバリ使いだしてからよめば良いと思う ■ Try flow(https://flow.org/try) で動かしながら読み進めると吉

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

型をつけ始める

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

慣れてきたら

Slide 19

Slide 19 text

● とりあえずObjectで定義してたところをもっと詳細に定義する ○ Utility Type(https://flow.org/en/docs/types/utilities ) とか使ってみるともっと自分が定義したい形にできるかも ● 自分が手を入れるファイルが型が未定義だったら型を付けてから手を入れるという自分ルールを作る ○ 新規のファイルは型定義されてるのに昔からある神Moduleとかは一向に誰も型を付けないとかはありがち ○ 開発時に一度関係するModuleの仕様を確認しながら手を入れていくのでそのときに型を定義していく ○ プログラムは書く時間より読む時間のほうが長い、それを短くするため

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

❏ flow-typedを使ってみる ● flow-typedって何よ？ ○ 3rd partyのlibraryでそれがflowを使っていないprojectだと全部any にキャストされてしまうので困る！ ○ それでも型の(Flow)の恩恵を受けたい！ ○ 有志が作った型定義ファイルをcliからinstallするためのlibrary ○ TypeScriptでいうDefinitelyTyped

Slide 22

Slide 22 text

● 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)

Slide 23

Slide 23 text

● flow-typedについてよく言及されること2 ○ TypeScriptでいうDefinitelyTypedと比べると圧倒的に数が少ないし品質も微妙じゃない？ ■ 自分個人の印象ですがflow-typedにあるもので大体こと足りてる(仕事でも趣味でもReactを使っているからというのはあると思う) ■ 小さめのライブラリで定義がなかったらPRしていこ今はちゃんとmergeされていってる

Slide 24

Slide 24 text

※ 外部ライブラリを使っていてたまにハマること1 ● flowは外部ライブラリに*.flow.jsという命名のファイルがあると、それを型定義ファイルと認識して勝手に読み込んでいってくれる ● しかしながらそのライブラリが使っているflowのバージョンと自分のプロジェクトのflowのバージョンが違うせいで無慈悲なエラーがでて悩まされることがたまにある。 ● RFC(https://github.com/facebook/flow/issues/4917 ) は出ているけど話は進まず

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Flowのupgradeの話

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

❏ そういう目線でFlowのChangeLog.mdを見るとほぼ毎バージョンに「Likely to cause new Flow errors」というのがあることに気づく。要するに今まで検知できていなかったけど新しくFlowのエラーにできるケースを追加したよ！ということで、バージョンを上げることでより安全になるということなので、 Flowにとってはnew featureよりも大切なことだと思います。

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

❏ Upgradeの際に修正箇所が多かったり躓いたバージョン1 ● v0.41.0 ○ findDOMNodeの返り値がMaybeになった ○ キーボードイベント拾ってinputのfocus操作とかしているところに軒並みnullチェックが必要に ■ あるべき姿になってくれただけ ● v0.53.0 ○ Reactの型定義が変わった ■ Reactの型定義はFlow内で定義している ■ やること単純だけど置換スクリプト1発というわけにもいかず

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

❏ Immutable.js(特にImmutableRecord)どうしてる？ ● 同僚が取り組んだのでこちらを ○ FlowtypeでImmutable.Recordの型定義がつらい ■ tohashiさん ■ http://64.hateblo.jp/entry/2017/07/16/103527 ● Immutable.js-4.0.0-rc-9 の後にRecord周りの型定義に修正が加えられたのでちょっとはましになったかも？？

Slide 43

Slide 43 text

❏ 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

Slide 44

Slide 44 text

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