Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
実務における Vue.js と Atomic Design
Norito Uehara
May 27, 2020
Programming
0
290
実務における Vue.js と Atomic Design
Norito Uehara
May 27, 2020
Tweet
Share
Other Decks in Programming
See All in Programming
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
190
一口目から美味しいReactのスルメ本🦑
taro28
2
680
Carp言語さわってみた 〜鯉を取り戻せ編〜
tsin45
0
110
Go1.19で採用された Pattern-defeating Quicksort の紹介
po3rin
7
1.5k
NestJS_meetup_atamaplus
atamaplus
0
220
それ全部エラーメッセージに書いてあるよ!〜独学でPHPプログラミングが上達するたった一つの方法〜
77web
1
160
YATA: collaborative documents and how to make them fast
horusiath
1
170
話題の AlloyDB は本当に凄いデータベースなのでプレビューを使い倒した #devio2022
maroon1st
0
13k
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
uggds
32
13k
kintone × LINE Bot で餃子検定Botを作った話
naberina
0
340
kintoneでランダム取得を作ってみた(imoniCamp 2022-07-27)
shokun1108
0
150
ZOZOTOWNにおけるDatadogの活用と、それを支える全社管理者の取り組み / 2022-07-27
tippy
1
3.4k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
Designing Experiences People Love
moore
130
22k
The Invisible Customer
myddelton
110
11k
Statistics for Hackers
jakevdp
782
210k
Code Reviewing Like a Champion
maltzj
506
37k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
107
16k
A Philosophy of Restraint
colly
192
15k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Facilitating Awesome Meetings
lara
29
4.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
940
Clear Off the Table
cherdarchuk
79
290k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
269
12k
Transcript
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design May 27, 2020 ࣮ʹ͓͚Δ Vue.js
ͱ Atomic Design
ࣗݾհ ໊લ ্ݪ ಙਓ ॴଐ Crevo גࣜձࣾ ৬ ϦʔυΤϯδχΞ ܦྺ
ԭೄͰ 7 ɺ౦ژͰ Crevo Ͱ 3 ։ൃऀͱͯ͠׆ ಈத ͖ͳΤσΟλ Emacs ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
Crevo ͱ ʮಈը৽࣌ͷΫϦΤΠλʔܦࡁݍΛͭ͘Δɻ ʯͱ͍͏ϛογϣϯ Λܝ͛ͯ׆ಈ͍ͯ͠ΔελʔτΞοϓاۀͰ͢ɻ Crevo https://corp.crevo.jp ࣮ʹ͓͚Δ Vue.js ͱ
Atomic Design
Crevo ͷ֤छαʔϏε Crevo Pro ༧ࢉ༻్ʹ߹Θͤͨ࠷దͳಈըΛاըʙ੍࡞·ͰҰ؏͢Δಈը ੍࡞αʔϏεಈը੍࡞αʔϏε https://crevo.jp ࣮ʹ͓͚Δ Vue.js ͱ
Atomic Design
Crevo ͷ֤छαʔϏε Crevo Jobs ࠃ֎ 7,000 ໊Λӽ͑ΔϓϩಈըΫϦΤΠλʔͱͷϚονϯά αʔϏε https://jobs.crevo.jp ࣮ʹ͓͚Δ
Vue.js ͱ Atomic Design
Crevo ͷ֤छαʔϏε Crevo Base ΫϦΤΠςΟϒ੍࡞ʹಛԽ੍ͨ͠࡞ཧπʔϧ https://base.crevo.jp ࣮ʹ͓͚Δ Vue.js ͱ Atomic
Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design Crevo ͷγεςϜʹ Vue.js ͱ Atomic
Design Λಋೖͯ͠ಘΒΕͨ ݟΛڞ༗͠·͢ ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design લఏ 2014 ͔Β։ൃ͞Εଓ͚ͯΔͦΕͳΓͷྺ࢙͕͋Δ Web Ξ
ϓϦέʔγϣϯ جຊతʹαʔόαΠυΤϯδχΞ͕ϝϯς͖ͯͨ͠ ͦͷͨΊ jQuery ͕׆༂ͯͨ͠Γ CSS पΓ͕ࠞಱͷۃΈͩͬ ͨΓ͢Δ Ember.js ೖͬͯΔ͚ͲॏྔڃͰѻ͍ͮΒͯͭ͘Β͍ ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design ͦ͏͍͏ͱ͜ΖͰ Vue.js Λಋೖ͢Δͱ Developer Experience
͕ ্͠·͢! ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design Vue.js ͱ Atomic Design ͷ؆୯ͳઆ໌
Vue.js ίϯϙʔωϯτࢦͷ JS ϑϨʔϜϫʔΫ Atomic Design ը໘ͷߏཁૉΛ 5 ֊ʹ͚ɺ࠷ऴతͳ UI ͱ UI ͷجૅͱͳΔσβΠϯγεςϜΛಉ࣌ʹ࡞͢Δઃ ܭํ๏ Vue.js ͷίϯϙʔωϯτࢦͱ Atomic Design ͷઃܭࢥ ૬ੑ͕ྑ͍ Atomic Design ͷߏཁૉͱίϯϙʔωϯτΛ 1 ର 1 ରԠ͞ ͤΒΕΔ ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design ಋೖͯ͠࠷ऴతʹͲ͏ͳ͔ͬͨ Atomic Design Λڞ௨ݴޠͱͯ͠ઃܭͷ͕ٞͰ͖ΔΑ͏ʹ ͳͬͨ
CSS ઃܭҰ৽͞Εͯ࠶ར༻ੑ͕૿ͨ͠ BEM ࠾༻ͨ͠ͷͰطଘͷը໘ͷ͍ճ͠༰қ ݹ͍ΞϓϦݹ͍ը໘͕͖ʜʜ Storybook ͰίϯϙʔωϯτΛΧλϩάԽͨ͠ͷͰͦ͜Ͱڍ ಈ֬ೝͰ͖ͯศར ͞Βʹ CircleCI ͰӾཡՄೳʹ͍ͯ͠Δͱ֤ϒϥϯνͷ࠷৽ί ϯϙʔωϯτ͕͍ͭͰݟΕΔΑ͏ʹͨ͠ ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design CSS ه๏ͱͯ͠ BEM Λઌʹಋೖͨ͠ BEM
ಋೖલͷ CSS Scoped CSS ͔ͩΒͱ .title, .description Έ͍ͨͳΫϥ εΛྔ࢈͍ͯ͠Δͱ Slot Λͬͨ࣌ʹόοςΟϯάͯͭ͠Β ͍͜ͱʹͳΓ͕ͪ ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design όοςΟϯάྫ ίϯϙʔωϯτ <template lang='pug'> div
.title hoge child .title fuga </template> <style lang='scss' scoped> .title { font-size: 2em; } </style> ࢠίϯϙʔωϯτ <template lang='pug'> div // ͕͜͜ҙਤͤͣ 2em ʹ .title foo .content slot </template> <style lang='scss' scoped> .title { color: #00f; } </style> ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design BEM ಋೖޙͷ CSS BEM Ͱॻ͍ͯΕ
slot ΛͬͯΔ߹ʹόοςΟϯά ͕ى͖ʹ͍͘ ͜ͷ࣌ Block ίϯϙʔωϯτ໊ʹ͢Δͷ͕ϙΠϯτ ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design ίϯϙʔωϯτ <template lang='pug'> .o-parent .o-parent__title
hoge child .o-child-title fuga </template> <style lang='scss' scoped> .o-parent-title { font-size: 2em; } </style> ࢠίϯϙʔωϯτ <template lang='pug'> .o-child // Өڹड͚ͳ͍ .o-child__title foo .o-child__content slot </template> <style lang='scss' scoped> .o-child-title { color: #00f; } </style> ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design ίϯϙʔωϯτͷઃܭ Atomic Design ಋೖલ ໌֬ͳࢦ͕ͳͯ͘ɺ࠶ར༻ੑͷͳ͍ίϯϙʔωϯτ͕࡞ΒΕ͕
ͪͩͬͨ A ʮίϯϙʔωϯτͰ͖·ͨ͠! ʯ B ( Θ͋ɺશ෦ೖΓͰ࠶ར༻Ͱ͖ͳ͍ʙ) B ʮ͜ͷ··ͩͱ࠶ར༻ੑ͕͍͔Βׂ͍ͯ͜͠͏͔ʯ A ʮͲ͏ׂ͠·͔͢? ʯ B ( ຖׂͷ૬ஊʹͳΔͳ͋ʜʜ) ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design Atomic Design ಋೖޙ Atomic Design
Λࢦʹ͢Δͱڞ௨ͷݴ༿Ͱઃܭͷ͕Ͱ͖ΔΑ ͏ʹͳͬͨ A ʮMolecule ίϯϙʔωϯτͰ͖·ͨ͠! ͜͜طଘͷ Atom Λ͍·ͨ͠ʯ B ʮ͓ɺ͍͍Ͷ! ͜͜ Organism ʹׂ͍ͯ͠ΔͶɻ͔͠ ͯ͠ Molecule Ͱ͍͍ͷͰʯ A ʮ୯ମͰཱ͍ࣗͯ͠ΔͷͰ Organism ͕ద͔ͱ! ʯ B ʮͳΔ΄Ͳʙʯ ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design CSS ͷϝϯςφϯεੑ Atomic Design ಋೖલͷ
CSS ࡶʹ HTML, CSS Λॻ͍ͯΔͱ BEM Λͬͯ B__E__E__E_M Έ͍ͨͳ͜ͱʹͳΓ͕ͪ Α͋͘ΔΞϯνύλʔϯ 3 ֊Ҏ্ਂ͘ͳΔͱϝϯςφϯεͱͯͭΒ͍ ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design ྫ (Pug) .form label.form__row input.form__row__input.form__row__input--disabled
ྫ (SASS) .form &__row &__input &--disabled ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design Atomic Design ಋೖޙͷ CSS Atomic
Design ϕʔεͰίϯϙʔωϯτׂ͢Ε֊Խ͞Εͨ ֤ίϯϙʔωϯτͰ CSS ͕ॻ͔ΕΔͷͰ BEM ͷ֊ਂ͘ͳΓ ʹ͍͘ ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design ྫ (Pug) .o-form label.m-form-row input.a-input.a-input--disabled
ྫ (SASS) .o-form .m-form-row .a-input &--disabled ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design طଘͷը໘ͷ CSS ͷ͍ճ͠ ଉͷ͍γεςϜͰ Vue
Λಋೖͯͯ͠ੲͷը໘ Vue Ͱͳ͍͜ͱ͕ଟʑ͋Δ ίϯϙʔωϯτͷ CSS Λͦ͏͍͏ը໘ʹద༻ͨ͘͠ͳΔ ˠ ͜ͷ߹ BEM Ͱॻ͍ͯΕطଘͷ CSS ͱͷόοςΟ ϯά͕ى͖ʹ͍͘ ͜͜ྫΛग़͠ʹ͍͘ͷͰׂѪʜʜ ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design CircleCI Ͱ storybook Λ build
͢Δͱศར खݩͷϚγϯͰ storybook Λಈ͔ͯ͠σβΠφʔʹݟ͑ ͳ͍ ֤ϒϥϯνͰίϯϙʔωϯτΛ૿ͨ͠ࡍʹ֬ೝͯ͠Β ͍͍ͨ ˠ CircleCI ͰͦΕΛ୭ͰݟΕΔͱ֬ೝ࡞ۀ͕ḿΔ ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design CircleCI ͷઃఆྫ build_storybook: executor: ruby
steps: - restore_workspace: reload: false - run: command: | yarn run build-storybook -c .storybook \ -o /tmp/storybook-static - store_artifacts: path: /tmp/storybook-static destination: storybook ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design Cirlce CI ͷ Artifacts ࣮ʹ͓͚Δ
Vue.js ͱ Atomic Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design ࣮ࡍͷը໘ ࣮ʹ͓͚Δ Vue.js ͱ Atomic
Design
࣮ʹ͓͚Δ Vue.js ͱ Atomic Design Vue.js ͱ Atomic Design Λಋೖͨ݁͠Ռ
Atomic Design Λڞ௨ݴޠͱͯ͠ઃܭͷ͕ٞͰ͖ΔΑ͏ʹ ͳͬͨ CSS ઃܭҰ৽͞Εͯ࠶ར༻ੑ͕૿ͨ͠ BEM ಉ࣌࠾༻ͨ͠ͷͰطଘͷը໘ͷ͍ճ͠༰қ ݹ͍ΞϓϦݹ͍ը໘͕͖ʜʜ Storybook ͰίϯϙʔωϯτΛΧλϩάԽͨ͠ͷͰͦ͜Ͱڍ ಈ֬ೝͰ͖ͯศར ͞Βʹ CircleCI ͰӾཡՄೳʹ͍ͯ͠Δͱ֤ϒϥϯνͷ࠷৽ί ϯϙʔωϯτ͕͍ͭͰݟΕΔΑ͏ʹͨ͠ ࣮ʹ͓͚Δ Vue.js ͱ Atomic Design
࠷ޙʹ ಈըࢢͷࣗࣾ SaaS αʔϏε։ൃΛ͍ͨ͠ΤϯδχΞΛืूத Ͱ͢! https://corp.crevo.jp/recruit/engineer ࣮ʹ͓͚Δ Vue.js ͱ Atomic
Design