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
about abstract component design using slots of ...
Search
arm4
July 10, 2019
Programming
4
1.4k
about abstract component design using slots of Vue.js
arm4
July 10, 2019
Tweet
Share
More Decks by arm4
See All by arm4
Google Data Studio 101
fromarm4
0
140
5 Points Of Customizing Vuetify
fromarm4
4
1.3k
laravel_lt_party_with_mokumoku_3
fromarm4
0
380
Make it happen in realtime with Laravel Echo and Pusher
fromarm4
0
970
Trying to write a code with Laravel+Vue+TypeScript
fromarm4
0
520
Create a Laravel notification via Slack when batch jobs are finished
fromarm4
0
760
solving frontend issues
fromarm4
1
1.6k
Popular Vue.js UI Frameworks in 2019
fromarm4
2
860
SKDs対象のWeb API設計概論〜Laravelを添えて〜
fromarm4
0
1.3k
Other Decks in Programming
See All in Programming
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
7
370
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
100
バランスを見極めよう!実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
whatasoda
2
760
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
430
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
110
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
670
TypeScriptのmoduleオプションを改めて整理する
bicstone
4
410
Use Perl as Better Shell Script
karupanerura
0
590
TSConfigからTypeScriptの世界を覗く
planck16
2
1.2k
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
200
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
izumin5210
4
460
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
170
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
830
Statistics for Hackers
jakevdp
799
220k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Visualization
eitanlees
146
16k
Embracing the Ebb and Flow
colly
85
4.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.3k
Producing Creativity
orderedlist
PRO
346
40k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Being A Developer After 40
akosma
91
590k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
610
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Transcript
7VFKTͷ4MPUΛ׆༻ͨ͠ ൚༻తίϯϙʔωϯτઃܭʹ͍ͭͯ 2019.07.10 Yoko Hato
ࣗݾհ גࣜձࣾϓϥϜβ Prime Order ࣄۀ෦ Tech Lead ോ ༸ࢠ 1SJNF0SEFSެࣜ5XJUUFS!QMVNTB
ϥϥɾϕϧࢠ͞Μͷதͷਓ ͓ؾܰʹϑΥϩʔ͍ͩ͘͞ʂ 2
1SJNF 0SEFS ࣄۀ෦ͱʁ 3 ઐੑͷߴ͍ϑϦʔϥϯεΤϯδχΞͷํͱ ࢲͨͪࣾһ͕ҰͭͷνʔϜͱͳΓ 6*ɾ69ʹͩ͜Θͬͨ ΦʔμʔϝΠυͷۀγεςϜͷ։ൃΛߦ͏ ઐूஂɻ ݴޠ1)1
+BWB4DSJQU ϑϨʔϜϫʔΫ-BSBWFM 7VFKT
ۀγεςϜΛϑϧίϯϙʔωϯτઃܭͷ41"Ͱ࡞͍ͬͯ·͢ʂ 4
5 ࠓ͢͜ͱ l 4MPUΛ͏ಈػ 4MPUΛ͏ͱ͜Μͳίϯϙʔωϯτ͕࡞ΕΔʂ l 4MPU͜ͱ͡Ί 4MPUͬͯԿʁ ໊લ͖TMPU /BNFE4MPU
ͱʁ είʔϓ͖TMPU 4DPQFE4MPU ͱʁ l 4MPU׆༻ྫ l 6*ϑϨʔϜϫʔΫΛ͓͏ʂ l 4MPUͷҙ
4MPUΛ͏ಈػ 6
4MPUΛ͏ಈػ 7 !"! " ! #
4MPUΛ͏ಈػ 8 *+(&$- %*-) " . '$),*+ ! %*-)
#$%-"
4MPUΛ͏ಈػ 9 title $)+& (*# !"$+'% props !"$+
4MPUΛ͏ಈػ 10 !'#$ #$ %"'& #& (
4MPUΛ͏ಈػ 11 props #"$!#
#"$!#
12 ίϯϙʔωϯτͷڞ௨ͷ෦͚ͩΛ ίϯϙʔωϯτԽͯ͠ɺ ͋ͱࣗ༝ʹɺ ͏࣌ʹΧελϚΠζ͍ͨ͠ʂ ڞ௨෦ • IPWFS͢Δͱπʔϧνοϓ͕දࣔ͞ΕΔ • λΠτϧͱຊจ͕͋Δ
• ͱλΠτϧͷσβΠϯ • ΞΠίϯ͕දࣔͰ͖Δ ΧελϚΠζ෦ • λΠτϧ෦ͷϑΥϯταΠζ৭ • ຊจʹՃ͢ΔίϝϯτΞΠίϯɺϑΥϯταΠζ৭
Slot 13 • ͏࣌؆ܿʹॻ͚Δ • λΠτϧ෦ͱຊจ෦ͷΧελϚΠζΛ͠Α͏ͱࢥ͏ͱ ຖճίϯϙʔωϯτͷվम͕ඞཁ • ඍົͳΧελϚΠζͷͨͼʹɺͲΜͲΜQSPQT͕૿͑Δ
Slot 14 • ͏࣌ͷهड़ྔଟ͘ͳΔ • λΠτϧ෦ͱຊจ෦ͷΧελ ϚΠζ͕ࣗࡏʹߦ͑Δ • ίϯϙʔωϯτΛվम͢Δඞཁ͕ ͳ͍
ந͕ߴ͍ΧελϚΠβϒϧͳίϯϙʔωϯτΛ࡞͢Δ͜ͱʹΑΓɺ ಉ͡ৼΔ͍Λίϐϖ͢Δඞཁͳ͘ɺඍົʹҧ͏ผʑͷίϯϙʔωϯτ ͕༰қͰ؆ܿʹ࡞Ͱ͖ΔΑ͏ʹͳΔɻ Slot 15
class ্࢘ίϝϯτίϯϙʔωϯτ $VUF.FNPίϯϙʔ ωϯτΛ্ͬͯ࢘ ίϝϯτίϯϙʔω ϯτΛ࡞Δ
TMPU͜ͱ͡Ί 16
Slot “ <slot>
https://jp.vuejs.org/v2/guid e/components-slots.html 17 ίϯϙʔωϯτΛ͏࣌ʹ දࣔ༰͕ͤΔʂ TMPU෦ʹ λάͰғ·Εͨίϯςϯπ͕ೖΔ Button Button
Slot HTML
18 Button Button
Slot
19 Button Button Button
Slot $ %#
& ' 20 Button Button"!
slot(Named Slot) ! " # 21
ActionButton ActionButton
slot(Scoped Slot) slot 22
ActionButton ActionButton ͜ͷΑ͏ʹ ίϯϙʔωϯτͷσʔλΛ εϩοτʹWCJOEͰ͓ͯ͘͠ͱ ༻࣌ͷεϩοτίϯςϯπͰ ͦͷσʔλΛ͏͜ͱ͕Ͱ͖Δ TMPUʹόΠϯυ͞ΕͨଐੑΛ εϩοτϓϩύςΟ ͱݺͿ
4MPUΛ׆༻ͨ͠ ൚༻ੑͷߴ͍ ίϯϙʔωϯτྫ 23 Slot׆༻ྫ
Slot46*: "'% 24 "'%:'!#'$ -8.51"'% -8.59/1 & '&
slot (7,3 26& '&) +0;
Scoped Slot)*&: 25 " #/-,*!"!scoped slot0( '!"!%
. +1#/$2
4MPUͷΈΛཧղ ͯ͠ 6*ϑϨʔϜϫʔΫΛ ׆༻ͯ͠ΈΑ͏ 26 UIϑϨʔϜϫʔΫΛ͓͏ʂ
Vuetify 27 Vue.jsUI 6*ίϯϙʔωϯτ͕ ඇৗʹ๛Ͱ
ΧελϚΠζੑ͕ߴ͍ʂ
28 headers header-cell items page-text ΧελϚΠζͰ͖Δ TMPU͕ͨ͘͞Μ༻ҙͯ͋͠Δʂ ίϯϙʔωϯτσʔλΛͬͯ ΧελϚΠζͰ͖Δ TDPQFETMPU๛ʂ
4MPUͷҙ 29
Slot Vue 2.6.0 ) . 30 lTMPU͓Αͼ TMPUTDPQFଐੑࠓޙͷ YϦϦʔεͰҾ͖ଓ͖αϙʔτ͞Ε·͕͢ɺ
ެࣜʹඇਪͱͳΓɺ7VF Ͱআ͞ΕΔͰ͠ΐ͏ɻz https://jp.vuejs.org/v2/guide/components-slots.html - -%! +& -%! slot *( - slotslot-scope#$ ", ' slot *( - v-slot ", ͜Ε·ͰIUNMཁૉΛ TMPUίϯςϯπͷ ίϯςφʹͰ͖ͨ WTMPUݪଇ UFNQMBUFʹ͔͠༩ Ͱ͖ͳ͍σΟϨΫςΟϒ ৄࡉυΩϡϝϯτࢀর
31 ࠷ޙʹ͓Βͤ
32 Prime Order ʹ+PJO͠·ͤΜ͔ʁ ձࣾ๚ͷ͓ਃࠐΈͪ͜Β͔Β IUUQTHPPHMGPSNT*$ES2X&N"KZP. ͓٬༷ͷۀ՝ɾۀϑϩʔΛ վળ͠ɺ ͓٬༷ͷϏδωεʹɺ ࢲͨͪͷ͍Δࣾձʹɺ
৽͍͠ՁΛੜΈग़ͯ͘͠ΕΔ ϑϦʔϥϯεΤϯδχΞͷํΛ ืू͍ͯ͠·͢ʂʂ
33 ݄ ʹ -BSBWFM7VFKT ϞϒϓϩձΛΓ·͢ʂ ϞϒϓϩॳΊͯͷํɺେܴͰ͢ɻࢲॳΊͯͰ͆͢ ࢀՃ͓ਃ͠ࠐΈ͓͓ͪͯ͠Γ·͢ʂ https://plumsa.connpass.com/event/136291/
34 Thank You So Much :) Any Questions? Yoko @plumsa