React+Storybook ことはじめ

React.js meetup #7 (LT会)の資料です。
https://reactjs-meetup.connpass.com/event/130682/

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/