Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.js with Web Components

hiro
November 10, 2018

Vue.js with Web Components

hiro

November 10, 2018
Tweet

More Decks by hiro

Other Decks in Programming

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