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
220

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
660
AWSのコンテナウォークスルー
Avatar for Masataka Yoshida ysd_marrrr
0
440
「使いどころ」 からはじめるVuex
Avatar for Masataka Yoshida ysd_marrrr
1
1.9k
Firebaseで Twitterアカウントを使った Webアプリを作る🔥
Avatar for Masataka Yoshida ysd_marrrr
0
580
Web技術(AR.js)でARを実現する夢を見た
Avatar for Masataka Yoshida ysd_marrrr
0
530
CodePipelineでLambdaのデプロイをしようとして躓いた話
Avatar for Masataka Yoshida ysd_marrrr
0
1.3k

Other Decks in Technology

See All in Technology
FastAPIの魔法をgRPC/Connect RPCへ
Avatar for MonotaRO monotaro
PRO
1
690
「Verify with Wallet API」を アプリに導入するために
Avatar for hinakko hinakko
1
220
多野優介
Avatar for 多野優介 tanoyusuke
1
200
KMP の Swift export
Avatar for Koki Hirokawa kokihirokawa
0
320
OpenAI gpt-oss ファインチューニング入門
Avatar for kmotohas kmotohas
2
880
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
Avatar for BrainPad brainpadpr
23
16k
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
Avatar for Sagara sagara
0
190
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
Avatar for Preferred Networks pfn
PRO
1
840
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
Avatar for oracle4engineer oracle4engineer
PRO
2
5.4k
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
Avatar for Satoru Ishikawa ishikawa_satoru
1
290
Green Tea Garbage Collector の今
Avatar for zchee zchee
PRO
2
380
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
20k

Featured

See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
54
3k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
209
24k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
960
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Navigating Team Friction
Avatar for Lara Hogan lara
189
15k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
Visualization
Avatar for Eitan Lees eitanlees
148
16k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.8k

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


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