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