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
   

   View Slide

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

   View Slide

3. 3
   ൃදͷഎܠ
   • ࠷ۙɺ"UPNJD DesignͷຊΛಡΈ͸͡Ίͯ

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. 7
   $ npm run storybook
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

13. 13
    Thanks
    

    View Slide

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/
    

    View Slide