Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

sota ohara
April 21, 2018
2.3k

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

sota ohara

April 21, 2018
Tweet

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