複数人で高速に開発するための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 ϨϏϡʔ଴ͪͰ։ൃͰ͖ͳ͍

8. None

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 ͯ͠ ϩʔΧϧ؀ڥ্ཱͪ͛ͯ ɺɺɺ σβΠϯͷϨϏϡʔΛ͢Δʹ͸ɻɻ

19. None

20. IUUQTTUPSZCPPLKTPSH

21. Storybook ͷσϞ IUUQBJSCOCJPSFBDUEBUFT

22. ͜ͷ storybook ্ͰPRͷσβΠϯϨϏϡʔΛ͢Δ

23. ͦͷϒϥϯνʹҠಈͯ͠ pull ͯ͠ ϩʔΧϧͰίϚϯυୟ͍ͯ ɺɺɺ ֬ೝ͢Δʹ͸

24. None

25. σβΠϯͷϨϏϡʔ HJU
    QVTI CVJME ϒϥϯν͝ͱʹϢχʔΫͳ63-

26. σβΠϯͷϨϏϡʔ

27. σβΠϯͷϨϏϡʔ IUUQBJSCOCJPSFBDUEBUFT

28. IUUQTUVEJPBOEZIBUFOBCMPHDPNFOUSZ

29. • PRͷϨϏϡʔ͸ϨϏϡϫʔͷෛ୲ʹͳΓνʔϜશମͷ։ൃʹӨڹ͕ग़͔Ͷ ͳ͍ͷͰɺͰ͖ΔݶΓෛ୲ΛݮΒ͢౒ྗ͕ඞཁ • Θ͔Γ΍͍͢ϨϏϡʔʹؔͯ͠͸ϞδϡʔϧΛ࢖͏͜ͱͰࣗಈԽ͕Մೳ • σβΠϯͷϨϏϡʔ͸ storybook Λ࢖͏͜ͱͰ؆୯ʹϨϏϡʔͰ͖Δ؀ڥ Λ࡞ΕΔ

    ·ͱΊ ϨϏϡʔ͢Δ / ͞ΕΔ͜ͱ͸޾ͤͳͷͰϨϏϡʔ͠΍͍͢؀ڥΛ࡞Γ·͠ΐ͏