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
200
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
640
AWSのコンテナウォークスルー
ysd_marrrr
0
420
「使いどころ」 からはじめるVuex
ysd_marrrr
1
1.8k
Firebaseで Twitterアカウントを使った Webアプリを作る🔥
ysd_marrrr
0
570
Web技術(AR.js)でARを実現する夢を見た
ysd_marrrr
0
510
CodePipelineでLambdaのデプロイをしようとして躓いた話
ysd_marrrr
0
1.2k
Other Decks in Technology
See All in Technology
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
140
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
250
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
110
What’s new in Android development tools
yanzm
0
310
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.8k
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
Operating Operator
shhnjk
1
580
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
270
AWS認定を取る中で感じたこと
siromi
1
190
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Thoughts on Productivity
jonyablonski
69
4.7k
Optimizing for Happiness
mojombo
379
70k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
GitHub's CSS Performance
jonrohan
1031
460k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Practical Orchestrator
shlominoach
189
11k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Faster Mobile Websites
deanohume
307
31k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
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ͷ֎
ख࡞ۀͰషΓ͚Δ͔ ɹɹɹɹΛಋೖ͠Α͏ ؆୯ͳಋೖͰ ෦୯ҐͰ։ൃͰ͖ΔମݧΛ