Vue.js with Web Components

Transcript

1. Vue.js with Web Components

2. 5BLBIJSP
   4BFLJ 'SPOU
   &OE
   %FWFMPQFS )PCCZ
   %%3
   %BODFSVTI 5XJUUFS
   !IJSPEFBUI (JU)VC
   UBLBIJSPTBFLJ

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

4. Disclaimer

5. None

6. web components

7. 8FC
   $PNQPOFOUTͱ͸ 8FCϖʔδ΍8FCΞϓϦέʔγϣϯͷதͰ࠶ར༻ՄೳͰΧϓηϧԽ͞Εͨ
 ಠࣗͷ)5.-λάΛ࡞੒͢Δҝͷ࢓༷Ͱ͢ɻ 8FC
   $PNQPOFOUT͸ओʹͭͷ࢓༷Ͱߏ੒͞Ε͍ͯ·͢ɻ )5.-
   5FNQMBUFT $VTUPN
   &MFNFOUT 4IBEPX
   %PN &4
   .PEVMFT

8. None
9. None

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

11. None
12. None

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

14. Vue.js + Web Components

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

16. None
17. None
18. None
19. None

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

21. None
22. None
23. None
24. None

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

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

27. Micro Frontends

28. None

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

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

31. None

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

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

34. Fin.