Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
StorybookでWeb UI部品開発のススメ
Search
Masataka Yoshida
April 17, 2020
Technology
0
210
StorybookでWeb UI部品開発のススメ
Storybookってよく聞くけどフロントエンドフレームワークを導入していなくても使えるの?簡単な使い方を解説。
Storybookの設定ファイルがmain.jsにまとめられた5.3対応版。
Masataka Yoshida
April 17, 2020
Tweet
Share
More Decks by Masataka Yoshida
See All by Masataka Yoshida
あなたのOrganizationどうなの?Qiita API と スクレイピング
ysd_marrrr
0
660
AWSのコンテナウォークスルー
ysd_marrrr
0
430
「使いどころ」 からはじめるVuex
ysd_marrrr
1
1.9k
Firebaseで Twitterアカウントを使った Webアプリを作る🔥
ysd_marrrr
0
580
Web技術(AR.js)でARを実現する夢を見た
ysd_marrrr
0
520
CodePipelineでLambdaのデプロイをしようとして躓いた話
ysd_marrrr
0
1.3k
Other Decks in Technology
See All in Technology
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
570
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
110
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.5k
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
450
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
290
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1k
はじめてのOSS開発からみえたGo言語の強み
shibukazu
1
270
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
220
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
180
slog.Handlerのよくある実装ミス
sakiengineer
4
190
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
490
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing Experiences People Love
moore
142
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
For a Future-Friendly Web
brad_frost
180
9.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
The Pragmatic Product Professional
lauravandoore
36
6.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Designing for Performance
lara
610
69k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Transcript
2020/04/17ɹ4݄LTձ㱬(▀¯▀⊂) StorybookͰWeb UI෦։ൃͷεεϝ Masataka Yoshida
Masataka Yoshida https://www.y-mix.dev/ ࣗݾհ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ ͜ͷαΠτNuxt.jsͱStorybookΛͬͯ ։ൃ͍ͯ͠·͢ʂ
࠷ۙ • Nuxt.js • Laravel • Python(όον) • MySQL Λdocker-composeͰಈ͔ͯ͠ ੳπʔϧΛ࡞͍ͬͯ·͢
Storybook WebͷUI෦Χλϩάπʔϧ ࣗݾհ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ https://storybook.js.org/
None
StorybookಋೖͷϝϦοτ (Α͘ݴΘΕ͍ͯΔ)ͳͥಋೖ͖͔͢ ࣗݾհ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ ύʔπʹूதͰ͖Δ ΤϯδχΞͰͳͯ͘ύʔπͷ֬ೝ͕Ͱ͖Δ ϖʔδɾػೳͷ։ൃΛͨͣʹύʔπ͕࡞ΕΔ
ݸਓతʹ ϖʔδͷΰνϟΰνϟ͔Βղ์͞Ε͍ͨ ࣗݾհ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ ϓϩδΣΫτʹ్தͰࢀըͯ͠ ϞοΫΞοϓΛड͚औͬͯ ͦͷதͰҰͭͷύʔπɹ
ΛՃ͍͕ͨ͠… ←͜ͷΜʹՃ͠ͱ͍ͯʙ ͗Ό่͋͋Εͨ͊͊ Ͳ͜ฤू͢Ε͍͍Μͩ͊͊
Πέ͍ͯΔϑϩϯτΤϯυϑϨʔϜϫʔΫ ͷͰ͠ΐʁ
Πέ͍ͯΔϑϩϯτΤϯυϑϨʔϜϫʔΫ ͷͰ͠ΐʁ
HTMLͰಋೖ͠Α͏ গͳ͍ͳ͕Β࠾༻ྫΞϦ ࣗݾհ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ Raksul ENGINEERING CSSελΠϧΨΠυΛ
Storybook for HTMLʹҠߦͨ͠ https://tech.raksul.com/2020/03/12/migrate-styleguide-to-storybook/ ࢲ
StorybookͷॳظԽ Node.jsʹଐ͍ͯ͠ΔnpxΛ࣮ߦ͢Δ ࣗݾհ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔
Storybookͷઃఆ ϑΝΠϧ͕ੜ͞Ε͍ͯΔͷͰઃఆΛมߋ͢Δ ࣗݾհ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ ͳΜͱ Node.jsͷϓϩδΣΫτͷ༗ແ ࣗಈͰผͯ͠
Α͠ͳʹͬͯ͘ΕΔκ!! ./.storybook/main.js main.js͔ΒΈͨ UI෦ͷॴΛઃఆ
෦ɾετʔϦʔͷ४උ HTMLͱindex.stories.jsΛ༻ҙ͢Δ ࣗݾհ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ ./components/sample/index.stories.js ./components/sample/default.html
ࢼͯ͠ΈΔ Npm run storybook ࣗݾհ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔
ຊ͓͠·͍
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ʹॻ͘ݹ͍ํ๏͋ΔͨΊҙ
ศརͳAddon StorybookΛ“୯ͳΔΧλϩά”Ͱͳ͘͢Δ ࣗݾհ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ @storybook/addon-docs StorybookΛυΩϡϝϯτͱͯ͠ ͑ΔΑ͏ʹ͢Δ
@storybook/addon-knobs Storybook্Ͱ෦ͷઃఆΛ ม͑Δ͜ͱ͕Ͱ͖Δ
·ͱΊ StorybookΛಋೖͯ͠ Ͱɺ ෦ΛΈ߹ΘͤΔʹʁ ࣗݾհ HTMLʹಋೖ͠Α͏ ศརͳAddon ·ͱΊ ͳͥStorybook͔ Storybookͷ֎
ख࡞ۀͰషΓ͚Δ͔ ɹɹɹɹΛಋೖ͠Α͏ ؆୯ͳಋೖͰ ෦୯ҐͰ։ൃͰ͖ΔମݧΛ