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
150
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
500
AWSのコンテナウォークスルー
ysd_marrrr
0
370
「使いどころ」 からはじめるVuex
ysd_marrrr
1
1.7k
Firebaseで Twitterアカウントを使った Webアプリを作る🔥
ysd_marrrr
0
400
Web技術(AR.js)でARを実現する夢を見た
ysd_marrrr
0
370
CodePipelineでLambdaのデプロイをしようとして躓いた話
ysd_marrrr
0
920
Other Decks in Technology
See All in Technology
オーナーシップを持つ領域を明確にする
konifar
13
3.1k
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1k
Janus
bkuhlmann
1
490
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
190
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
0
180
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
2
240
一生覚えておきたい「システム開発=コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
0
140
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
250
開発パフォーマンスを最大化するための開発体制
ham0215
2
380
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
510
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
470
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
1
230
Featured
See All Featured
Unsuck your backbone
ammeep
663
57k
Web development in the modern age
philhawksworth
202
10k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Statistics for Hackers
jakevdp
789
220k
Being A Developer After 40
akosma
57
580k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Why Our Code Smells
bkeepers
PRO
331
56k
Infographics Made Easy
chrislema
238
18k
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ͷ֎
ख࡞ۀͰషΓ͚Δ͔ ɹɹɹɹΛಋೖ͠Α͏ ؆୯ͳಋೖͰ ෦୯ҐͰ։ൃͰ͖ΔମݧΛ