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

by sota ohara

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ίʔυ͸̍ߦ΋ग़͖ͯ·ͤΜ

Slide 4

Slide 4 text

PR ͷϨϏϡʔͷ͓࿩͠

Slide 5

Slide 5 text

PR ͷϨϏϡʔͯ͠·͔͢

Slide 6

Slide 6 text

PR ͷϨϏϡʔͰফ໣ͯ͠·͔͢

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

IUUQTTUPSZCPPLKTPSH

Slide 21

Slide 21 text

Storybook ͷσϞ IUUQBJSCOCJPSFBDUEBUFT

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

σβΠϯͷϨϏϡʔ

Slide 27

Slide 27 text

σβΠϯͷϨϏϡʔ IUUQBJSCOCJPSFBDUEBUFT

Slide 28

Slide 28 text

IUUQTUVEJPBOEZIBUFOBCMPHDPNFOUSZ

Slide 29

Slide 29 text

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