Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
無理せずflowtypeを導入していく
Search
Hirokazu Hata
April 20, 2018
1
770
無理せずflowtypeを導入していく
Hirokazu Hata
April 20, 2018
Tweet
Share
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
710
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Cult of Friendly URLs
andyhume
79
6.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Documentation Writing (for coders)
carmenintech
72
4.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Adaptive Systems
keathley
43
2.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Transcript
無理せずflowtypeを導入していく 関西Node学園 梅田キャンパス 1時限目 Hirokazu Hata/h-michael
だれ • full name:Hirokazu Hata • github: h-michael • twitter:
h_michael_z • freee株式会社でRubyとかJavaScriptとか書いてます ◦ 最近関西支社が大阪にできました
• Flowも着々とバージョン上がっているのだけど最近あまり話題を聞かない ので ◦ 簡単にFlowの導入の話とか ◦ Upgradeしていく上でのハマりポイントとか 今日お話したいこと
Flowの導入
• プロジェクトでBabelを使っていればインストールは
• そうでなければ
• ちなみに昔のドキュメントとか古い紹介記事だとちょっと違うので注意
あとは npm run flow で実行!
• 最初に読むと良さそうなところ1 ◦ 使い方(https://flow.org/en/docs/usage) ◦ 型の付け方周り(https://flow.org/en/docs/types) ▪ Opaque, Interface, Generic,
Utilityの項はバリバリ使いだしてから よめば良いと思う ▪ Try flow(https://flow.org/try) で動かしながら読み進めると吉
• 最初に読むと良さそうなところ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されないので。
型をつけ始める
はじめは無理に細かく型付けをしない
プロジェクトメンバー全員が型に馴染みがあるとは限らないので、 なんか面倒くさいという心理的ハードルを下げるためにもはじめの頃は以下く らい多少大雑把な型付けでいいかなとおもいます。 • Primitive, Array, Union, Object, Mixedでかける範囲で型を付ける •
Anyはなるべく使わずMixedかObjectを使うようにする
ObjectのpropertyがOptionalかどうか、 値がMaybe Typeかどうか迷う箇所はとりあえずOptional にもMaybeにもしない
Reactを使っているとよくあること - このComponentのこのpropsはrequiredなのかoptionalなのかはこれを利 用している他のComponentを全部見てみないといまいちわからん - PropTypesが定義されてはいるんだけど明らかに渡ってくる可能性が あるっぽいんだけど定義から漏れててrequiredなのかoptionalなのか わからん
そういうときはOptionalにしない • 他に利用しているComponentが何を渡しているかを地道に調べている といくら時間があってもたりない! • 仮にOptionalを前提として利用しているComponentがあったとしてもそ ちらに型を付けるときにErrorになるはずなのでそのとき直せばいい
慣れれば型の未定義なものでも1ファイル10分くらいで型付けが終わるの で10分でそこそこ安全な世界が得られる!
慣れてきたら
• とりあえずObjectで定義してたところをもっと詳細に定義する ◦ Utility Type(https://flow.org/en/docs/types/utilities ) とか使ってみるともっと自分が 定義したい形にできるかも • 自分が手を入れるファイルが型が未定義だったら型を付けてから手を
入れるという自分ルールを作る ◦ 新規のファイルは型定義されてるのに昔からある神Moduleとかは 一向に誰も型を付けないとかはありがち ◦ 開発時に一度関係するModuleの仕様を確認しながら手を入れて いくのでそのときに型を定義していく ◦ プログラムは書く時間より読む時間のほうが長い、それを短くする ため
3rd partyのライブラリでも型安全を手に入れたい
❏ flow-typedを使ってみる • flow-typedって何よ? ◦ 3rd partyのlibraryでそれがflowを使っていないprojectだと全部any にキャストされてしまうので困る! ◦ それでも型の(Flow)の恩恵を受けたい!
◦ 有志が作った型定義ファイルをcliからinstallするためのlibrary ◦ TypeScriptでいうDefinitelyTyped
• 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)
• flow-typedについてよく言及されること2 ◦ TypeScriptでいうDefinitelyTypedと比べると圧倒的に数が少ない し品質も微妙じゃない? ▪ 自分個人の印象ですがflow-typedにあるもので大体こと足り てる(仕事でも趣味でもReactを使っているからというのはある と思う) ▪
小さめのライブラリで定義がなかったらPRしていこ 今は ちゃんとmergeされていってる
※ 外部ライブラリを使っていてたまにハマること1 • flowは外部ライブラリに*.flow.jsという命名のファイルがあると、それを型 定義ファイルと認識して勝手に読み込んでいってくれる • しかしながらそのライブラリが使っているflowのバージョンと自分のプロ ジェクトのflowのバージョンが違うせいで無慈悲なエラーがでて悩まされる ことがたまにある。 •
RFC(https://github.com/facebook/flow/issues/4917 ) は出ているけど話は進まず
※ 外部ライブラリを使っていてたまにハマること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 )
Flowのupgradeの話
既にFlowを使っている皆さん、定期的にupgradeはしていますか?
❏ もしあまりupgradeしていないとしたら考えられそうな理由 • ん?バージョン上がってたんだ?知らんかったわ! • 他にやることたくさんあるから手を付けられない • 最近目新しいfeatureがそんなに入らないからほっといてた • etc....
• 他にやることたくさんあるから手を付けられない ◦ 一気に上げなくてもちょっとづつでいいので上げてみてください! (ためるとめちゃしんどい思います!後述)
• 最近目新しいfeatureがそんなに入らないからほっといてた ◦ 確かにv0.60.0くらいからは新しいUtility Typeとかが追加みたいな 目を引くものはありませんが…
❏ 今一度考えたい我々がFlowを使う理由 • イカしたSyntaxでカッコよく型をキメたい!! ◦ 違う、Utility Typeとかは型の表現力を上げるためのもので、より 型を細かくだったり抽象化したい人のための道具だ!
❏ 今一度考えたい我々がFlowを使う理由 型のないJavaScriptの世界でも型安全を手に入れて大規模なプロジェクト でも安心して運用しうる世界がほしい!
❏ そういう目線でFlowのChangeLog.mdを見ると ほぼ毎バージョンに「Likely to cause new Flow errors」というのがあること に気づく。 要するに今まで検知できていなかったけど新しくFlowのエラーにできる
ケースを追加したよ! ということで、バージョンを上げることでより安全になるということなので、 Flowにとってはnew featureよりも大切なことだと思います。
ということで皆さんFlowのバージョン上げていきましょう
Flowのupgradeするときの個人的なtips
❏ Upgradeの際に修正箇所が多かったり躓いたバージョン1 • v0.41.0 ◦ findDOMNodeの返り値がMaybeになった ◦ キーボードイベント拾ってinputのfocus操作とかしているところに 軒並みnullチェックが必要に ▪
あるべき姿になってくれただけ • v0.53.0 ◦ Reactの型定義が変わった ▪ Reactの型定義はFlow内で定義している ▪ やること単純だけど置換スクリプト1発というわけにもいかず
❏ Upgradeの際に修正箇所が多かったり躓いたバージョン2 • v0.63.0 ◦ setTimeoutとsetIntervalの戻り値の型がnumberからTimeoutIDと IntervalIDになった ▪ ChangeLogにないからdiffを見て解決
❏ 新しいバージョンがでたら1週間くらい様子見する • 自分の肌感だと3~4バージョンに一回くらいデグレの報告があって、 v0.xx.1がリリースされている印象があるので新しいバージョンがでる度に 1週間くらい置いてから特にデグレのissueがないか見てからupgradeして いる
❏ バージョンあげた時どれくらい新しいエラー出る? • 肌感でしか無いですが一例として • 今運用しているプロダクトでFlowで型定義しているファイルが976ファイル くらいあるようなのですが、だいたいFlowのバージョンを上げる度に平均し て新たに50個くらいエラーが検出されるようになる印象
❏ ドキュメントがupdateされていないんじゃない?1 • TypeScriptと比べられるときに良く言われるのはFlowはドキュメントがあま り充実していないということ。 • 確かに一時期ドキュメントに存在したはずのUtility Typesがドキュメントか らなくなったり(今はあります)、新しいUtility Typeが追加されてもドキュメン
トに反映されないとかはまだある気がします。
❏ ドキュメントが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 をみたりすると仕様がよくわ かります
❏ Immutable.js(特にImmutableRecord)どうしてる? • 同僚が取り組んだのでこちらを ◦ FlowtypeでImmutable.Recordの型定義がつらい ▪ tohashiさん ▪ http://64.hateblo.jp/entry/2017/07/16/103527
• Immutable.js-4.0.0-rc-9 の後にRecord周りの型定義に修正が加えられた のでちょっとはましになったかも??
❏ 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
ご静聴ありがとうございました