Tweet
Tweet

Slide 1

Slide 1 text

1 React+Storybook
 ͜ͱ͸͡Ί React.js meetup #7 2019/05/27 @toshi-toma

Slide 2

Slide 2 text

2 About Me Toshihisa Tomatsu @toshi-toma @toshi__toma

Slide 3

Slide 3 text

3 ൃදͷഎܠ • ࠷ۙɺ"UPNJD DesignͷຊΛಡΈ͸͡Ίͯ
 ͦΕΛࢼͨ͢Ίʹίϯϙʔωϯτ(React+styled- componets+TypeScript)։ൃʹStorybookΛ࢖ͬͯΈ·ͨ͠ • ReactͷϓϩδΣΫτͰStorybookΛ࢖͏࣌ͷ࿩Λ͠·͢ • खݩͰ༡Μͩఔ౓ͳͷͰɺӡ༻͍ͯ͘͠஌ݟ͸ͳ͍Ͱ͢

Slide 4

Slide 4 text

4 • UIίϯϙʔωϯτΛΞϓϦέʔγϣϯͱ͸ಠཱͨ͠؀ڥͰ։ൃͰ͖ Δπʔϧ • `build-storybook`ίϚϯυͰίϯϙʔωϯτϦετͷ੩తαΠ τΛੜ੒Ͱ͖ΔͷͰUIίϯϙʔωϯτΧλϩάͱͯ͠΋ • ελΠϧΨΠυίϯϙʔωϯτͷ࢓༷ • ։ൃͨ͠ίϯϙʔωϯτͷڍಈΛ֬ೝ • ίϯϙʔωϯτͷςετ https://github.com/storybooks/storybook

Slide 5

Slide 5 text

5 Storybook React Official https://storybooks-official.netlify.com

Slide 6

Slide 6 text

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",

Slide 7

Slide 7 text

7 $ npm run storybook

Slide 8

Slide 8 text

8 xx.story.js • ͋ͱ͸AYYTUPSZKTAͰ4UPSZCPPLʹදࣔ͢ΔίϯϙʔωϯτΛॻ͍ ͍͚ͯͩ͘

Slide 9

Slide 9 text

9 With TypeScript • `$ npm i -D typescript ts-loader` • StorybookͷϏϧυϓϩηεͰTSXΛॲཧͰ͖ΔΑ͏ʹ `.storybook/webpack.config.js`Λ࡞੒

Slide 10

Slide 10 text

10 With TypeScript • ࠓޙ͸AYYTUPSJFTUTYAʹॻ͍͍ͯ͘ • `.storybook/config`ϑΝΠϧΛฤू • `$ npm i -D @types/storyboook__react`

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

12 ಋೖ͸ָ͍͢͝ • ϝϯς͸େมͦ͏͚ͩͲɺಠཱͨ͠؀ڥͰ6*ίϯϙʔωϯτΛ։ ൃͰ͖Δͷ͸ϝϦοτେ͖ͦ͏ ΤϯδχΞ໨ઢ • StoryΛ࡞Δͷ͕େมͳίϯϙʔωϯτ͸ͦ΋ͦ΋ઃܭ͕͓͔͠ ͍ʁ • ࠶ར༻ੑɺద੾ͳίϯϙʔωϯτ෼ׂΛߟ͑Δ͍͍͖͔͚ͬʹͳ Δ͔΋

Slide 13

Slide 13 text

13 Thanks

Slide 14

Slide 14 text

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/