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

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

Avatar for Masataka Yoshida Masataka Yoshida
April 17, 2020
Technology
0
230

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

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

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

Avatar for Masataka Yoshida

Masataka Yoshida

April 17, 2020
Tweet

More Decks by Masataka Yoshida

See All by Masataka Yoshida
あなたのOrganizationどうなの？Qiita API と スクレイピング
Avatar for Masataka Yoshida ysd_marrrr
0
680
AWSのコンテナウォークスルー
Avatar for Masataka Yoshida ysd_marrrr
0
450
「使いどころ」 からはじめるVuex
Avatar for Masataka Yoshida ysd_marrrr
1
1.9k
Firebaseで Twitterアカウントを使った Webアプリを作る🔥
Avatar for Masataka Yoshida ysd_marrrr
0
650
Web技術(AR.js)でARを実現する夢を見た
Avatar for Masataka Yoshida ysd_marrrr
0
550
CodePipelineでLambdaのデプロイをしようとして躓いた話
Avatar for Masataka Yoshida ysd_marrrr
0
1.3k

Other Decks in Technology

See All in Technology
AWS re:Inventre:cap ～AmazonNova 2 Omniのワークショップを体験してきた～
Avatar for NRI Netcom nrinetcom
PRO
0
130
歴史から学ぶ、Goのメモリ管理基礎
Avatar for Takuto Nagami logica0419
10
2k
re:Invent2025 セッションレポ ～Spec-driven development with Kiro～
Avatar for NRI Netcom nrinetcom
PRO
2
170
田舎で20年スクラム（後編）：一個人が企業で長期戦アジャイルに挑む意味
Avatar for Tomonori Fukuta chinmo
1
1.1k
「駆動」って言葉、なんかカッコイイ_Mitz
Avatar for comucal comucal
PRO
0
130
AWS re:Invent2025最新動向まとめ（NRIグループre:Cap 2025）
Avatar for KoheiGamo gamogamo
0
150
産業的変化も組織的変化も乗り越えられるチームへの成長 〜チームの変化から見出す明るい未来〜
Avatar for KAKEHASHI kakehashi
PRO
1
290
Cloud WAN MCP Serverから考える新しいネットワーク運用 / 20251228 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
0
130
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
2.9k
2025年のデザインシステムとAI 活用を振り返る
Avatar for Tech Leverages leveragestech
0
690
Oracle Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
2
670
AWSと生成AIで学ぶ！実行計画の読み解き方とSQLチューニングの実践
Avatar for やくも yakumo
2
190

Featured

See All Featured
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
530
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
200
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
290
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
130
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
92
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
300
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
76
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
6.8k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
45k

Transcript

  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/

  4. None

  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ͷ؅׋֎


    ख࡞ۀͰషΓ෇͚Δ͔
 ɹɹɹɹΛಋೖ͠Α͏ ؆୯ͳಋೖͰ
 ෦඼୯ҐͰ։ൃͰ͖ΔମݧΛ