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.4k
複数人で高速に開発するためのnpmモジュール
sota ohara
April 21, 2018
Tweet
Share
More Decks by sota ohara
See All by sota ohara
Re-Architecture of ReactNative
sottar
0
160
Implement prerendering w/ puppeteer
sottar
1
200
create own CMS from scratch
sottar
2
8.8k
Let’s try to hack AST of JavaScript
sottar
1
1.6k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
18k
new version of context in React 16.3
sottar
3
1.5k
2ヶ月半でサービスをリリースした話し
sottar
2
2k
Redux のディレクトリ構成を考える
sottar
2
14k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sottar
9
4.9k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
79
5.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
What's in a price? How to price your products and services
michaelherold
239
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Raft: Consensus for Rubyists
vanstee
134
6.5k
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 Λ͏͜ͱͰ؆୯ʹϨϏϡʔͰ͖Δڥ Λ࡞ΕΔ
·ͱΊ ϨϏϡʔ͢Δ / ͞ΕΔ͜ͱͤͳͷͰϨϏϡʔ͍͢͠ڥΛ࡞Γ·͠ΐ͏