実践投入してわかったflowtypeのメリデメ
by
Shin Suzuki
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
A STATIC TYPE CHECKER FOR JAVASCRIPT ࣮ફೖͯ͠Θ͔ͬͨ @shinout CureApp presents ͷϝϦσϝ
Slide 2
Slide 2 text
プリで治療する未来を創造する ア 提 供 キュア・アップ JavaScriptエンジニア 絶 賛 募 集 中!
Slide 3
Slide 3 text
CONTENTS ωοτͰर͑Δflowͷಛ ͔ͬͯͬͨflowͷྑ͞ ͔ͬͯͬͨflowͷਏ͞ ͦΕͰflowΛ͏͖ཧ༝
Slide 4
Slide 4 text
CONTENTS ωοτͰर͑Δflowͷಛ ͔ͬͯͬͨflowͷྑ͞ ͔ͬͯͬͨflowͷਏ͞ ͦΕͰflowΛ͏͖ཧ༝
Slide 5
Slide 5 text
JSͷ੩తܕνΣοΧ facebook ΞϊςʔγϣϯbabelͰऔΓআ͘ ݴޠͰͳ͍ ঃʑʹಋೖͰ͖Δ ڧྗͳܕਪ nullʹڧ͍ ωοτͰर͑Δflowͷಛ flow is
Slide 6
Slide 6 text
flowJSͷΑ͋͘ΔόάΛະવʹ͙͜ͱ͕Ͱ͖Δ flow can catch common bugs in JavaScript programs before they run flow͕ެࣜαΠτͷ1ߦʹݴ͍ͬͯΔ͜ͱ
Slide 7
Slide 7 text
JSͷΑ͋͘ΔόάΛະવʹ͙ ௨ৗͷJSʹજΉจࣈྻͷόά ະવʹ͛Δ ྫ͑form͔ΒདྷΔೖྗͩͬͨΒ?
Slide 8
Slide 8 text
JSͷΑ͋͘ΔόάΛະવʹ͙ ௨ৗͷJSʹજΉnullableͳΦϒδΣΫτͷΞΫηεͷόά ະવʹ͛Δ ΨʔυઅಋೖΛͪΌΜͱݟͯ͘ΕΔ ͜ΕͰౖΒΕͳ͘ͳΔ
Slide 9
Slide 9 text
flowݴޠͰͳ͍ɻ ΞϊςʔγϣϯͷͨΊͷจ๏࣮ߦ࣌ʹͯ͢औΓআ͔ΕΔɻ babel
Slide 10
Slide 10 text
͓·͚: facebookͱMicrosoftͷࢥͷҧ͍ʹ͍ͭͯ ϑϨʔϜϫʔΫ શ෦ೖΓ ڥΛ౷Ұ͢Δ ϥΠϒϥϦɺπʔϧ Έ߹Θͤࣗ༝ બࢶΛఏڙ͢Δ
Slide 11
Slide 11 text
CONTENTS ωοτͰर͑Δflowͷಛ ͔ͬͯͬͨflowͷྑ͞ ͔ͬͯͬͨflowͷਏ͞ ͦΕͰflowΛ͏͖ཧ༝
Slide 12
Slide 12 text
͜ΜͳflowΛ࣮ࡍʹ ϓϩδΣΫτͰಋೖͯ͠Έͨɻ
Slide 13
Slide 13 text
ϓϩδΣΫτ֓ཁ Desktop App Mobile App Universal Domain MBaaS ! " # React Native $ DB React Electron
Slide 14
Slide 14 text
flowಋೖͰΑ͔ͬͨ͜ͱ
Slide 15
Slide 15 text
ಋೖ͕γϯϓϧ 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ファイルを作成
Slide 16
Slide 16 text
ͱʹ͔͘nullʹڧ͍ nullରԠ͕໘͗ͯ͢ɺnullΛฦ͢APIΛΊ throwͷ΄͏ʹ͢ɺ҉ͷن͕Ͱ͖ͨɻ nullは返さずエラーにしないと! なければnull返せばいいかなぁ
Slide 17
Slide 17 text
NodeBrowserͷAPIͷαϙʔτ͕ॆ࣮ جຊతͳAPIཏ͞Ε͍ͯΔɻ
Slide 18
Slide 18 text
࠷ݶͷΞϊςʔγϣϯͰॆ͏Ε͍͠ number, string, boolean, Array, Ϋϥεఆٛ ͙Β͍Ͱॆػೳ͢Δɻ React / React Nativeपลٕज़ͷܕαϙʔτ͞Ε͍ͯΔͷͰɺ ҙ֎ʹɺ֎෦ϥΠϒϥϦͷܕఆ͕ٛͳͯͦ͘͜·Ͱਏ͘ͳ͍ɻ ٯʹflow-typedͷἧ͑ѱ͍··ɻɻɻ
Slide 19
Slide 19 text
2ճҎ߱ͷνΣοΫ͕ߴ ॳճͷflowίϚϯυͰαʔόʔ্ཱ͕͕ͪΓ 2ճҎ߱ඞཁͳ෦͚ͩܕνΣοΫ͢Δɻ Ωϟογϡ͏ɻ
Slide 20
Slide 20 text
ΤσΟλׂ͕ͱؤு͍ͬͯͨ facebookͷnuclide͕flowΛۦͯ͠ɺ ิΤϥʔΛग़ͯ͘͠ΕΔɻ
Slide 21
Slide 21 text
CONTENTS ωοτͰर͑Δflowͷಛ ͔ͬͯͬͨflowͷྑ͞ ͔ͬͯͬͨflowͷਏ͞ ͦΕͰflowΛ͏͖ཧ༝
Slide 22
Slide 22 text
node_modulesԼͷϑΝΠϧͰౖͬͯ͠·͏ ར༻ଆ͕ઃఆϑΝΠϧ(.flowconfig)ʹॻ͖ࠐΉඞཁ͕͋Δɻ (ଟ͘ɺґଘͷґଘͷґଘ͙Β͍ͷmoduleͳͷʹ) node_modulesʹ͋ΔΤϥʔͰౖΔɻ ΄ͱΜͲۭͷjsonϑΝΠϧʹର͢Δparse error
Slide 23
Slide 23 text
ઃఆϑΝΠϧ(.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ͷਖ਼نදݱɻ ղಡ͢Βਏ͍ͷ͕ͩɺ ͜ΕΛಠࣗʹॻ͘ͷͬͱਏ͍ɻ
Slide 24
Slide 24 text
όʔδϣϯ͕มΘΔͨͼʹΤϥʔ͕૿͑Δ ৽͍͠ղऍ͕ՃΘΓɺࠣࡉͳͷͲΜͲΜΤϥʔʹͳͬͯ͘ΕΔɻ ಛʹ࣮ߦ࣌ʹ͕͋ͬͨͷͱ͍͏Θ͚Ͱͳ͍ͷʹ… flow-bin: ^0.30.0 flow-bin: ~0.30.0 ʮCIͰౖΒΕͯམͪΔʯ͕සൃͨ͠ͷͰɺ ϚΠφʔόʔδϣϯݻఆɺखಈupdateͱͨ͠ɻ
Slide 25
Slide 25 text
@flow ΛΕΔͱԿͯ͘͠Εͳ͍ɻ flowೖΕ͍ͯΔͣͳͷʹౖͬͯ͘Εͳ͍ͱ͖ɺ Ͳ͔͜Ͱ@flowΛॻ͖Ε͍ͯΔϑΝΠϧ͕͋Δɻ ͦͷϑΝΠϧΛimportͯ͠anyܕʹͳΓɺ ࣮ߦ࣌ʹൃ֮͢Δɻ editor͕ิ͠ͳ͍͜ͱͰؾͮ͘͠ɻ ·ͨpragmaνΣοΫͷlintͱ͔͕͋ͬͯཉ͍͠ɻ
Slide 26
Slide 26 text
Φʔόʔϩʔυͳ͍ flow࣮ߦ࣌ͨͩͷJSͱͳΔͷͰɺ ΦʔόʔϩʔυతͳهࡌΛ͏·͘·ͱΊͨΓ͠ͳ͍ɻ ܕͷ͋ΔݴޠͷύϥμΠϜ͕શ෦͋Δ͔ͱ͍͏ͱ ͦ͏͍͏Θ͚Ͱͳ͍ɻ ͰEnumΆ͍͜ͱͰ͖Δɻ(࣍ষ)
Slide 27
Slide 27 text
Magic type͕υΩϡϝϯτ͞Ε͍ͯͳ͍(ͷʹศར) ࣮flowɺ $Keys ͰྻڍܕΛදݱͨ͠Γɺ $ShapeͰTͷ෦ܕΛදݱͨ͠Γͱɺ ͍Ζ͍ΖͰ͖Δ͜ͱଟ͍ɻ͕… 201611݄࣌Ͱͯ͢undocumentedͰ͋Δɻ ͍զʑຊਓQiitaͷྑهࣄͰ͋ΔԼهΛΈΕ ࣄͳ͖ΛಘΔ͜ͱ͕Ͱ͖Δɻ http://qiita.com/kinzal/items/e1898c89af5618e18334 flowtypeͷmagic typeʹ͍ͭͯ —Qiita @kinzalࢯ
Slide 28
Slide 28 text
ϥΠϒϥϦʹ͢Δͱܕใ͕͑ͳ͍ 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
Slide 29
Slide 29 text
experimentalͳจ๏ͷҰ෦ղऍͰ͖ͳ͍ ྫ͑function bind syntaxΛ͍͍ͨͱ͖ɺ ຊʹࢂΊͳࢥ͍Λ͢Δɻ flow annotationsbabel(babylon)ʹΑͬͯղऍ͞ΕΔ͕ɺ flowࣗମOCamlɻ ఏҊஈ֊ͷ༷ͷ͕ͯ͢ར༻Ͱ͖ΔΘ͚Ͱͳ͍ɻ const newObject = /* ::`*/this.src::map((value) => value ** 2)/* ::`*/ ↑ ͜Ε͕Γ͍͚ͨͩͳͷʹ ↑ ↑ ͜ΜͳෆࢥٞͳίϝϯτΛڬ·ͳ͍ͱ͍͚ͳ͍͠ɺΤϥʔ੍͞ΕΔɻ Ͱasync / awaitੲ͔Β༨༟Ͱ͑ͨΓͱɺதͷਓͷΈ͋Γͦ͏ɻ
Slide 30
Slide 30 text
ґଘϞδϡʔϧͷflow versionʹറΒΕΔ ྫ͑React NativeΛར༻͢Δࡍɺ ͦͷflowͷόʔδϣϯʹἧ͑ͳ͍ͱ΄΅ౖΒΕΔɻ ͜͏͍͏ϥΠϒϥϦ͕2छྨҎ্͋ͬͨΒݱ࣌Ͱ٧Ήɻ
Slide 31
Slide 31 text
CONTENTS ωοτͰर͑Δflowͷಛ ͔ͬͯͬͨflowͷྑ͞ ͔ͬͯͬͨflowͷਏ͞ ͦΕͰflowΛ͏͖ཧ༝
Slide 32
Slide 32 text
ͦΕͰflowΛ͏͖ཧ༝ ·ͣɺਏ͍෦Λྨͯ͠Έͨɻ
Slide 33
Slide 33 text
@flow ΛΕΔͱԿͯ͘͠Εͳ͍ɻ Φʔόʔϩʔυͳ͍ Magic type͕υΩϡϝϯτ͞Ε͍ͯͳ͍(ͷʹศར) ϥΠϒϥϦʹ͢Δͱܕใ͕͑ͳ͍ experimentalͳจ๏ͷҰ෦ղऍͰ͖ͳ͍ ґଘϞδϡʔϧͷflow versionʹറΒΕΔ node_modulesԼͷϑΝΠϧͰౖͬͯ͠·͏ ઃఆϑΝΠϧ(.flowconfig)ͷਖ਼نදݱ͕ΧΦε όʔδϣϯ͕มΘΔͨͼʹΤϥʔ͕૿͑Δ 1ճઃఆ͢Ε͍͍ͭ ͠ΐ͏͕ͳ͍ͭ ͕࣌ղܾ͢Δͭ flow͕v1ʹͳΕ͍͍ͭ ࣮͏ղܾ͍ͯͨͭ͠ Ͱਏ͍෦Λ·ͱΊΔͱ… ະདྷ໌Δ͍ͣʂ
Slide 34
Slide 34 text
ͦΕͰflowΛ͏͖ཧ༝ ͦͯ͠…
Slide 35
Slide 35 text
͙͢ʹΕΔ͠ɺΊΒΕΔ͔Βɻ ͦΕͰflowΛ͏͖ཧ༝ ਐԽΛଓ͚ΔJavaScriptͷεϐʔυʹ͍͍ͭͯ͘ͷ ϩοΫΠϯ͞Εͳ͍ʮπʔϧʯͰͳ͍ͩΖ͏͔ʁ ͪΐͬͱݏͳΒ flowίϚϯυΛୟ͔ͳ͚ΕΑ͍ɻ ͬͱݏͳΒ@flow pragmaΛফͤΑ͍ɻ ຊʹݏͳΒannotationͷΈstrip͢ΕΑ͍ɻ
Slide 36
Slide 36 text
flowͱ͍͏πʔϧͰ ϩοΫΠϯ͞Εͣʹ ܕͷੈքΛಋೖ͠Α͏ɻ END @shinout