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.2k
実践投入してわかったflowtypeのメリデメ
facebook製の型チェッカ、flowを実践投入してみた結果、分かった良さと辛さを詰め込みました。
Shin Suzuki
November 04, 2016
Tweet
Share
More Decks by Shin Suzuki
See All by Shin Suzuki
9年開発を牽引して見えてきた、共通化すべきものと個別でつくるもの ~プログラム言語~
shinout
1
970
マルチプラットフォーム時代のReact / React Native / Universal JS
shinout
6
2.5k
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
650
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
9
2.6k
SwiftUI Viewの責務分離
elmetal
PRO
2
280
[JAWS DAYS 2025] 最近の DB の競合解決の仕組みが分かった気になってみた
maroon1st
0
170
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
430
クックパッド検索システム統合/Cookpad Search System Consolidation
giga811
0
140
Domain-Driven Design (Tutorial)
hschwentner
13
22k
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
200
AWS Step Functions は CDK で書こう!
konokenj
5
870
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
130
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
630
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
290
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
How GitHub (no longer) Works
holman
314
140k
Automating Front-end Workflow
addyosmani
1369
200k
Building an army of robots
kneath
303
45k
Bash Introduction
62gerente
611
210k
Music & Morning Musume
bryan
46
6.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
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