Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React+Storybook ことはじめ

React+Storybook ことはじめ

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

E9ce07196f470caff07053e98a88fa9e?s=128

Toshihisa Tomatsu

May 27, 2019
Tweet

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/