React+Storybook ことはじめ

Transcript

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

2. 2 About Me Toshihisa Tomatsu @toshi-toma @toshi__toma

3. 3 ൃදͷഎܠ • ࠷ۙɺ"UPNJD DesignͷຊΛಡΈ͸͡Ίͯ
 ͦΕΛࢼͨ͢Ίʹίϯϙʔωϯτ(React+styled- componets+TypeScript)։ൃʹStorybookΛ࢖ͬͯΈ·ͨ͠ • ReactͷϓϩδΣΫτͰStorybookΛ࢖͏࣌ͷ࿩Λ͠·͢ •

   खݩͰ༡Μͩఔ౓ͳͷͰɺӡ༻͍ͯ͘͠஌ݟ͸ͳ͍Ͱ͢

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

   ։ൃͨ͠ίϯϙʔωϯτͷڍಈΛ֬ೝ • ίϯϙʔωϯτͷςετ https://github.com/storybooks/storybook

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

6. 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. 7 $ npm run storybook

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

9. 9 With TypeScript • `$ npm i -D typescript ts-loader`

   • StorybookͷϏϧυϓϩηεͰTSXΛॲཧͰ͖ΔΑ͏ʹ `.storybook/webpack.config.js`Λ࡞੒

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

    i -D @types/storyboook__react`

11. 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. 12 ಋೖ͸ָ͍͢͝ • ϝϯς͸େมͦ͏͚ͩͲɺಠཱͨ͠؀ڥͰ6*ίϯϙʔωϯτΛ։ ൃͰ͖Δͷ͸ϝϦοτେ͖ͦ͏ ΤϯδχΞ໨ઢ • StoryΛ࡞Δͷ͕େมͳίϯϙʔωϯτ͸ͦ΋ͦ΋ઃܭ͕͓͔͠ ͍ʁ •

    ࠶ར༻ੑɺద੾ͳίϯϙʔωϯτ෼ׂΛߟ͑Δ͍͍͖͔͚ͬʹͳ Δ͔΋

13. 13 Thanks

14. 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/