about abstract component design using slots of Vue.js

by arm4

Slide 1

Slide 1 text

7VFKTͷ4MPUΛ׆༻ͨ͠ ൚༻తίϯϙʔωϯτઃܭʹ͍ͭͯ 2019.07.10 Yoko Hato

Slide 2

Slide 2 text

ࣗݾ঺հ גࣜձࣾϓϥϜβ Prime Order ࣄۀ෦ Tech Lead ോ ༸ࢠ 1SJNF0SEFSެࣜ5XJUUFS!QMVNTB ϥϥɾϕϧࢠ͞Μͷதͷਓ ͓ؾܰʹϑΥϩʔ͍ͩ͘͞ʂ 2

Slide 3

Slide 3 text

1SJNF 0SEFS ࣄۀ෦ͱ͸ʁ 3 ઐ໳ੑͷߴ͍ϑϦʔϥϯεΤϯδχΞͷํͱ ࢲͨͪࣾһ͕ҰͭͷνʔϜͱͳΓ 6*ɾ69ʹͩ͜Θͬͨ ΦʔμʔϝΠυͷۀ຿γεςϜͷ։ൃΛߦ͏ ઐ໳ूஂɻ ݴޠ1)1 +BWB4DSJQU ϑϨʔϜϫʔΫ-BSBWFM 7VFKT

Slide 4

Slide 4 text

ۀ຿γεςϜΛϑϧίϯϙʔωϯτઃܭͷ41"Ͱ࡞͍ͬͯ·͢ʂ 4

Slide 5

Slide 5 text

5 ࠓ೔࿩͢͜ͱ l 4MPUΛ࢖͏ಈػ 4MPUΛ࢖͏ͱ͜Μͳίϯϙʔωϯτ͕࡞ΕΔʂ l 4MPU͜ͱ͸͡Ί 4MPUͬͯԿʁ ໊લ෇͖TMPU /BNFE4MPU ͱ͸ʁ είʔϓ෇͖TMPU 4DPQFE4MPU ͱ͸ʁ l 4MPU׆༻ྫ l 6*ϑϨʔϜϫʔΫΛ࢖͓͏ʂ l 4MPUͷ஫ҙ఺

Slide 6

Slide 6 text

4MPUΛ࢖͏ಈػ 6

Slide 7

Slide 7 text

4MPUΛ࢖͏ಈػ 7 !"! " ! #

Slide 8

Slide 8 text

4MPUΛ࢖͏ಈػ 8 *+(&$- %*-) " . '$),*+ ! %*-) #$%-"

Slide 9

Slide 9 text

4MPUΛ࢖͏ಈػ 9 title $)+& (*# !"$+'% props !"$+

Slide 10

Slide 10 text

4MPUΛ࢖͏ಈػ 10 !'#$ #$ %"'& #& (

Slide 11

Slide 11 text

4MPUΛ࢖͏ಈػ 11 props #"$!# #"$!#

Slide 12

Slide 12 text

12 ίϯϙʔωϯτͷڞ௨ͷ෦෼͚ͩΛ ίϯϙʔωϯτԽͯ͠ɺ ͋ͱ͸ࣗ༝ʹɺ ࢖͏࣌ʹΧελϚΠζ͍ͨ͠ʂ ڞ௨෦෼ • IPWFS͢Δͱπʔϧνοϓ͕දࣔ͞ΕΔ • λΠτϧͱຊจ͕͋Δ • ࿮ͱλΠτϧͷσβΠϯ • ΞΠίϯ͕දࣔͰ͖Δ ΧελϚΠζ෦෼ • λΠτϧ෦෼ͷϑΥϯταΠζ΍৭ • ຊจʹ௥Ճ͢Δίϝϯτ΍ΞΠίϯɺϑΥϯταΠζ΍৭

Slide 13

Slide 13 text

Slot 13 • ࢖͏࣌͸؆ܿʹॻ͚Δ • λΠτϧ෦෼ͱຊจ෦෼ͷΧελϚΠζΛ͠Α͏ͱࢥ͏ͱ ຖճίϯϙʔωϯτͷվम͕ඞཁ • ඍົͳΧελϚΠζͷͨͼʹɺͲΜͲΜQSPQT͕૿͑Δ

Slide 14

Slide 14 text

Slot 14 • ࢖͏࣌ͷهड़ྔ͸ଟ͘ͳΔ • λΠτϧ෦෼ͱຊจ෦෼ͷΧελ ϚΠζ͕ࣗࡏʹߦ͑Δ • ίϯϙʔωϯτΛվम͢Δඞཁ͕ ͳ͍

Slide 15

Slide 15 text

ந৅౓͕ߴ͍ΧελϚΠβϒϧͳίϯϙʔωϯτΛ࡞੒͢Δ͜ͱʹΑΓɺ ಉ͡ৼΔ෣͍Λίϐϖ͢Δඞཁͳ͘ɺඍົʹҧ͏ผʑͷίϯϙʔωϯτ ͕༰қͰ؆ܿʹ࡞੒Ͱ͖ΔΑ͏ʹͳΔɻ Slot 15 class ্࢘ίϝϯτίϯϙʔωϯτ $VUF.FNPίϯϙʔ ωϯτΛ࢖্ͬͯ࢘ ίϝϯτίϯϙʔω ϯτΛ࡞Δ

Slide 16

Slide 16 text

TMPU͜ͱ͸͡Ί 16

Slide 17

Slide 17 text

Slot “ https://jp.vuejs.org/v2/guid e/components-slots.html 17 ίϯϙʔωϯτΛ࢖͏࣌ʹ දࣔ಺༰͕౉ͤΔʂ TMPU෦෼ʹ λάͰғ·Εͨίϯςϯπ͕ೖΔ Button Button

Slide 18

Slide 18 text

Slot HTML 18 Button Button

Slide 19

Slide 19 text

Slot 19 Button Button Button

Slide 20

Slide 20 text

Slot $ %# & ' 20 Button Button"!

Slide 21

Slide 21 text

slot(Named Slot) ! " # 21 ActionButton ActionButton

Slide 22

Slide 22 text

slot(Scoped Slot) slot 22 ActionButton ActionButton ͜ͷΑ͏ʹ ίϯϙʔωϯτͷσʔλΛ εϩοτʹWCJOEͰ౉͓ͯ͘͠ͱ ࢖༻࣌ͷεϩοτίϯςϯπͰ ͦͷσʔλΛ࢖͏͜ͱ͕Ͱ͖Δ TMPUʹόΠϯυ͞ΕͨଐੑΛ εϩοτϓϩύςΟ ͱݺͿ

Slide 23

Slide 23 text

4MPUΛ׆༻ͨ͠ ൚༻ੑͷߴ͍ ίϯϙʔωϯτྫ 23 Slot׆༻ྫ

Slide 24

Slide 24 text

Slot46*: "'% 24 "'%:'!#'$ -8.51"'% -8.59/1 & '& slot(7,3 26& '&)+0;

Slide 25

Slide 25 text

Scoped Slot)*&: 25 "#/-,*!"!scoped slot0( '!"!% . +1#/$2

Slide 26

Slide 26 text

4MPUͷ࢓૊ΈΛཧղ ͯ͠ 6*ϑϨʔϜϫʔΫΛ ׆༻ͯ͠ΈΑ͏ 26 UIϑϨʔϜϫʔΫΛ࢖͓͏ʂ

Slide 27

Slide 27 text

Vuetify 27 Vue.jsUI 6*ίϯϙʔωϯτ͕ ඇৗʹ๛෋Ͱ ΧελϚΠζੑ͕ߴ͍ʂ

Slide 28

Slide 28 text

28 headers header-cell items page-text ΧελϚΠζͰ͖Δ TMPU͕ͨ͘͞Μ༻ҙͯ͋͠Δʂ ίϯϙʔωϯτ಺σʔλΛ࢖ͬͯ ΧελϚΠζͰ͖Δ TDPQFETMPU΋๛෋ʂ

Slide 29

Slide 29 text

4MPUͷ஫ҙ఺ 29

Slide 30

Slide 30 text

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ʹ͔͠෇༩ Ͱ͖ͳ͍σΟϨΫςΟϒ ৄࡉ͸υΩϡϝϯτࢀর

Slide 31

Slide 31 text

31 ࠷ޙʹ͓஌Βͤ

Slide 32

Slide 32 text

32 Prime Order ʹ+PJO͠·ͤΜ͔ʁ ձࣾ๚໰ͷ͓ਃࠐΈ͸ͪ͜Β͔Β IUUQTHPPHMGPSNT*$ES2X&N"KZP. ͓٬༷ͷۀ຿՝୊ɾۀ຿ϑϩʔΛ վળ͠ɺ ͓٬༷ͷϏδωεʹɺ ࢲͨͪͷ͍Δࣾձʹɺ ৽͍͠Ձ஋ΛੜΈग़ͯ͘͠ΕΔ ϑϦʔϥϯεΤϯδχΞͷํΛ ืू͍ͯ͠·͢ʂʂ

Slide 33

Slide 33 text

33 ݄೔ ౔ ʹ -BSBWFM7VFKT ϞϒϓϩձΛ΍Γ·͢ʂ ϞϒϓϩॳΊͯͷํɺେ׻ܴͰ͢ɻࢲ΋ॳΊͯͰ͆͢ ࢀՃ͓ਃ͠ࠐΈ͓଴͓ͪͯ͠Γ·͢ʂ https://plumsa.connpass.com/event/136291/

Slide 34

Slide 34 text

34 Thank You So Much :) Any Questions? Yoko @plumsa