$30 off During Our Annual Pro Sale. View Details »

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 Slide

  2. ࢁ㟒ɹਅޗ

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

    (2016೥2݄ʙ)
    zaki___yama

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

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

    View Slide

  3. React ࠷ۙͷ೰Έ

    View Slide

  4. ςετ

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

  9. View Slide

  10. 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 Slide

  11. ࢼͯ͠ΈΔ

    View Slide

  12. ReduxͷTodoMVCΛྫʹ
    IUUQTHJUIVCDPNSFBDUKTSFEVYUSFFNBTUFSFYBNQMFTUPEPNWD

    View Slide

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

    View Slide

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

    View Slide

  15. ͷStory

    View Slide

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

    View Slide

  17. ׬੒ͨ͠Storybook

    View Slide

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

    View Slide

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

    View Slide

  20. React Storybook
    Αͦ͞͏

    View Slide

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

    View Slide