StorybookでWeb UI部品開発のススメ

Storybookってよく聞くけどフロントエンドフレームワークを導入していなくても使えるの？簡単な使い方を解説。

Storybookの設定ファイルがmain.jsにまとめられた5.3対応版。

1. 2020/04/17ɹ4݄LTձ㱬(▀¯▀⊂) StorybookͰWeb UI෦඼։ൃͷεεϝ Masataka Yoshida
2. Masataka Yoshida https://www.y-mix.dev/ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ ͜ͷαΠτ΋Nuxt.jsͱStorybookΛ࢖ͬͯ ։ൃ͍ͯ͠·͢ʂ ࠷ۙ͸ • Nuxt.js • Laravel • Python(όον) • MySQL Λdocker-composeͰಈ͔ͯ͠
 ෼ੳπʔϧΛ࡞͍ͬͯ·͢
3. Storybook WebͷUI෦඼Χλϩάπʔϧ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ https://storybook.js.org/
5. StorybookಋೖͷϝϦοτ (Α͘ݴΘΕ͍ͯΔ)ͳͥಋೖ͢΂͖͔ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ ύʔπʹूதͰ͖Δ ΤϯδχΞͰͳͯ͘΋ύʔπͷ֬ೝ͕Ͱ͖Δ ϖʔδɾػೳͷ։ൃΛ଴ͨͣʹύʔπ͕࡞ΕΔ
6. ݸਓతʹ͸ ϖʔδ಺ͷΰνϟΰνϟ͔Βղ์͞Ε͍ͨ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ ϓϩδΣΫτʹ్தͰࢀըͯ͠ ϞοΫΞοϓΛड͚औͬͯ ͦͷதͰҰͭͷύʔπɹ Λ௥Ճ͍͕ͨ͠… ←͜ͷ΁Μʹ௥Ճ͠ͱ͍ͯʙ ͗Ό่͋͋Εͨ͊͊ Ͳ͜ฤू͢Ε͹͍͍Μͩ͊͊
7. Πέ͍ͯΔϑϩϯτΤϯυϑϨʔϜϫʔΫ ͷ࿩Ͱ͠ΐʁ
8. Πέ͍ͯΔϑϩϯτΤϯυϑϨʔϜϫʔΫ ͷ࿩Ͱ͠ΐʁ
9. HTMLͰ΋ಋೖ͠Α͏ গͳ͍ͳ͕Β΋࠾༻ྫΞϦ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ Raksul ENGINEERING
 CSSελΠϧΨΠυΛ
 Storybook for HTMLʹҠߦͨ͠࿩ https://tech.raksul.com/2020/03/12/migrate-styleguide-to-storybook/ ࢲ
10. StorybookͷॳظԽ Node.jsʹ෇ଐ͍ͯ͠ΔnpxΛ࣮ߦ͢Δ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔
11. Storybookͷઃఆ ϑΝΠϧ͕ੜ੒͞Ε͍ͯΔͷͰઃఆΛมߋ͢Δ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ ͳΜͱ
 Node.jsͷϓϩδΣΫτͷ༗ແ΋
 ࣗಈͰ൑ผͯ͠
 Α͠ͳʹ΍ͬͯ͘ΕΔκ!! ./.storybook/main.js main.js͔ΒΈͨ
 UI෦඼ͷ৔ॴΛઃఆ
12. ෦඼ɾετʔϦʔͷ४උ HTMLͱindex.stories.jsΛ༻ҙ͢Δ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ ./components/sample/index.stories.js ./components/sample/default.html
13. ࢼͯ͠ΈΔ Npm run storybook ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔
14. ຊ೔͸͓͠·͍
15. CSS/SCSSͷಡΈࠐΈ ύοέʔδͷಋೖͱStorybookͷઃఆมߋ͕ඞཁ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ ./components/sample/index.stories.js ./.storybook/main.js 2020/04/17ݱࡏͷ࠷৽൛(Storybook 5.3ܥ)͸./storybook/main.jsʹઃఆΛॻ͘
 ./.storybook/webpack.config.jsʹॻ͘ݹ͍ํ๏΋͋ΔͨΊ஫ҙ
16. ศརͳAddon StorybookΛ“୯ͳΔΧλϩά”Ͱ͸ͳ͘͢Δ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ @storybook/addon-docs StorybookΛυΩϡϝϯτͱͯ͠
 ࢖͑ΔΑ͏ʹ͢Δ @storybook/addon-knobs Storybook্Ͱ෦඼ͷઃఆ஋Λ
 ม͑Δ͜ͱ͕Ͱ͖Δ
17. ·ͱΊ StorybookΛಋೖͯ͠ Ͱɺ
 ෦඼Λ૊Έ߹ΘͤΔʹ͸ʁ ࣗݾ঺հ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ Storybookͷ؅׋֎
 ख࡞ۀͰషΓ෇͚Δ͔
 ɹɹɹɹΛಋೖ͠Α͏ ؆୯ͳಋೖͰ
 ෦඼୯ҐͰ։ൃͰ͖ΔମݧΛ