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

React Storybook を触ってみる

React Storybook を触ってみる

2016/12/19 React LT 忘年会のLT資料です。

Shingo Yamazaki

December 19, 2016
Tweet

More Decks by Shingo Yamazaki

Other Decks in Programming

Transcript

  1. React StorybookΛ
    ৮ͬͯΈΔ
    2016.12.19 React LT ๨೥ձ

    View full-size slide

  2. ࢁ㟒ɹਅޗ

    גࣜձࣾνʔϜεϐϦοτ

    (2016೥2݄ʙ)
    zaki___yama

    Blog: http://dackdive.hateblo.jp/
    લ৬Ͱ͸αʔόʔαΠυ։ൃ͕த৺

    Reactྺ = JavaScriptྺɿ໿8ϲ݄
    ࣗݾ঺հ

    View full-size slide

  3. React ࠷ۙͷ೰Έ

    View full-size slide

  4. • ಋೖɾֶशίετ
    • πʔϧͷൺֱͱબఆ
    • ࢖༻͢ΔπʔϧͷAPIΛ֮͑ͨΓ
    • UI ·ΘΓ͸มԽ͕ܹ͍͠
    • ͔ͤͬ͘ॻ͍ͨςετ͕ෛ࠴ʹͳΔՄೳੑ
    React ςετͷ೰Έ

    View full-size slide

  5. • ԿΛςετ͢Δʁͱ͍͏໰୊
    • React ίϯϙʔωϯτʹରͯ͠ςετ͢Δͷ͸ɺ

    ʮਖ਼͍͠ Html ͕ੜ੒͞Ε͍ͯΔ͜ͱʯʁ
    • ͲΕ͚ͩςετΛॻ͍ͯ΋ɺ࠷ऴతͳݟͨ໨͸
    ਓͷ໨Ͱ֬ೝ͠ͳ͍ͱ͍͚ͳ͍
    React ςετͷ೰Έ

    View full-size slide

  6. • ίϯϙʔωϯτ͕ظ଴௨Γͷݟͨ໨ʹͳ͍ͬͯΔ͜ͱ
    • ίϯϙʔωϯτ͕ظ଴௨Γಈ࡞͢Δ͜ͱ
    • ༩͑ΒΕͨ props Λݩʹద੾ͳඳըΛߦ͏
    • ϘλϯΫϦοΫͳͲͷΞΫγϣϯʹରͯ͠Πϕϯτ
    ϋϯυϥ͕ద੾ʹݺ͹ΕΔ
    • ͦͷͱ͖ʹظ଴ͨ͠ύϥϝʔλ͕౉͖͍ͬͯͯΔ
    ࠷௿ݶɺ֬ೝ͍ͨ͜͠ͱ

    View full-size slide

  7. ίϯϙʔωϯτ୯ҐͰ
    ݟͨ໨ͱಈ࡞Λ
    αΫοͱ֬ೝ͢Δํ๏͸
    ͳ͍ͷ͔ʁ

    View full-size slide

  8. README.md ΑΓɿ
    “React Storybook is a UI development environment for
    your React components. With it, you can visualize
    different states of your UI components and develop
    them interactively.”
    “React Storybook runs outside of your app. So you can
    develop UI components in isolation without worrying
    about app specific dependencies and requirements.”
    React Storybook?

    View full-size slide

  9. ReduxͷTodoMVCΛྫʹ
    IUUQTHJUIVCDPNSFBDUKTSFEVYUSFFNBTUFSFYBNQMFTUPEPNWD

    View full-size slide

  10. Πϯετʔϧ
    getstorybook ͱ͍͏CLIͰ؆୯ʹΠϯετʔϧͰ͖Δ

    View full-size slide

  11. ֬ೝ͍ͨ͜͠ͱ
    • placeholder͕දࣔ͞ΕΔ
    • ςΩετ͕ೖྗͰ͖Δ
    • EnterΩʔԡԼͰ this.props.onSave ͕࣮ߦ͞ΕΔ
    StoryΛॻ͘
    ྫɿ

    View full-size slide

  12. ετʔϦʔΛάϧʔϐϯά͢Δɻ
    ௨ৗ͸ίϯϙʔωϯτ୯ҐʹͳΔ͸ͣ
    BEE
    Ͱ
    ͻͨ͢ΒετʔϦʔΛ௥Ճ͢Δ
    ΞΫγϣϯ࣮ߦ࣌ͷϩάग़ྗʹඞཁ
    ʢޙड़ʣ

    View full-size slide

  13. ׬੒ͨ͠Storybook

    View full-size slide

  14. DEMO
    https://github.com/zaki-yama/react-storybook-sample

    View full-size slide

  15. EnterΩʔΛԡͨ͠ͱ͖ͷڍಈ
    Ҿ਺ͱҰॹʹϩάग़ྗ͞ΕΔ
    Enter

    View full-size slide

  16. React Storybook
    Αͦ͞͏

    View full-size slide

  17. • React StorybookΛ࢖͏ͱ
    • ίϯϙʔωϯτ͕ظ଴௨Γͷݟͨ໨ͱೖग़
    ྗʹͳ͍ͬͯΔ͔ɺগྔͷίʔυͰ֬ೝͰ
    ͖Δ
    • ΞϓϦͱ͸ಠཱͯ͠ίϯϙʔωϯτ։ൃΛ
    ਐΊΔ͜ͱ͕Ͱ͖Δ
    ·ͱΊ

    View full-size slide