複数人で高速に開発するためのnpmモジュール

Transcript

1. ෳ਺ਓͰߴ଎ʹ։ൃ͢ΔͨΊͷ npm Ϟδϡʔϧ Mercari, Inc. / Souzoh, Inc. Frontend Engineer Sota Ohara Battle Conference U30 #2018 @ ܳೳՖ఻ࣷ
2. about me Sota Ohara / sottar Mercari, inc. / Souzoh, inc. Frontend Engineer mercari NOW, CSTool @sottar_ sottar
3. ίʔυ͸̍ߦ΋ग़͖ͯ·ͤΜ
4. PR ͷϨϏϡʔͷ͓࿩͠
5. PR ͷϨϏϡʔͯ͠·͔͢
6. PR ͷϨϏϡʔͰফ໣ͯ͠·͔͢
7. ϨϏϡʔͷର৅ ίʔσΟϯάελΠϧʹଇͬͯΔ͔ ϏδωεϩδοΫ ઃܭ໰୊ͳ͍͔ ύϑΥʔϚϯεߟྀͰ͖ͯΔ͔ ؆ܿͳॻ͖ํͰ͖ͳ͍͔ σβΠϯ่Εͯͳ͍͔ ϨϏϡʔཷ·ͬͯͯ΍ΔؾͰͳ͍ or ϨϏϡʔ଴ͪͰ։ൃͰ͖ͳ͍
9. ϝϧΧϦͷ։ൃͰ ಋೖ͍ͯ͠ΔϞδϡʔϧ
10. ίʔσΟϯάελΠϧͷࣗಈԽ σβΠϯϨϏϡʔͷ (Ұ෦) ࣗಈԽ
11. ίʔσΟϯάελΠϧͷࣗಈԽ
12. • Πϯσϯτ͕ͣΕ͍ͯΔ • ແବͳεϖʔε / վߦ͕ೖ͍ͬͯΔ • ΧϯϚ, ηϛίϩϯ͕ͳ͍ • ࢖͍ͬͯͳ͍ม਺͕ఆٛ͞Ε͍ͯΔ • ؔ਺ʹ౉͢Ҿ਺ͷ਺͕ҧ͏ ɹ …. ίʔσΟϯάελΠϧ΁ͷϨϏϡʔ
13. ESLint : JavaScript ͷ LinterɻελΠϧΨΠυʹ४ڌ͍ͯ͠ͳ͍໰୊ͷ͋Δ ɹɹɹɹύλʔϯ΍ίʔυΛݟ͚ͭͯ͘ΕΔ Prettier : code formatterɻίʔυΛҰ؏ͨ͠ελΠϧʹ੔ܗͰ͖Δ FlowType, TypeScript : JavaScriptͷίʔυʹܕΛಋೖ͢Δ͜ͱ͕Ͱ͖Δ ίʔσΟϯάελΠϧ Stylelint : Styling ͷ Linterɻstyled-components ͳͲʹ΋ରԠ͍ͯ͠Δɻ
14. IVTLZ
    
    
    HJU
    Ͱ
    DPNNJU
    લʹίϚϯυΛ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ CircleCI, TravisCI : ciπʔϧɻgit ͷ push ʹରͯ͠ίϚϯυΛ࣮ߦͰ͖Δ ίʔσΟϯάελΠϧ
15. ίʔσΟϯάελΠϧ ESLint, StyleLint, FlowType or TypeScript Ͱ໰୊ͷ͋Δίʔυ͕ ͳ͍͔Λ֬ೝ by CircleCI git commit ࣌ʹ Prettier ͰίʔυͷϑΥʔϚοτΛߦ͏ by husky
16. ίʔσΟϯάελΠϧ DPNNJU
    ίʔυ੔ܗ
    QSFUUJFS IVTLZ HJU
    DPNNJU
    HJU
    QVTI MJOU
    ܕνΣοΫ ϨϏϡʔ
17. σβΠϯϨϏϡʔͷ (Ұ෦) ࣗಈԽ
18. ͦͷϒϥϯνʹҠಈͯ͠ pull ͯ͠ build ͯ͠ ϩʔΧϧ؀ڥ্ཱͪ͛ͯ ɺɺɺ σβΠϯͷϨϏϡʔΛ͢Δʹ͸ɻɻ
20. IUUQTTUPSZCPPLKTPSH
21. Storybook ͷσϞ IUUQBJSCOCJPSFBDUEBUFT
22. ͜ͷ storybook ্ͰPRͷσβΠϯϨϏϡʔΛ͢Δ
23. ͦͷϒϥϯνʹҠಈͯ͠ pull ͯ͠ ϩʔΧϧͰίϚϯυୟ͍ͯ ɺɺɺ ֬ೝ͢Δʹ͸
25. σβΠϯͷϨϏϡʔ HJU
    QVTI CVJME ϒϥϯν͝ͱʹϢχʔΫͳ63-
26. σβΠϯͷϨϏϡʔ
27. σβΠϯͷϨϏϡʔ IUUQBJSCOCJPSFBDUEBUFT
28. IUUQTUVEJPBOEZIBUFOBCMPHDPNFOUSZ
29. • PRͷϨϏϡʔ͸ϨϏϡϫʔͷෛ୲ʹͳΓνʔϜશମͷ։ൃʹӨڹ͕ग़͔Ͷ ͳ͍ͷͰɺͰ͖ΔݶΓෛ୲ΛݮΒ͢౒ྗ͕ඞཁ • Θ͔Γ΍͍͢ϨϏϡʔʹؔͯ͠͸ϞδϡʔϧΛ࢖͏͜ͱͰࣗಈԽ͕Մೳ • σβΠϯͷϨϏϡʔ͸ storybook Λ࢖͏͜ͱͰ؆୯ʹϨϏϡʔͰ͖Δ؀ڥ Λ࡞ΕΔ ·ͱΊ ϨϏϡʔ͢Δ / ͞ΕΔ͜ͱ͸޾ͤͳͷͰϨϏϡʔ͠΍͍͢؀ڥΛ࡞Γ·͠ΐ͏