Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
React+Storybook ことはじめ
Toshihisa Tomatsu
May 27, 2019
Technology
8
1.9k
React+Storybook ことはじめ
React.js meetup #7 (LT会)の資料です。
https://reactjs-meetup.connpass.com/event/130682/
Toshihisa Tomatsu
May 27, 2019
Tweet
Share
More Decks by Toshihisa Tomatsu
See All by Toshihisa Tomatsu
10shi10ma
3
1.2k
10shi10ma
8
2.1k
10shi10ma
3
190
10shi10ma
8
1.7k
10shi10ma
17
8.5k
10shi10ma
0
660
10shi10ma
6
4.3k
10shi10ma
5
2.3k
10shi10ma
2
370
Other Decks in Technology
See All in Technology
lmi
3
1.1k
inductor
1
130
nisshii0313
1
170
azara
1
900
line_developers
PRO
0
180
viva_tweet_x
1
420
andysumi
0
160
miyake
1
430
yamamuteki
3
760
pg0084
1
130
subroh0508
4
220
binarymist
0
1.3k
Featured
See All Featured
vanstee
117
4.9k
sachag
446
36k
tammielis
237
23k
paulrobertlloyd
72
1.4k
bkeepers
321
53k
marktimemedia
7
400
sachag
267
17k
chrislema
231
16k
brad_frost
157
6.4k
phodgson
87
3.9k
brettharned
93
3k
skipperchong
8
710
Transcript
1 React+Storybook ͜ͱ͡Ί React.js meetup #7 2019/05/27 @toshi-toma
2 About Me Toshihisa Tomatsu @toshi-toma @toshi__toma
3 ൃදͷഎܠ • ࠷ۙɺ"UPNJD DesignͷຊΛಡΈ͡Ίͯ ͦΕΛࢼͨ͢Ίʹίϯϙʔωϯτ(React+styled- componets+TypeScript)։ൃʹStorybookΛͬͯΈ·ͨ͠ • ReactͷϓϩδΣΫτͰStorybookΛ͏࣌ͷΛ͠·͢ •
खݩͰ༡ΜͩఔͳͷͰɺӡ༻͍ͯ͘͠ݟͳ͍Ͱ͢
4 • UIίϯϙʔωϯτΛΞϓϦέʔγϣϯͱಠཱͨ͠ڥͰ։ൃͰ͖ Δπʔϧ • `build-storybook`ίϚϯυͰίϯϙʔωϯτϦετͷ੩తαΠ τΛੜͰ͖ΔͷͰUIίϯϙʔωϯτΧλϩάͱͯ͠ • ελΠϧΨΠυίϯϙʔωϯτͷ༷ •
։ൃͨ͠ίϯϙʔωϯτͷڍಈΛ֬ೝ • ίϯϙʔωϯτͷςετ https://github.com/storybooks/storybook
5 Storybook React Official https://storybooks-official.netlify.com
6 React + Storybook • ಋೖܗੜίϚϯυΛ࣮ߦ͢Δ͚ͩ QBDLBHFKTPOඞཁ • npx -p
@storybook/cli sb init --type react stories/ |- index.stories.js .storybook/ |- addons.js |- config.js package.json node_modules package-lock.json package.json "scripts": { + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook" }, "dependencies": { + "@storybook/addon-actions": "^5.0.11", + "@storybook/addon-links": "^5.0.11", + "@storybook/addons": "^5.0.11", + "@storybook/react": "^5.0.11",
7 $ npm run storybook
8 xx.story.js • ͋ͱAYYTUPSZKTAͰ4UPSZCPPLʹදࣔ͢ΔίϯϙʔωϯτΛॻ͍ ͍͚ͯͩ͘
9 With TypeScript • `$ npm i -D typescript ts-loader`
• StorybookͷϏϧυϓϩηεͰTSXΛॲཧͰ͖ΔΑ͏ʹ `.storybook/webpack.config.js`Λ࡞
10 With TypeScript • ࠓޙAYYTUPSJFTUTYAʹॻ͍͍ͯ͘ • `.storybook/config`ϑΝΠϧΛฤू • `$ npm
i -D @types/storyboook__react`
11 react-docgen-typescript-loader • TypeScript Reactίϯϙʔωϯτ͔ΒdocgenใΛੜ͢Δͨ Ίͷloader • @storybook/addon-info”ͰίϯϙʔωϯτͷPropsใΛςʔ ϒϧܗࣜͰࣗಈੜ͢Δ࣌ʹ͏ •
`npm install -D react-docgen-typescript-loader` • webpack.config.js `use: [require.resolve('ts-loader'), require.resolve(‘react-docgen-typescript-loader')],` https://github.com/strothj/react-docgen-typescript-loader
12 ಋೖָ͍͢͝ • ϝϯςେมͦ͏͚ͩͲɺಠཱͨ͠ڥͰ6*ίϯϙʔωϯτΛ։ ൃͰ͖ΔͷϝϦοτେ͖ͦ͏ ΤϯδχΞઢ • StoryΛ࡞Δͷ͕େมͳίϯϙʔωϯτͦͦઃܭ͕͓͔͠ ͍ʁ •
࠶ར༻ੑɺదͳίϯϙʔωϯτׂΛߟ͑Δ͍͍͖͔͚ͬʹͳ Δ͔
13 Thanks
14 ࢀߟϦϯΫ • https://github.com/storybooks/storybook • https://www.learnstorybook.com/ • https://storybook.js.org/docs/guides/guide-react/ • https://storybook.js.org/docs/configurations/typescript-
config/