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
Vue meet up sapporo Vue + Storybook導入について
Search
redamoon
April 19, 2019
0
56
Vue meet up sapporo Vue + Storybook導入について
redamoon
April 19, 2019
Tweet
Share
More Decks by redamoon
See All by redamoon
MTDDCMeetupTokyo_2023_LT.pdf
redamoon
0
150
Supabase + Nuxt3 の実装素振りで チャットアプリを作ってみた
redamoon
1
360
Movable Type を Headless CMS として活用した Jamstack開発手法
redamoon
0
170
Data APIを活用したWEBサイト構築手法
redamoon
1
68
sacss110_pdf.pdf
redamoon
1
120
Movable Type 7を触ってみた
redamoon
0
230
HTML・CMSから考えるコンポーネント化について
redamoon
1
400
おれの使うさいきょうえでぃた
redamoon
0
200
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Done Done
chrislema
185
16k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Scaling GitHub
holman
462
140k
Agile that works and the tools we love
rasmusluckow
329
21k
Navigating Team Friction
lara
189
15k
Transcript
VueͱStorybookಋೖʹ͍ͭͯ v-sapporo meet up #1 2019.04.19 (ۚ) at גࣜձࣾΠϯϑΟχοτϧʔϓ ିձٞࣨ
ϓϩϑΟʔϧ ؔޱ༐थ גࣜձࣾ)".803,4ϑϩϯτΤϯυΤϯδχΞ ओͳۀɿ)5.-ɾ$44ɾ+BWB4DSJQUɾ$.4ߏங ͖ͳ$.4ɿ.PWBCMF5ZQFɾ$SBGUDNT 4/4#MPH 5XJUUFSɿ!SFEBNPPO (JUIVCɿSFEBNPPO #MPHɿIUUQTSFEBNPPOOFU
࠷ۙͷझຯ %:*Ͱఉ࡞ΔͨΊͷ͍ͯ͠Δʢʣ # Who Are You?
Storybookʹ͍ͭͯ Vue + Stoybookಋೖखॱ Addonಋೖखॱ Demo ಋೖͷॴײ ·ͱΊ # ࣍
https://storybook.js.org/ # Storybookʹ͍ͭͯ Storybookͱʁ 3FBDUɾ7VFɾ"OHVMBSͳͲͷ6*ίϯϙʔωϯ τΛ։ൃ͢ΔͨΊͷΦʔϓϯιʔεπʔϧ 6*ΛϒϥβͰදࣔͤͨ͞Γίϯϙʔωϯτ ͷঢ়ଶ֬ೝɾςετ͢Δ͜ͱ͕ՄೳͰ͢ɻ ҰछͷελΠϧΨΠυʹ͍ۙπʔϧͰɺ ΤϯδχΞؒΑΓσβΠφʔͱ6*ͷೝࣝΛ
֬ೝ͠߹͏πʔϧͰ͢ɻ
cd ~/workspace vue create vue-storybook // Manually select features cd
vue-storybook/ yarn add -D vue-loader sass-loader node-sass @babel/core babel-loader babel-preset-vue touch vue-config.js # Vue + Stoybookಋೖखॱ ## Vue cliͰڥߏஙʢ։ൃڥߏஙࡁΈෆཁʣ $IFDLUIFGFBUVSFTOFFEFEGPSZPVSQSPKFDU#BCFM 3PVUFS 7VFY -JOUFS 6TFIJTUPSZNPEFGPSSPVUFS 3FRVJSFTQSPQFSTFSWFSTFUVQGPSJOEFYGBMMCBDLJOQSPEVDUJPO :FT 1JDLBMJOUFSGPSNBUUFSDPOpH4UBOEBSE 1JDLBEEJUJPOBMMJOUGFBUVSFT-JOUPOTBWF 8IFSFEPZPVQSFGFSQMBDJOHDPOpHGPS#BCFM 1PTU$44 &4-JOU FUD *OEFEJDBUFEDPOpHpMFT 4BWFUIJTBTBQSFTFUGPSGVUVSFQSPKFDUT /P ઃఆ༰
const path = require('path') module.exports = { configureWebpack: { resolve:
{ alias: { '@': path.join(__dirname, '/src') } } }, css: { loaderOptions: { sass: { data: `@import "./src/assets/scss/style.scss";` } }, sourceMap: true } } # Vue + Stoybookಋೖखॱ ## vue-config.js
cd ~/workspace/vue-storybook/ yarn add -D @storybook/vue mkdir {stories,\.storybook} touch {stories/index.js,\.storybook/config.js,\.storybook/
webpack.config.js} ˞storybook cli༻ͤͣ # Vue + Stoybookಋೖखॱ ## Install Storybook
# Vue + Stoybookಋೖखॱ ## vi package.json "scripts": { "storybook":
"start-storybook -p 9000", "build-storybook": "build-storybook -c .storybook -o storybook-build" }
# Vue + Stoybookಋೖखॱ ## .storybook/config.js import { configure }
from '@storybook/vue'; const loadStories = ()=> { require('../stories/index.js'); } configure(loadStories, module);
# Vue + Stoybookಋೖखॱ ## .storybook/webpack.config.js const path = require('path');
module.exports = { module: { rules: [ { test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'], include: path.resolve(__dirname, '../'), }, ], }, };
# Vue + Stoybookಋೖखॱ ## stories/index.js // index.jsʹهड़͢Δͱίʔυ͕͘ͳΔͨΊUI୯ҐͰׂ // Story
ಡΈࠐΈ import './colorPalette' import './button'
https://storybook.js.org/docs/addons/addon-gallery/ # Addonಋೖखॱ Addonͱʁ "EEPO4UPSZCPPLͷ֦ுػೳ "EEPOΛಋೖ͢Δ͜ͱͰɺ6*ίϯϙʔωϯτ ʹΞΫγϣϯΛՃ͑ͨΓঢ়ଶΛมߋ6*͝ͱ ʹ3FBENFΛͯΔ͜ͱ͕Ͱ͖Δ ίΞϝϯςφͱ։ൃऀίϛϡχςΟͰدߘ
cd ~/workspace/vue-storybook/ yarn add -D @storybook/addon-knobs @storybook/addon-viewport @storybook/addon-notes touch .storybook/addons.js
# Addonಋೖखॱ
# Addonಋೖखॱ ## .storybook/addon.js // Πϯετʔϧͨ͠ΞυΦϯΛಡΈࠐΉ import '@storybook/addon-knobs/register' import '@storybook/addon-notes/register'
import '@storybook/addon-viewport/register'
IUUQCJUMZ7E%--4 # Demo
ωοτʹ͋Δ"EEPOͷઃఆํ๏Ͱಈ͔ͳ͍߹͕͋ΔͨΊɺඞͣެࣜΛࢀর͢Δ͜ͱ طଘϓϩδΣΫτͰɺඞͣ͠ಉσΟϨΫτϦʹΠϯετʔϧ͠ͳ͍έʔε͋ΔͨΊ ࠶ݱͤ͞ΔͨΊͷύεมߋɾϥΠϒϥϦ͕ඞཁ ϓϩδΣΫτͰ༻͍ͯ͠Δ/PEFόʔδϣϯ͕ݹ͍ͱಈ࡞͠ͳ͍έʔε͕͋ΔͨΊόʔ δϣϯʹ߹ΘͤΔ͔/PEFΛΞοϓσʔτ͢Δඞཁ͕͋Δ طଘίʔυͷσʔλ࠶ݱ͠ਏ͍ͨΊɺ4UPSZCPPL༻ͷελϒ͕ඞཁ
ೋॏཧʹͳͬͯ͠·͏͕طଘίϯϙʔωϯτ͔Βݺͼग़͢ΑΓɺ4UPSZCPPL༻ͷίϯϙʔ ωϯτͰදࣔͤͨ͞΄͏͕ελΠϧϞοΫͷௐ͕͍͢͠ UFNQMBUFݺͼग़͠෦ΛϝιουνΣʔϯͰܨ͛ͯهड़͢ΔͨΊɺίʔυࣗମͷݟ௨͕͠ ྑ͘ͳ͍ͨΊϥοϓ༻ίϯϙʔωϯτΛ࡞Δͱݟ͍͢ ֶशίετ໘͕ߴ͍ʢΞοϓσʔτʹΑΔهड़มߋͳͲʣ # ಋೖͷॴײ
ϓϩδΣΫτ୯ҐΑΓϥΠϒϥϦ୯Ґಋೖ͍͢͠ ϓϩδΣΫτ୯ҐͰෳਓ͕ίϯϙʔωϯτΛ࡞ΔͨΊɺ֤ࣗ4UPSZCPPL ͷཧղ͕ඞཁ طଘϓϩδΣΫτͷ߹ɺ৽نͰ4UPSZCPPLΛಋೖ͢Δίετߴ͍ ֶशίετߴ͍͕ɺ৽نϓϩδΣΫτͰಉࠝͯ͠ਐΊΔͱ6*ͷᴥᴪΛղফ ͍͢͠
ϓϩδΣΫτίʔυͰͳ͘ɺ4UPSZCPPL༻ͷίϯϙʔωϯτΛ༻ҙ͢Δ΄ ͏͕ྑ͍ ֦ுͯ͠ίʔυͷυΩϡϝϯτԽͰ͖ΕΤϯδχΞؒʢσβΠϯͷ߹ σβΠφʔʣͰѲ͍͢͠ # ·ͱΊ
αϯϓϧίʔυ http://bit.ly/2Dj7SqS