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
知られざるprops命名の慣習 アクション編
uhyo
11
2.7k
モダンフロントエンド 開発研修
recruitengineers
PRO
5
2.1k
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
ueokande
0
200
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
200
Goss: Faiss向けの新しい本番環境対応 Goバインディング #coefl_go_jp
bengo4com
0
1.4k
Webアクセシビリティ入門
recruitengineers
PRO
2
890
認知戦の理解と、市民としての対抗策
hogehuga
0
390
実践AIガバナンス
asei
3
160
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
10
4.1k
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
4
840
【Oracle Cloud ウェビナー】[最新動向]:AIエージェント大量生産時代に突入、AI-Readyなデータプラットフォームのススメ
oracle4engineer
PRO
3
110
ゆるふわエンジニアでもAIフローにチャレンジしたい!!~Zapierのすゝめ~
masakiokuda
2
100
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Making Projects Easy
brettharned
117
6.3k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Documentation Writing (for coders)
carmenintech
73
5k
Code Review Best Practice
trishagee
70
19k
Six Lessons from altMBA
skipperchong
28
4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
How to Ace a Technical Interview
jacobian
279
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
A Modern Web Designer's Workflow
chriscoyier
695
190k
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ͷ֎
ख࡞ۀͰషΓ͚Δ͔ ɹɹɹɹΛಋೖ͠Α͏ ؆୯ͳಋೖͰ ෦୯ҐͰ։ൃͰ͖ΔମݧΛ