about abstract component design using slots of Vue.js

070fe3c99a6af95b11cce4770ab772c1?s=47 arm4
July 10, 2019

about abstract component design using slots of Vue.js

070fe3c99a6af95b11cce4770ab772c1?s=128

arm4

July 10, 2019
Tweet

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 /BNFE4MPU

    ͱ͸ʁ είʔϓ෇͖TMPU 4DPQFE4MPU ͱ͸ʁ 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͕ͨ͘͞Μ༻ҙͯ͋͠Δʂ ίϯϙʔωϯτ಺σʔλΛ࢖ͬͯ ΧελϚΠζͰ͖Δ TDPQFETMPU΋๛෋ʂ

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

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