Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
複数人で高速に開発するためのnpmモジュール
Search
sota ohara
April 21, 2018
5
2.6k
複数人で高速に開発するためのnpmモジュール
sota ohara
April 21, 2018
Tweet
Share
More Decks by sota ohara
See All by sota ohara
Re-Architecture of ReactNative
sottar
0
260
Implement prerendering w/ puppeteer
sottar
1
280
create own CMS from scratch
sottar
2
9k
Let’s try to hack AST of JavaScript
sottar
1
1.8k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
18k
new version of context in React 16.3
sottar
3
1.7k
2ヶ月半でサービスをリリースした話し
sottar
2
2.2k
Redux のディレクトリ構成を考える
sottar
2
15k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sottar
9
5k
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Why Our Code Smells
bkeepers
PRO
337
57k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Designing for humans not robots
tammielis
253
25k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Building Adaptive Systems
keathley
43
2.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Transcript
ෳਓͰߴʹ։ൃ͢ΔͨΊͷ npm Ϟδϡʔϧ Mercari, Inc. / Souzoh, Inc. Frontend Engineer
Sota Ohara Battle Conference U30 #2018 @ ܳೳՖࣷ
about me Sota Ohara / sottar Mercari, inc. / Souzoh,
inc. Frontend Engineer mercari NOW, CSTool @sottar_ sottar
ίʔυ̍ߦग़͖ͯ·ͤΜ
PR ͷϨϏϡʔͷ͓͠
PR ͷϨϏϡʔͯ͠·͔͢
PR ͷϨϏϡʔͰফͯ͠·͔͢
ϨϏϡʔͷର ίʔσΟϯάελΠϧʹଇͬͯΔ͔ ϏδωεϩδοΫ ઃܭͳ͍͔ ύϑΥʔϚϯεߟྀͰ͖ͯΔ͔ ؆ܿͳॻ͖ํͰ͖ͳ͍͔ σβΠϯ่Εͯͳ͍͔ ϨϏϡʔཷ·ͬͯͯΔؾͰͳ͍ or ϨϏϡʔͪͰ։ൃͰ͖ͳ͍
None
ϝϧΧϦͷ։ൃͰ ಋೖ͍ͯ͠ΔϞδϡʔϧ
ίʔσΟϯάελΠϧͷࣗಈԽ σβΠϯϨϏϡʔͷ (Ұ෦) ࣗಈԽ
ίʔσΟϯάελΠϧͷࣗಈԽ
• Πϯσϯτ͕ͣΕ͍ͯΔ • ແବͳεϖʔε / վߦ͕ೖ͍ͬͯΔ • ΧϯϚ, ηϛίϩϯ͕ͳ͍ •
͍ͬͯͳ͍ม͕ఆٛ͞Ε͍ͯΔ • ؔʹ͢Ҿͷ͕ҧ͏ ɹ …. ίʔσΟϯάελΠϧͷϨϏϡʔ
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 CircleCI
git commit ࣌ʹ Prettier ͰίʔυͷϑΥʔϚοτΛߦ͏ by husky
ίʔσΟϯάελΠϧ DPNNJU ίʔυܗ QSFUUJFS IVTLZ HJUDPNNJU HJUQVTI MJOU ܕνΣοΫ ϨϏϡʔ
σβΠϯϨϏϡʔͷ (Ұ෦) ࣗಈԽ
ͦͷϒϥϯνʹҠಈͯ͠ pull ͯ͠ build ͯ͠ ϩʔΧϧڥ্ཱͪ͛ͯ ɺɺɺ σβΠϯͷϨϏϡʔΛ͢Δʹɻɻ
None
IUUQTTUPSZCPPLKTPSH
Storybook ͷσϞ IUUQBJSCOCJPSFBDUEBUFT
͜ͷ storybook ্ͰPRͷσβΠϯϨϏϡʔΛ͢Δ
ͦͷϒϥϯνʹҠಈͯ͠ pull ͯ͠ ϩʔΧϧͰίϚϯυୟ͍ͯ ɺɺɺ ֬ೝ͢Δʹ
None
σβΠϯͷϨϏϡʔ HJUQVTI CVJME ϒϥϯν͝ͱʹϢχʔΫͳ63-
σβΠϯͷϨϏϡʔ
σβΠϯͷϨϏϡʔ IUUQBJSCOCJPSFBDUEBUFT
IUUQTUVEJPBOEZIBUFOBCMPHDPNFOUSZ
• PRͷϨϏϡʔϨϏϡϫʔͷෛ୲ʹͳΓνʔϜશମͷ։ൃʹӨڹ͕ग़͔Ͷ ͳ͍ͷͰɺͰ͖ΔݶΓෛ୲ΛݮΒ͢ྗ͕ඞཁ • Θ͔Γ͍͢ϨϏϡʔʹؔͯ͠ϞδϡʔϧΛ͏͜ͱͰࣗಈԽ͕Մೳ • σβΠϯͷϨϏϡʔ storybook Λ͏͜ͱͰ؆୯ʹϨϏϡʔͰ͖Δڥ Λ࡞ΕΔ
·ͱΊ ϨϏϡʔ͢Δ / ͞ΕΔ͜ͱͤͳͷͰϨϏϡʔ͍͢͠ڥΛ࡞Γ·͠ΐ͏