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
120
5 Points Of Customizing Vuetify
fromarm4
4
1.2k
laravel_lt_party_with_mokumoku_3
fromarm4
0
370
Make it happen in realtime with Laravel Echo and Pusher
fromarm4
0
960
Trying to write a code with Laravel+Vue+TypeScript
fromarm4
0
500
Create a Laravel notification via Slack when batch jobs are finished
fromarm4
0
730
solving frontend issues
fromarm4
1
1.6k
Popular Vue.js UI Frameworks in 2019
fromarm4
2
850
SKDs対象のWeb API設計概論〜Laravelを添えて〜
fromarm4
0
1.2k
Other Decks in Programming
See All in Programming
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
Honoをフロントエンドで使う 3つのやり方
yusukebe
1
320
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
Software Architecture
hschwentner
6
2.1k
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
WebDriver BiDiとは何なのか
yotahada3
1
130
Linux && Docker 研修/Linux && Docker training
forrep
23
4.4k
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
CNCF Project の作者が考えている OSS の運営
utam0k
5
680
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
570
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Visualization
eitanlees
146
15k
Optimizing for Happiness
mojombo
376
70k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Documentation Writing (for coders)
carmenintech
67
4.6k
RailsConf 2023
tenderlove
29
1k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Practical Orchestrator
shlominoach
186
10k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
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