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

Transcript

1. ෳ਺ਓͰߴ଎ʹ։ൃ͢ΔͨΊͷ npm Ϟδϡʔϧ
   Mercari, Inc. / Souzoh, Inc.
   Frontend Engineer
   Sota Ohara
   Battle Conference U30 #2018 @ ܳೳՖ఻ࣷ
   

   View Slide

2. about me
   Sota Ohara / sottar
   Mercari, inc. / Souzoh, inc.
   Frontend Engineer
   mercari NOW, CSTool
   @sottar_
   sottar
   

   View Slide

3. ίʔυ͸̍ߦ΋ग़͖ͯ·ͤΜ
   

   View Slide

4. PR ͷϨϏϡʔͷ͓࿩͠
   

   View Slide

5. PR ͷϨϏϡʔͯ͠·͔͢
   

   View Slide

6. PR ͷϨϏϡʔͰফ໣ͯ͠·͔͢
   

   View Slide

7. ϨϏϡʔͷର৅
   ίʔσΟϯάελΠϧʹଇͬͯΔ͔
   ϏδωεϩδοΫ
   ઃܭ໰୊ͳ͍͔
   ύϑΥʔϚϯεߟྀͰ͖ͯΔ͔
   ؆ܿͳॻ͖ํͰ͖ͳ͍͔
   σβΠϯ่Εͯͳ͍͔
   ϨϏϡʔཷ·ͬͯͯ΍ΔؾͰͳ͍ or ϨϏϡʔ଴ͪͰ։ൃͰ͖ͳ͍
   

   View Slide

8. View Slide

9. ϝϧΧϦͷ։ൃͰ
   ಋೖ͍ͯ͠ΔϞδϡʔϧ
   

   View Slide

10. ίʔσΟϯάελΠϧͷࣗಈԽ
    σβΠϯϨϏϡʔͷ (Ұ෦) ࣗಈԽ
    

    View Slide

11. ίʔσΟϯάελΠϧͷࣗಈԽ
    

    View Slide

12. • Πϯσϯτ͕ͣΕ͍ͯΔ
    • ແବͳεϖʔε / վߦ͕ೖ͍ͬͯΔ
    • ΧϯϚ, ηϛίϩϯ͕ͳ͍
    • ࢖͍ͬͯͳ͍ม਺͕ఆٛ͞Ε͍ͯΔ
    • ؔ਺ʹ౉͢Ҿ਺ͷ਺͕ҧ͏
    ɹ ….
    ίʔσΟϯάελΠϧ΁ͷϨϏϡʔ
    

    View Slide

13. ESLint : JavaScript ͷ LinterɻελΠϧΨΠυʹ४ڌ͍ͯ͠ͳ͍໰୊ͷ͋Δ
    ɹɹɹɹύλʔϯ΍ίʔυΛݟ͚ͭͯ͘ΕΔ
    Prettier : code formatterɻίʔυΛҰ؏ͨ͠ελΠϧʹ੔ܗͰ͖Δ
    FlowType, TypeScript : JavaScriptͷίʔυʹܕΛಋೖ͢Δ͜ͱ͕Ͱ͖Δ
    ίʔσΟϯάελΠϧ
    Stylelint : Styling ͷ Linterɻstyled-components ͳͲʹ΋ରԠ͍ͯ͠Δɻ
    

    View Slide

14. IVTLZHJUͰDPNNJUલʹίϚϯυΛ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ
    CircleCI, TravisCI : ciπʔϧɻgit ͷ push ʹରͯ͠ίϚϯυΛ࣮ߦͰ͖Δ
    ίʔσΟϯάελΠϧ
    

    View Slide

15. ίʔσΟϯάελΠϧ
    ESLint, StyleLint, FlowType or TypeScript Ͱ໰୊ͷ͋Δίʔυ͕
    ͳ͍͔Λ֬ೝ by CircleCI
    git commit ࣌ʹ Prettier ͰίʔυͷϑΥʔϚοτΛߦ͏ by husky
    

    View Slide

16. ίʔσΟϯάελΠϧ
    DPNNJU
    ίʔυ੔ܗ QSFUUJFS
    
    IVTLZ
    HJUDPNNJU
    HJUQVTI
    MJOU ܕνΣοΫ
    ϨϏϡʔ
    

    View Slide

17. σβΠϯϨϏϡʔͷ (Ұ෦) ࣗಈԽ
    

    View Slide

18. ͦͷϒϥϯνʹҠಈͯ͠
    pull ͯ͠
    build ͯ͠
    ϩʔΧϧ؀ڥ্ཱͪ͛ͯ
    ɺɺɺ
    σβΠϯͷϨϏϡʔΛ͢Δʹ͸ɻɻ
    

    View Slide

19. View Slide

20. IUUQTTUPSZCPPLKTPSH
    

    View Slide

21. Storybook ͷσϞ
    IUUQBJSCOCJPSFBDUEBUFT
    

    View Slide

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

    View Slide

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

    View Slide

24. View Slide

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

    View Slide

26. σβΠϯͷϨϏϡʔ
    

    View Slide

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

    View Slide

28. IUUQTUVEJPBOEZIBUFOBCMPHDPNFOUSZ
    

    View Slide

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

    View Slide