ෳਓͰߴʹ։ൃ͢ΔͨΊͷ npm ϞδϡʔϧMercari, Inc. / Souzoh, Inc.Frontend EngineerSota OharaBattle Conference U30 #2018 @ ܳೳՖࣷ
View Slide
about meSota Ohara / sottarMercari, inc. / Souzoh, inc.Frontend Engineermercari NOW, CSTool@sottar_sottar
ίʔυ̍ߦग़͖ͯ·ͤΜ
PR ͷϨϏϡʔͷ͓͠
PR ͷϨϏϡʔͯ͠·͔͢
PR ͷϨϏϡʔͰফͯ͠·͔͢
ϨϏϡʔͷରίʔσΟϯάελΠϧʹଇͬͯΔ͔ϏδωεϩδοΫઃܭͳ͍͔ύϑΥʔϚϯεߟྀͰ͖ͯΔ͔؆ܿͳॻ͖ํͰ͖ͳ͍͔σβΠϯ่Εͯͳ͍͔ϨϏϡʔཷ·ͬͯͯΔؾͰͳ͍ or ϨϏϡʔͪͰ։ൃͰ͖ͳ͍
ϝϧΧϦͷ։ൃͰಋೖ͍ͯ͠ΔϞδϡʔϧ
ίʔσΟϯάελΠϧͷࣗಈԽσβΠϯϨϏϡʔͷ (Ұ෦) ࣗಈԽ
ίʔσΟϯάελΠϧͷࣗಈԽ
• Πϯσϯτ͕ͣΕ͍ͯΔ• ແବͳεϖʔε / վߦ͕ೖ͍ͬͯΔ• ΧϯϚ, ηϛίϩϯ͕ͳ͍• ͍ͬͯͳ͍ม͕ఆٛ͞Ε͍ͯΔ• ؔʹ͢Ҿͷ͕ҧ͏ɹ ….ίʔσΟϯάελΠϧͷϨϏϡʔ
ESLint : JavaScript ͷ LinterɻελΠϧΨΠυʹ४ڌ͍ͯ͠ͳ͍ͷ͋ΔɹɹɹɹύλʔϯίʔυΛݟ͚ͭͯ͘ΕΔPrettier : code formatterɻίʔυΛҰ؏ͨ͠ελΠϧʹܗͰ͖ΔFlowType, TypeScript : JavaScriptͷίʔυʹܕΛಋೖ͢Δ͜ͱ͕Ͱ͖ΔίʔσΟϯάελΠϧStylelint : Styling ͷ Linterɻstyled-components ͳͲʹରԠ͍ͯ͠Δɻ
IVTLZHJUͰDPNNJUલʹίϚϯυΛ࣮ߦ͢Δ͜ͱ͕Ͱ͖ΔCircleCI, TravisCI : ciπʔϧɻgit ͷ push ʹରͯ͠ίϚϯυΛ࣮ߦͰ͖ΔίʔσΟϯάελΠϧ
ίʔσΟϯάελΠϧESLint, StyleLint, FlowType or TypeScript Ͱͷ͋Δίʔυ͕ͳ͍͔Λ֬ೝ by CircleCIgit commit ࣌ʹ Prettier ͰίʔυͷϑΥʔϚοτΛߦ͏ by husky
ίʔσΟϯάελΠϧDPNNJUίʔυܗ QSFUUJFSIVTLZHJUDPNNJUHJUQVTIMJOU ܕνΣοΫϨϏϡʔ
σβΠϯϨϏϡʔͷ (Ұ෦) ࣗಈԽ
ͦͷϒϥϯνʹҠಈͯ͠pull ͯ͠build ͯ͠ϩʔΧϧڥ্ཱͪ͛ͯɺɺɺσβΠϯͷϨϏϡʔΛ͢Δʹɻɻ
IUUQTTUPSZCPPLKTPSH
Storybook ͷσϞIUUQBJSCOCJPSFBDUEBUFT
͜ͷ storybook ্ͰPRͷσβΠϯϨϏϡʔΛ͢Δ
ͦͷϒϥϯνʹҠಈͯ͠pull ͯ͠ϩʔΧϧͰίϚϯυୟ͍ͯɺɺɺ֬ೝ͢Δʹ
σβΠϯͷϨϏϡʔHJUQVTICVJMEϒϥϯν͝ͱʹϢχʔΫͳ63-
σβΠϯͷϨϏϡʔ
σβΠϯͷϨϏϡʔIUUQBJSCOCJPSFBDUEBUFT
IUUQTUVEJPBOEZIBUFOBCMPHDPNFOUSZ
• PRͷϨϏϡʔϨϏϡϫʔͷෛ୲ʹͳΓνʔϜશମͷ։ൃʹӨڹ͕ग़͔Ͷͳ͍ͷͰɺͰ͖ΔݶΓෛ୲ΛݮΒ͢ྗ͕ඞཁ• Θ͔Γ͍͢ϨϏϡʔʹؔͯ͠ϞδϡʔϧΛ͏͜ͱͰࣗಈԽ͕Մೳ• σβΠϯͷϨϏϡʔ storybook Λ͏͜ͱͰ؆୯ʹϨϏϡʔͰ͖ΔڥΛ࡞ΕΔ·ͱΊϨϏϡʔ͢Δ / ͞ΕΔ͜ͱͤͳͷͰϨϏϡʔ͍͢͠ڥΛ࡞Γ·͠ΐ͏