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
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
130
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
170
What’s new in Android development tools
yanzm
0
320
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
OPENLOGI Company Profile for engineer
hr01
1
34k
ゼロからはじめる採用広報
yutadayo
3
950
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
22k
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
260
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
290
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
Music & Morning Musume
bryan
46
6.6k
KATA
mclloyd
30
14k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Side Projects
sachag
455
42k
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ͷ֎
ख࡞ۀͰషΓ͚Δ͔ ɹɹɹɹΛಋೖ͠Α͏ ؆୯ͳಋೖͰ ෦୯ҐͰ։ൃͰ͖ΔମݧΛ