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
52
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
52
Supabase + Nuxt3 の実装素振りで チャットアプリを作ってみた
redamoon
1
150
Movable Type を Headless CMS として活用した Jamstack開発手法
redamoon
0
110
Data APIを活用したWEBサイト構築手法
redamoon
1
48
sacss110_pdf.pdf
redamoon
1
81
Movable Type 7を触ってみた
redamoon
0
200
HTML・CMSから考えるコンポーネント化について
redamoon
1
280
おれの使うさいきょうえでぃた
redamoon
0
160
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
Why Our Code Smells
bkeepers
PRO
331
56k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Adopting Sorbet at Scale
ufuk
68
8.6k
The Invisible Customer
myddelton
114
12k
Designing with Data
zakiwarfel
96
4.8k
Producing Creativity
orderedlist
PRO
337
39k
The Cult of Friendly URLs
andyhume
74
5.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Side Projects
sachag
451
41k
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