Vue.js with Web Components

15eb9fe75117e987992d2ae56b811f2d?s=47 hiro
November 10, 2018

Vue.js with Web Components

15eb9fe75117e987992d2ae56b811f2d?s=128

hiro

November 10, 2018
Tweet

Transcript

  1. Vue.js with Web Components

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

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

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

  14. Vue.js + Web Components

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

  16. None
  17. None
  18. None
  19. None
  20. 7VFKT্ͰXFCDPNQPOFOUTΛ࡞Δ 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*ίϯϙʔωϯτΛXFCDPNQPOFOUTͰ഑෍͢Δ ͜ͱͰ໰୊Λղܾ͢Δɻ

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

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

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

  34. Fin.