Vue.js with Web Components

Transcript

1. Vue.js with Web Components
   

   View Slide

2. 5BLBIJSP4BFLJ
   'SPOU&OE%FWFMPQFS
   )PCCZ%%3 %BODFSVTI
   5XJUUFS!IJSPEFBUI
   (JU)VCUBLBIJSPTBFLJ
   

   View Slide

3. ίϛέ$౦τC৽ץग़͠·͢ʂʂʂʂ
   

   View Slide

4. Disclaimer
   

   View Slide

5. View Slide

6. web components
   

   View Slide

7. 8FC$PNQPOFOUTͱ͸
   8FCϖʔδ΍8FCΞϓϦέʔγϣϯͷதͰ࠶ར༻ՄೳͰΧϓηϧԽ͞Εͨ

   ಠࣗͷ)5.-λάΛ࡞੒͢Δҝͷ࢓༷Ͱ͢ɻ
   8FC$PNQPOFOUT͸ओʹͭͷ࢓༷Ͱߏ੒͞Ε͍ͯ·͢ɻ
   )5.-5FNQMBUFT
   $VTUPN&MFNFOUT
   4IBEPX%PN
   &4.PEVMFT
   

   View Slide

8. View Slide

9. View Slide

10. XFCDPNQPOFOUTΛܽ఺Λิ͓͏ҝʹ
    ૉͷXFCDPNQPOFOUT͚ͩͩͱBUUSJCVUF͕มߋͨ͠ࡍʹɺ
    %0.શମ͕࠶ඳը͞Εͯ͠·͏
    Կ͔͠ΒͷϦετΛදࣔͤ͞ΔΑ͏ͳ$VTUPN&MFNFOUTΛ
    ࡞੒ͨ͠৔߹ʹɺྫ͑Ϧετͷ಺༰ͷҰ෦͔͠มߋࠩҟ͕ͳ͔ͬͨ
    ͱͯ͠΋Ϧετશମ͕࠶ඳը͞Εͯ͠·͏ɻ
    ͦͷܽ఺Λิ͏ҝʹMJUIUNMɺMJUFMFNFOU΍IZQFS)UNMͱ͍ͬͨ
    খ͞ͳԾ૝%0.Λ7JFXͷϥΠϒϥϦͱͯ͠࢖༻͢Δͱ͜ͷ໰୊Λ
    ղܾग़དྷΔɻ
    

    View Slide

11. View Slide

12. View Slide

13. ΋͏ҰͭͷXFCDPNQPOFOUTͷܽ఺
    )PU.PEVMF3FQMBDFNFOU ).3
    ͕ޮ͔ͳ͍ɻ
    ͱ͍͏ͷ΋$VTUPN&MFNFOU3FHJTUSZʹ$VTUPN&MFNFOUTΛҰ౓ొ࿥͢Δͱ
    ొ࿥ͨ͠$VTUPN&MFNFOUTΛഁغͨ͠ΓɺΞοϓσʔτ͢Δखஈ͕ແ͍ɻ
    ͦͷҝɺ).3͕༗ޮԽ͞Ε͍ͯΔXFCQBDL؀ڥ΍QBSDFMCVOEMFS౳ͷ؀ڥͰ
    $VTUPN&MFNFOUTΛ։ൃ͍ͯ͠ΔͱɺϑΝΠϧΛมߋͯ͠΋ϒϥ΢βʹ
    දࣔ͞Ε͍ͯΔ%0.͸Ξοϓσʔτ͞Εͳ͍ɻ
    

    View Slide

14. Vue.js + Web Components
    

    View Slide

15. 7VFKT্ͰXFCDPNQPOFOUTΛ࢖͏
    OQN͔ΒJOTUBMMͯ͠ಡΈࠐΈɺͦͷ··࢖༻ग़དྷΔɻ
    

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. 7VFKT্ͰXFCDPNQPOFOUTΛ࡞Δ
    7VF$-*ͷΦϓγϣϯΛ࢖ͬͯ࡞Δ͜ͱ͕ग़དྷΔ
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. 7VFKTΛ࢖༻ͯ͠8FC$PNQPOFOUTΛ
    ࡞ΔϝϦοτ
    7VF$PNQPOFOUΛͦͷ··8FC$PNQPOFOUTͱͯ͠ੜ੒ग़དྷΔ
    ).3͕༗ޮԽͨ͠ঢ়ଶͰ8FC$PNQPOFOUTΛ։ൃग़དྷΔ
    ࠩ෼ඳը͞ΕΔͷͰૉͰ8FC$PNQPOFOUTΛ࡞ΔΑΓ΋
    ύϑΥʔϚϯε͕ྑ͍ͱࢥ͏
    

    View Slide

