about abstract component design using slots of Vue.js

Transcript

1. 7VFKTͷ4MPUΛ׆༻ͨ͠ ൚༻తίϯϙʔωϯτઃܭʹ͍ͭͯ 2019.07.10 Yoko Hato
2. ࣗݾ঺հ גࣜձࣾϓϥϜβ Prime Order ࣄۀ෦ Tech Lead ോ ༸ࢠ 1SJNF0SEFSެࣜ5XJUUFS
   !QMVNTB ϥϥɾϕϧࢠ͞Μͷதͷਓ ͓ؾܰʹϑΥϩʔ͍ͩ͘͞ʂ 2
3. 1SJNF 0SEFS ࣄۀ෦ͱ͸ʁ 3 ઐ໳ੑͷߴ͍ϑϦʔϥϯεΤϯδχΞͷํͱ ࢲͨͪࣾһ͕ҰͭͷνʔϜͱͳΓ 6*ɾ69ʹͩ͜Θͬͨ ΦʔμʔϝΠυͷۀ຿γεςϜͷ։ൃΛߦ͏ ઐ໳ूஂɻ ݴޠ
   1)1
   +BWB4DSJQU ϑϨʔϜϫʔΫ
   -BSBWFM
   7VFKT
4. ۀ຿γεςϜΛϑϧίϯϙʔωϯτઃܭͷ41"Ͱ࡞͍ͬͯ·͢ʂ 4
5. 5 ࠓ೔࿩͢͜ͱ l 4MPUΛ࢖͏ಈػ 4MPUΛ࢖͏ͱ͜Μͳίϯϙʔωϯτ͕࡞ΕΔʂ l 4MPU͜ͱ͸͡Ί 4MPUͬͯԿʁ ໊લ෇͖TMPU
   /BNFE
   4MPU
   ͱ͸ʁ είʔϓ෇͖TMPU 4DPQFE
   4MPU ͱ͸ʁ l 4MPU׆༻ྫ l 6*ϑϨʔϜϫʔΫΛ࢖͓͏ʂ l 4MPUͷ஫ҙ఺
6. 4MPUΛ࢖͏ಈػ 6
7. 4MPUΛ࢖͏ಈػ 7  !"! "  !   
   #
8. 4MPUΛ࢖͏ಈػ 8 *+(&$-
   %*-) " . '$),*+ !
   %*-)
    #$%-" 
