Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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
640
Web技術(AR.js)でARを実現する夢を見た
Avatar for Masataka Yoshida ysd_marrrr
0
540
CodePipelineでLambdaのデプロイをしようとして躓いた話
Avatar for Masataka Yoshida ysd_marrrr
0
1.3k

Other Decks in Technology

See All in Technology
AIBuildersDay_track_A_iidaxs
Avatar for iidaxs iidaxs
3
540
プロンプトやエージェントを自動的に作る方法
Avatar for shibuiwilliam shibuiwilliam
15
15k
MLflowダイエット大作戦
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
150
たまに起きる外部サービスの障害に備えたり備えなかったりする話
Avatar for Sohei Iwahori egmc
0
340
AWS re:Invent 2025~初参加の成果と学び~
Avatar for Kubo kubomasataka
0
160
Identity Management for Agentic AI 解説
Avatar for Naohiro Fujie fujie
0
280
AI-DLCを現場にインストールしてみた：プロトタイプ開発で分かったこと･やめたこと
Avatar for Recruit recruitengineers
PRO
2
190
コンテキスト情報を活用し個社最適化されたAI Agentを実現する4つのポイント
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
1
1.7k
Connection-based OAuthから学ぶOAuth for AI Agents
Avatar for GMO Flatt Security flatt_security
0
190
2025-12-18_AI駆動開発推進プロジェクト運営について / AIDD-Promotion project management
Avatar for yayoi_dd yayoi_dd
0
140
Strands AgentsとNova 2 SonicでS2Sを実践してみた
Avatar for Yuuki Yamashita yama3133
1
1.1k
AgentCore BrowserとClaude Codeスキルを活用した 『初手AI』を実現する業務自動化AIエージェント基盤
Avatar for Hirokatsu Endo ruzia
5
380

Featured

See All Featured
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
47
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
400
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.1k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
65
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.3k
HDC tutorial
Avatar for Michiel Stock michielstock
0
260
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
61
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k

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


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