26. 7VFKTΛ࢖༻ͯ͠8FC$PNQPOFOUTΛ
    ࡞ΔσϝϦοτ
    7VFKTΛ಺෦Ͱ಺แ͍ͯ͠Δҝɺී௨ʹ8FC$PNQPOFOUTΛ࡞ΔΑΓ
    ϑΝΠϧαΠζ͕ॏ͍ͨ
    

    View Slide

27. Micro Frontends
    

    View Slide

28. View Slide

29. .JDSP'SPOUFOETͱ͸
    ϚΠΫϩαʔϏεͷߟ͑ํΛϑϩϯτΤϯυʹ֦ுͨ͠΋ͷɻ
    ಛʹେاۀͩͱ͋Δ෦ॺ͕࡞੒ͨ͠6*ίϯϙʔωϯτΛྲྀ༻ͯ͠࢖༻͢Δ
    έʔε͕͋ͬͨΓ͢Δɻ
    ͍҃͸اۀͷϒϥϯυσβΠϯݪଇʹԊͬͯಉ͡Α͏ͳ6*Λ֤ͦΕͧΕͷ
    ෦ॺͰ࡞੒͢Δέʔε͕͋Δɻ
    ͦ͏͍ͬͨ৔߹ʹɺ6*ίϯϙʔωϯτΛXFCDPNQPOFOUTͰ഑෍͢Δ
    ͜ͱͰ໰୊Λղܾ͢Δɻ
    

    View Slide

30. ྫ͑͹
    ·ͨXFCDPNQPOFOUTΛ࢖༻͍ͯ͠Δͱ7VFKT΍3FBDUKTͳͲɺϥΠϒϥϦ΍
    ϑϨʔϜϫʔΫଆͷରԠʹ΋ΑΔ͕ɺ಺෦ͰXFCDPNQPOFOUTΛ࢖༻͢Δ͜ͱ͕
    ग़དྷΔͷͰɺকདྷతͳΞʔΩςΫνϟʔมߋ͕ൃੜͨ͠ࡍʹɺ6*͕ෛ࠴ʹͳΓ
    ʹ͍͘
    ͱ͸͍͑ɺݱࡏ7VFKT΍3FBDUKT؀ڥԼͰͷ41"΍XFCΞϓϦΛ։ൃ͍ͯ͠ΔͷͰ
    ͋Ε͹ૉ௚ʹ7VFDPNQPOFOU΍3FBDUDPNQPOFOUͰߏஙͨ͠ํ͕ྑ͍ͱ͸
    ࢥ͏ɻ
    

    View Slide

31. View Slide

32. ݸਓతͳײ૝
    7VFKTͰͷ։ൃʹ׳Ε͍ͯΕ͹ଞ෦ॺ ΋͘͠͸ଞͷ૊৫ʹ
    8FC$PNQPOFOUT
    ͱͯ͠ؾܰʹϥΠϒϥϦΛఏڙग़དྷͦ͏ɻ
    7VFKTͩͱ8FC$PNQPOFOUTͷαϙʔτ͢Δʹͯ͠΋࡞Δʹͯ͠΋αϙʔτ͕
    ް͍ͱࢥ͏ɻ
    ͱ͸͍͑7VFKTͰ8FC$PNQPOFOUTΛ࡞Δͷ͕ਖ਼ͩͱ͸ࢥΘͳ͍͕ɺ
    ଞͷϥΠϒϥϦΛ࢖༻͢ΔΑΓ΋εϜʔζʹऔΓ͔͔ΕΔͱࢥ͏ɻ
    

    View Slide

33. օ͞Μ΋8FC$PNQPOFOUT࢝ΊͯΈ·ͤΜ͔ʁ
    

    View Slide

34. Fin.
    

    View Slide