9. 4MPUΛ࢖͏ಈػ 9 title
   $)+& (*#  !"$+'% props !"$+  
10. 4MPUΛ࢖͏ಈػ 10 !'#$ #$
     %"'& #&   (
11. 4MPUΛ࢖͏ಈػ 11 props     #"$!# 
        #"$!#  
12. 12 ίϯϙʔωϯτͷڞ௨ͷ෦෼͚ͩΛ ίϯϙʔωϯτԽͯ͠ɺ ͋ͱ͸ࣗ༝ʹɺ ࢖͏࣌ʹΧελϚΠζ͍ͨ͠ʂ ڞ௨෦෼ • IPWFS͢Δͱπʔϧνοϓ͕දࣔ͞ΕΔ • λΠτϧͱຊจ͕͋Δ • ࿮ͱλΠτϧͷσβΠϯ • ΞΠίϯ͕දࣔͰ͖Δ ΧελϚΠζ෦෼ • λΠτϧ෦෼ͷϑΥϯταΠζ΍৭ • ຊจʹ௥Ճ͢Δίϝϯτ΍ΞΠίϯɺϑΥϯταΠζ΍৭
13. Slot
     13 • ࢖͏࣌͸؆ܿʹॻ͚Δ • λΠτϧ෦෼ͱຊจ෦෼ͷΧελϚΠζΛ͠Α͏ͱࢥ͏ͱ ຖճίϯϙʔωϯτͷվम͕ඞཁ • ඍົͳΧελϚΠζͷͨͼʹɺͲΜͲΜQSPQT͕૿͑Δ
14. Slot
     14 • ࢖͏࣌ͷهड़ྔ͸ଟ͘ͳΔ • λΠτϧ෦෼ͱຊจ෦෼ͷΧελ ϚΠζ͕ࣗࡏʹߦ͑Δ • ίϯϙʔωϯτΛվम͢Δඞཁ͕ ͳ͍
15. ந৅౓͕ߴ͍ΧελϚΠβϒϧͳίϯϙʔωϯτΛ࡞੒͢Δ͜ͱʹΑΓɺ ಉ͡ৼΔ෣͍Λίϐϖ͢Δඞཁͳ͘ɺඍົʹҧ͏ผʑͷίϯϙʔωϯτ ͕༰қͰ؆ܿʹ࡞੒Ͱ͖ΔΑ͏ʹͳΔɻ Slot
          15    class 
     ্࢘ίϝϯτίϯϙʔωϯτ $VUF.FNPίϯϙʔ ωϯτΛ࢖্ͬͯ࢘ ίϝϯτίϯϙʔω ϯτΛ࡞Δ
16. TMPU͜ͱ͸͡Ί 16
17. Slot “ <slot>       
    https://jp.vuejs.org/v2/guid e/components-slots.html 17 ίϯϙʔωϯτΛ࢖͏࣌ʹ දࣔ಺༰͕౉ͤΔʂ TMPU෦෼ʹ λάͰғ·Εͨίϯςϯπ͕ೖΔ Button
      Button
    
18. Slot
           
    HTML  18 
         Button Button
19. Slot
        
            19   
      Button  Button Button
20. Slot
         $  %# 
      &  ' 20 
       Button Button"!
21. 
    slot(Named Slot) ! 
    
      "  # 21 ActionButton ActionButton 
22. 
    slot(Scoped Slot) slot    
       22 ActionButton  ActionButton  ͜ͷΑ͏ʹ ίϯϙʔωϯτͷσʔλΛ εϩοτʹWCJOEͰ౉͓ͯ͘͠ͱ ࢖༻࣌ͷεϩοτίϯςϯπͰ ͦͷσʔλΛ࢖͏͜ͱ͕Ͱ͖Δ TMPUʹόΠϯυ͞ΕͨଐੑΛ εϩοτϓϩύςΟ ͱݺͿ
23. 4MPUΛ׆༻ͨ͠ ൚༻ੑͷߴ͍ ίϯϙʔωϯτྫ 23 Slot׆༻ྫ
24. Slot46*: "'% 24 "'%:'!#'$ -8.51"'% -8.59/1 & '& 
    slot (7,3 26& '&) +0;
25. Scoped Slot)*&:  25 
     " #/-,*!"!scoped slot0(
    '!"!% . +1#/$2
26. 4MPUͷ࢓૊ΈΛཧղ ͯ͠ 6*ϑϨʔϜϫʔΫΛ ׆༻ͯ͠ΈΑ͏ 26 UIϑϨʔϜϫʔΫΛ࢖͓͏ʂ
27. Vuetify 27   
    Vue.jsUI   6*ίϯϙʔωϯτ͕ ඇৗʹ๛෋Ͱ ΧελϚΠζੑ͕ߴ͍ʂ
28. 28 headers header-cell items page-text ΧελϚΠζͰ͖Δ TMPU͕ͨ͘͞Μ༻ҙͯ͋͠Δʂ ίϯϙʔωϯτ಺σʔλΛ࢖ͬͯ ΧελϚΠζͰ͖Δ TDPQFE
    TMPU΋๛෋ʂ
29. 4MPUͷ஫ҙ఺ 29
30. 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. 31 ࠷ޙʹ͓஌Βͤ
32. 32 Prime Order ʹ+PJO͠·ͤΜ͔ʁ ձࣾ๚໰ͷ͓ਃࠐΈ͸ͪ͜Β͔Β IUUQTHPPHMGPSNT*$ES2X&N"KZP. ͓٬༷ͷۀ຿՝୊ɾۀ຿ϑϩʔΛ վળ͠ɺ ͓٬༷ͷϏδωεʹɺ ࢲͨͪͷ͍Δࣾձʹɺ ৽͍͠Ձ஋ΛੜΈग़ͯ͘͠ΕΔ ϑϦʔϥϯεΤϯδχΞͷํΛ ืू͍ͯ͠·͢ʂʂ
33. 33 ݄೔ ౔ ʹ -BSBWFM
    7VFKT ϞϒϓϩձΛ΍Γ·͢ʂ ϞϒϓϩॳΊͯͷํɺେ׻ܴͰ͢ɻࢲ΋ॳΊͯͰ͆͢ ࢀՃ͓ਃ͠ࠐΈ͓଴͓ͪͯ͠Γ·͢ʂ https://plumsa.connpass.com/event/136291/
34. 34 Thank You So Much :) Any Questions? Yoko @plumsa