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/

Toshihisa Tomatsu

May 27, 2019
Tweet

More Decks by Toshihisa Tomatsu

Other Decks in Technology

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