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
1k
マルチプラットフォーム時代のReact / React Native / Universal JS
shinout
6
2.5k
Other Decks in Programming
See All in Programming
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
400
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
450
エラーって何種類あるの?
kajitack
5
350
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
5つのアンチパターンから学ぶLT設計
narihara
1
150
VS Code Update for GitHub Copilot
74th
2
600
GraphRAGの仕組みまるわかり
tosuri13
8
530
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
920
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
540
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Facilitating Awesome Meetings
lara
54
6.4k
Into the Great Unknown - MozCon
thekraken
39
1.9k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Side Projects
sachag
455
42k
Code Reviewing Like a Champion
maltzj
524
40k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Six Lessons from altMBA
skipperchong
28
3.9k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Building an army of robots
kneath
306
45k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
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