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
Shin Suzuki
November 04, 2016
Programming
16
5.3k
実践投入してわかったflowtypeのメリデメ
facebook製の型チェッカ、flowを実践投入してみた結果、分かった良さと辛さを詰め込みました。
Shin Suzuki
November 04, 2016
Tweet
Share
More Decks by Shin Suzuki
See All by Shin Suzuki
9年開発を牽引して見えてきた、共通化すべきものと個別でつくるもの ~プログラム言語~
shinout
1
1.1k
マルチプラットフォーム時代のReact / React Native / Universal JS
shinout
6
2.5k
Other Decks in Programming
See All in Programming
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
500
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
400
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
140
Swift Concurrency - 状態監視の罠
objectiveaudio
2
480
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
450
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.6k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
110
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
630
私はどうやって技術力を上げたのか
yusukebe
43
18k
CSC509 Lecture 05
javiergs
PRO
0
300
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
650
Featured
See All Featured
Making Projects Easy
brettharned
119
6.4k
Navigating Team Friction
lara
189
15k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Into the Great Unknown - MozCon
thekraken
40
2.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Embracing the Ebb and Flow
colly
88
4.8k
We Have a Design System, Now What?
morganepeng
53
7.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Producing Creativity
orderedlist
PRO
347
40k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Transcript
A STATIC TYPE CHECKER FOR JAVASCRIPT ࣮ફೖͯ͠Θ͔ͬͨ @shinout CureApp presents
ͷϝϦσϝ
プリで治療する未来を創造する ア 提 供 キュア・アップ JavaScriptエンジニア 絶 賛 募 集
中!
CONTENTS ωοτͰर͑Δflowͷಛ ͔ͬͯͬͨflowͷྑ͞ ͔ͬͯͬͨflowͷਏ͞ ͦΕͰflowΛ͏͖ཧ༝
CONTENTS ωοτͰर͑Δflowͷಛ ͔ͬͯͬͨflowͷྑ͞ ͔ͬͯͬͨflowͷਏ͞ ͦΕͰflowΛ͏͖ཧ༝
JSͷ੩తܕνΣοΧ facebook ΞϊςʔγϣϯbabelͰऔΓআ͘ ݴޠͰͳ͍ ঃʑʹಋೖͰ͖Δ ڧྗͳܕਪ nullʹڧ͍ ωοτͰर͑Δflowͷಛ flow is
flowJSͷΑ͋͘ΔόάΛະવʹ͙͜ͱ͕Ͱ͖Δ flow can catch common bugs in JavaScript programs before
they run flow͕ެࣜαΠτͷ1ߦʹݴ͍ͬͯΔ͜ͱ
JSͷΑ͋͘ΔόάΛະવʹ͙ ௨ৗͷJSʹજΉจࣈྻͷόά ະવʹ͛Δ ྫ͑form͔ΒདྷΔೖྗͩͬͨΒ?
JSͷΑ͋͘ΔόάΛະવʹ͙ ௨ৗͷJSʹજΉnullableͳΦϒδΣΫτͷΞΫηεͷόά ະવʹ͛Δ ΨʔυઅಋೖΛͪΌΜͱݟͯ͘ΕΔ ͜ΕͰౖΒΕͳ͘ͳΔ
flowݴޠͰͳ͍ɻ ΞϊςʔγϣϯͷͨΊͷจ๏࣮ߦ࣌ʹͯ͢औΓআ͔ΕΔɻ babel
͓·͚: facebookͱMicrosoftͷࢥͷҧ͍ʹ͍ͭͯ ϑϨʔϜϫʔΫ શ෦ೖΓ ڥΛ౷Ұ͢Δ ϥΠϒϥϦɺπʔϧ Έ߹Θͤࣗ༝ બࢶΛఏڙ͢Δ
CONTENTS ωοτͰर͑Δflowͷಛ ͔ͬͯͬͨflowͷྑ͞ ͔ͬͯͬͨflowͷਏ͞ ͦΕͰflowΛ͏͖ཧ༝
͜ΜͳflowΛ࣮ࡍʹ ϓϩδΣΫτͰಋೖͯ͠Έͨɻ
ϓϩδΣΫτ֓ཁ Desktop App Mobile App Universal Domain MBaaS ! "
# React Native $ DB React Electron
flowಋೖͰΑ͔ͬͨ͜ͱ
ಋೖ͕γϯϓϧ 1. npm i -D flow-bin ੩తղੳπʔϧͱͯ͠ɺ lintͱಉ༷ͷཱͪҐஔͰѻ͏ײ͡ɻ 2. npm
i -D babel-plugin-transform-flow-strip-types 3. /* @flow */ pragmaを各ファイルの先頭行に入れる。 4. $(npm bin)/flow init で .flowconfigファイルを作成
ͱʹ͔͘nullʹڧ͍ nullରԠ͕໘͗ͯ͢ɺnullΛฦ͢APIΛΊ throwͷ΄͏ʹ͢ɺ҉ͷن͕Ͱ͖ͨɻ nullは返さずエラーにしないと! なければnull返せばいいかなぁ
NodeBrowserͷAPIͷαϙʔτ͕ॆ࣮ جຊతͳAPIཏ͞Ε͍ͯΔɻ
࠷ݶͷΞϊςʔγϣϯͰॆ͏Ε͍͠ number, string, boolean, Array, Ϋϥεఆٛ ͙Β͍Ͱॆػೳ͢Δɻ React / React
Nativeपลٕज़ͷܕαϙʔτ͞Ε͍ͯΔͷͰɺ ҙ֎ʹɺ֎෦ϥΠϒϥϦͷܕఆ͕ٛͳͯͦ͘͜·Ͱਏ͘ͳ͍ɻ ٯʹflow-typedͷἧ͑ѱ͍··ɻɻɻ
2ճҎ߱ͷνΣοΫ͕ߴ ॳճͷflowίϚϯυͰαʔόʔ্ཱ͕͕ͪΓ 2ճҎ߱ඞཁͳ෦͚ͩܕνΣοΫ͢Δɻ Ωϟογϡ͏ɻ
ΤσΟλׂ͕ͱؤு͍ͬͯͨ facebookͷnuclide͕flowΛۦͯ͠ɺ ิΤϥʔΛग़ͯ͘͠ΕΔɻ
CONTENTS ωοτͰर͑Δflowͷಛ ͔ͬͯͬͨflowͷྑ͞ ͔ͬͯͬͨflowͷਏ͞ ͦΕͰflowΛ͏͖ཧ༝
node_modulesԼͷϑΝΠϧͰౖͬͯ͠·͏ ར༻ଆ͕ઃఆϑΝΠϧ(.flowconfig)ʹॻ͖ࠐΉඞཁ͕͋Δɻ (ଟ͘ɺґଘͷґଘͷґଘ͙Β͍ͷmoduleͳͷʹ) node_modulesʹ͋ΔΤϥʔͰౖΔɻ ΄ͱΜͲۭͷjsonϑΝΠϧʹର͢Δparse error
ઃఆϑΝΠϧ(.flowconfig)ͷਖ਼نදݱ͕ΧΦε OCamlͷਖ਼نදݱΛ͞ΒʹΤεέʔϓͨ͠ͷΒ͍͠ɻɻ suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\| [^(]\\|(\\(>=0\\.\\(30\\|[1-2][0-9]\\|[0-9]\\). [0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\ \)?)\\) ԼهReact NativeʹσϑΥϧτͰೖ͍ͬͯΔ.flowconfigͷਖ਼نදݱɻ ղಡ͢Βਏ͍ͷ͕ͩɺ
͜ΕΛಠࣗʹॻ͘ͷͬͱਏ͍ɻ
όʔδϣϯ͕มΘΔͨͼʹΤϥʔ͕૿͑Δ ৽͍͠ղऍ͕ՃΘΓɺࠣࡉͳͷͲΜͲΜΤϥʔʹͳͬͯ͘ΕΔɻ ಛʹ࣮ߦ࣌ʹ͕͋ͬͨͷͱ͍͏Θ͚Ͱͳ͍ͷʹ… flow-bin: ^0.30.0 flow-bin: ~0.30.0 ʮCIͰౖΒΕͯམͪΔʯ͕සൃͨ͠ͷͰɺ ϚΠφʔόʔδϣϯݻఆɺखಈupdateͱͨ͠ɻ
@flow ΛΕΔͱԿͯ͘͠Εͳ͍ɻ flowೖΕ͍ͯΔͣͳͷʹౖͬͯ͘Εͳ͍ͱ͖ɺ Ͳ͔͜Ͱ@flowΛॻ͖Ε͍ͯΔϑΝΠϧ͕͋Δɻ ͦͷϑΝΠϧΛimportͯ͠anyܕʹͳΓɺ ࣮ߦ࣌ʹൃ֮͢Δɻ editor͕ิ͠ͳ͍͜ͱͰؾͮ͘͠ɻ ·ͨpragmaνΣοΫͷlintͱ͔͕͋ͬͯཉ͍͠ɻ
Φʔόʔϩʔυͳ͍ flow࣮ߦ࣌ͨͩͷJSͱͳΔͷͰɺ ΦʔόʔϩʔυతͳهࡌΛ͏·͘·ͱΊͨΓ͠ͳ͍ɻ ܕͷ͋ΔݴޠͷύϥμΠϜ͕શ෦͋Δ͔ͱ͍͏ͱ ͦ͏͍͏Θ͚Ͱͳ͍ɻ ͰEnumΆ͍͜ͱͰ͖Δɻ(࣍ষ)
Magic type͕υΩϡϝϯτ͞Ε͍ͯͳ͍(ͷʹศར) ࣮flowɺ $Keys<T> ͰྻڍܕΛදݱͨ͠Γɺ $Shape<T>ͰTͷ෦ܕΛදݱͨ͠Γͱɺ ͍Ζ͍ΖͰ͖Δ͜ͱଟ͍ɻ͕… 201611݄࣌Ͱͯ͢undocumentedͰ͋Δɻ ͍զʑຊਓQiitaͷྑهࣄͰ͋ΔԼهΛΈΕ ࣄͳ͖ΛಘΔ͜ͱ͕Ͱ͖Δɻ
http://qiita.com/kinzal/items/e1898c89af5618e18334 flowtypeͷmagic typeʹ͍ͭͯ —Qiita @kinzalࢯ
ϥΠϒϥϦʹ͢Δͱܕใ͕͑ͳ͍ flowΛͬͯϥΠϒϥϦΛॻ͘ࡍɺ ༻ʹtranspile͢Δͱવܕใ͕ফ͑ͯɺ ར༻ଆ͕ͦͷใΛ͑ͳ͍ɻ ιʔεΛͦͷ··export͢Δ͔͠ͳ͔ͬͨɻ ฐࣾɺbabel-pluginΛ࡞ΔτϦοΩʔͳରԠΛͨ͠ɻ 最近、`flow gen-flow-files`というコマンドができた。 foo.jsに対し、foo.js.flow という型定義ファイルを置けるので
配布用に置いておけば型定義もexportできる。 この進化は、ほんの2ヶ月前のできごと。 https://github.com/CureApp/babel-plugin-transform-strip-jsnext
experimentalͳจ๏ͷҰ෦ղऍͰ͖ͳ͍ ྫ͑function bind syntaxΛ͍͍ͨͱ͖ɺ ຊʹࢂΊͳࢥ͍Λ͢Δɻ flow annotationsbabel(babylon)ʹΑͬͯղऍ͞ΕΔ͕ɺ flowࣗମOCamlɻ ఏҊஈ֊ͷ༷ͷ͕ͯ͢ར༻Ͱ͖ΔΘ͚Ͱͳ͍ɻ const
newObject = /* ::`*/this.src::map((value) => value ** 2)/* ::`*/ ↑ ͜Ε͕Γ͍͚ͨͩͳͷʹ ↑ ↑ ͜ΜͳෆࢥٞͳίϝϯτΛڬ·ͳ͍ͱ͍͚ͳ͍͠ɺΤϥʔ੍͞ΕΔɻ Ͱasync / awaitੲ͔Β༨༟Ͱ͑ͨΓͱɺதͷਓͷΈ͋Γͦ͏ɻ
ґଘϞδϡʔϧͷflow versionʹറΒΕΔ ྫ͑React NativeΛར༻͢Δࡍɺ ͦͷflowͷόʔδϣϯʹἧ͑ͳ͍ͱ΄΅ౖΒΕΔɻ ͜͏͍͏ϥΠϒϥϦ͕2छྨҎ্͋ͬͨΒݱ࣌Ͱ٧Ήɻ
CONTENTS ωοτͰर͑Δflowͷಛ ͔ͬͯͬͨflowͷྑ͞ ͔ͬͯͬͨflowͷਏ͞ ͦΕͰflowΛ͏͖ཧ༝
ͦΕͰflowΛ͏͖ཧ༝ ·ͣɺਏ͍෦Λྨͯ͠Έͨɻ
@flow ΛΕΔͱԿͯ͘͠Εͳ͍ɻ Φʔόʔϩʔυͳ͍ Magic type͕υΩϡϝϯτ͞Ε͍ͯͳ͍(ͷʹศར) ϥΠϒϥϦʹ͢Δͱܕใ͕͑ͳ͍ experimentalͳจ๏ͷҰ෦ղऍͰ͖ͳ͍ ґଘϞδϡʔϧͷflow versionʹറΒΕΔ node_modulesԼͷϑΝΠϧͰౖͬͯ͠·͏
ઃఆϑΝΠϧ(.flowconfig)ͷਖ਼نදݱ͕ΧΦε όʔδϣϯ͕มΘΔͨͼʹΤϥʔ͕૿͑Δ 1ճઃఆ͢Ε͍͍ͭ ͠ΐ͏͕ͳ͍ͭ ͕࣌ղܾ͢Δͭ flow͕v1ʹͳΕ͍͍ͭ ࣮͏ղܾ͍ͯͨͭ͠ Ͱਏ͍෦Λ·ͱΊΔͱ… ະདྷ໌Δ͍ͣʂ
ͦΕͰflowΛ͏͖ཧ༝ ͦͯ͠…
͙͢ʹΕΔ͠ɺΊΒΕΔ͔Βɻ ͦΕͰflowΛ͏͖ཧ༝ ਐԽΛଓ͚ΔJavaScriptͷεϐʔυʹ͍͍ͭͯ͘ͷ ϩοΫΠϯ͞Εͳ͍ʮπʔϧʯͰͳ͍ͩΖ͏͔ʁ ͪΐͬͱݏͳΒ flowίϚϯυΛୟ͔ͳ͚ΕΑ͍ɻ ͬͱݏͳΒ@flow pragmaΛফͤΑ͍ɻ ຊʹݏͳΒannotationͷΈstrip͢ΕΑ͍ɻ
flowͱ͍͏πʔϧͰ ϩοΫΠϯ͞Εͣʹ ܕͷੈքΛಋೖ͠Α͏ɻ END @shinout