about abstract component design using slots of Vue.js

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. 4MPUΛ࢖͏ಈػ
   6
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. TMPU͜ͱ͸͡Ί
    16
    

    View Slide

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

    View Slide

18. Slot
    
    
    
    
    HTML
    
    
    18
    
    
    
    Button
    Button
    

    View Slide

19. Slot
    
    
    
    
    
    
    
    19
    
    
    
    Button
    
    Button
    Button
    

    View Slide

20. Slot
    
    $
    %#
    
    
    & '
    20
    
    
    
    Button
    Button"!
    

    View Slide

21. slot(Named Slot)
    !
    
    "
    #
    21
    ActionButton
    ActionButton
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. 4MPUͷ஫ҙ఺
    29
    

    View Slide

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

    View Slide

31. 31
    ࠷ޙʹ͓஌Βͤ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide