実践投入してわかったflowtypeのメリデメ

facebook製の型チェッカ、flowを実践投入してみた結果、分かった良さと辛さを詰め込みました。

Transcript

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