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
iOSでSVG画像を扱う
kishikawakatsumi
0
170
Software Architecture
hschwentner
6
2.3k
CSC305 Lecture 08
javiergs
PRO
0
280
Devvox Belgium - Agentic AI Patterns
kdubois
1
150
Google Opalで使える37のライブラリ
mickey_kubo
3
150
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
EMこそClaude Codeでコード調査しよう
shibayu36
0
420
Pythonに漸進的に型をつける
nealle
1
120
NIKKEI Tech Talk#38
cipepser
0
230
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
マンガアプリViewerの大画面対応を考える
kk__777
0
250
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
900
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Thoughts on Productivity
jonyablonski
70
4.9k
Done Done
chrislema
185
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
We Have a Design System, Now What?
morganepeng
53
7.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
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