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

flow͸JSͷΑ͋͘ΔόάΛະવʹ๷͙͜ͱ͕Ͱ͖Δ 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

Node΍Browserͷ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ͷ෦෼ܕΛදݱͨ͠Γͱɺ ͍Ζ͍ΖͰ͖Δ͜ͱ͸ଟ͍ɻ͕… 2016೥11݄࣌఺Ͱ͢΂ͯ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 annotations͸babel(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