about abstract component design using slots of Vue.js

Transcript

1. 1.

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

2. 2.

   ࣗݾ঺հ גࣜձࣾϓϥϜβ Prime Order ࣄۀ෦ Tech Lead ോ ༸ࢠ 1SJNF0SEFSެࣜ5XJUUFS
   !QMVNTB

   ϥϥɾϕϧࢠ͞Μͷதͷਓ ͓ؾܰʹϑΥϩʔ͍ͩ͘͞ʂ 2
3. 3.

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

   
   +BWB4DSJQU ϑϨʔϜϫʔΫ
   -BSBWFM
   7VFKT
4. 4.

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

5. 5.

   5 ࠓ೔࿩͢͜ͱ l 4MPUΛ࢖͏ಈػ 4MPUΛ࢖͏ͱ͜Μͳίϯϙʔωϯτ͕࡞ΕΔʂ l 4MPU͜ͱ͸͡Ί 4MPUͬͯԿʁ ໊લ෇͖TMPU
   /BNFE
   4MPU

   
   ͱ͸ʁ είʔϓ෇͖TMPU 4DPQFE
   4MPU ͱ͸ʁ l 4MPU׆༻ྫ l 6*ϑϨʔϜϫʔΫΛ࢖͓͏ʂ l 4MPUͷ஫ҙ఺
6. 6.

   4MPUΛ࢖͏ಈػ 6

7. 7.

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

8. 8.

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

   #$%-" 
9. 9.

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

   
10. 10.

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

11. 11.

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

      #"$!#  
12. 12.

    12 ίϯϙʔωϯτͷڞ௨ͷ෦෼͚ͩΛ ίϯϙʔωϯτԽͯ͠ɺ ͋ͱ͸ࣗ༝ʹɺ ࢖͏࣌ʹΧελϚΠζ͍ͨ͠ʂ ڞ௨෦෼ • IPWFS͢Δͱπʔϧνοϓ͕දࣔ͞ΕΔ • λΠτϧͱຊจ͕͋Δ

    • ࿮ͱλΠτϧͷσβΠϯ • ΞΠίϯ͕දࣔͰ͖Δ ΧελϚΠζ෦෼ • λΠτϧ෦෼ͷϑΥϯταΠζ΍৭ • ຊจʹ௥Ճ͢Δίϝϯτ΍ΞΠίϯɺϑΥϯταΠζ΍৭
13. 13.

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

14. 14.

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

15. 15.

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

       class 
     ্࢘ίϝϯτίϯϙʔωϯτ $VUF.FNPίϯϙʔ ωϯτΛ࢖্ͬͯ࢘ ίϝϯτίϯϙʔω ϯτΛ࡞Δ
16. 16.

    TMPU͜ͱ͸͡Ί 16

17. 17.

    Slot “ <slot>       
    

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

    Slot
           
    HTML 

    18 
         Button Button
19. 19.

    Slot
        
        

       19   
      Button  Button Button
20. 20.

    Slot
         $  %# 
    

      &  ' 20 
       Button Button"!
21. 21.

    
    slot(Named Slot) ! 
    
      "  # 21

    ActionButton ActionButton 
22. 22.

    
    slot(Scoped Slot) slot    
       22

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

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

24. 24.

    Slot46*: "'% 24 "'%:'!#'$ -8.51"'% -8.59/1 & '& 
    

    slot (7,3 26& '&) +0;
25. 25.

    Scoped Slot)*&:  25 
     " #/-,*!"!scoped slot0(
    '!"!%

    . +1#/$2
26. 26.

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

27. 27.

    Vuetify 27   
    Vue.jsUI   6*ίϯϙʔωϯτ͕ ඇৗʹ๛෋Ͱ

    ΧελϚΠζੑ͕ߴ͍ʂ
28. 28.

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

29. 29.

    4MPUͷ஫ҙ఺ 29

30. 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.

    31 ࠷ޙʹ͓஌Βͤ

32. 32.

    32 Prime Order ʹ+PJO͠·ͤΜ͔ʁ ձࣾ๚໰ͷ͓ਃࠐΈ͸ͪ͜Β͔Β IUUQTHPPHMGPSNT*$ES2X&N"KZP. ͓٬༷ͷۀ຿՝୊ɾۀ຿ϑϩʔΛ վળ͠ɺ ͓٬༷ͷϏδωεʹɺ ࢲͨͪͷ͍Δࣾձʹɺ

    ৽͍͠Ձ஋ΛੜΈग़ͯ͘͠ΕΔ ϑϦʔϥϯεΤϯδχΞͷํΛ ืू͍ͯ͠·͢ʂʂ
33. 33.

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

34. 34.

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