Vue.js with Web Components
View Slide
5BLBIJSP4BFLJ'SPOU&OE%FWFMPQFS)PCCZ%%3 %BODFSVTI5XJUUFS!IJSPEFBUI(JU)VCUBLBIJSPTBFLJ
ίϛέ$౦τC৽ץग़͠·͢ʂʂʂʂ
Disclaimer
web components
8FC$PNQPOFOUTͱ8FCϖʔδ8FCΞϓϦέʔγϣϯͷதͰ࠶ར༻ՄೳͰΧϓηϧԽ͞Εͨ ಠࣗͷ)5.-λάΛ࡞͢Δҝͷ༷Ͱ͢ɻ8FC$PNQPOFOUTओʹͭͷ༷Ͱߏ͞Ε͍ͯ·͢ɻ)5.-5FNQMBUFT$VTUPN&MFNFOUT4IBEPX%PN&4.PEVMFT
XFCDPNQPOFOUTΛܽΛิ͓͏ҝʹૉͷXFCDPNQPOFOUT͚ͩͩͱBUUSJCVUF͕มߋͨ͠ࡍʹɺ%0.શମ͕࠶ඳը͞Εͯ͠·͏Կ͔͠ΒͷϦετΛදࣔͤ͞ΔΑ͏ͳ$VTUPN&MFNFOUTΛ࡞ͨ͠߹ʹɺྫ͑Ϧετͷ༰ͷҰ෦͔͠มߋࠩҟ͕ͳ͔ͬͨͱͯ͠Ϧετશମ͕࠶ඳը͞Εͯ͠·͏ɻͦͷܽΛิ͏ҝʹMJUIUNMɺMJUFMFNFOUIZQFS)UNMͱ͍ͬͨখ͞ͳԾ%0.Λ7JFXͷϥΠϒϥϦͱͯ͠༻͢Δͱ͜ͷΛղܾग़དྷΔɻ
͏ҰͭͷXFCDPNQPOFOUTͷܽ)PU.PEVMF3FQMBDFNFOU ).3͕ޮ͔ͳ͍ɻͱ͍͏ͷ$VTUPN&MFNFOU3FHJTUSZʹ$VTUPN&MFNFOUTΛҰొ͢Δͱొͨ͠$VTUPN&MFNFOUTΛഁغͨ͠ΓɺΞοϓσʔτ͢Δखஈ͕ແ͍ɻͦͷҝɺ).3͕༗ޮԽ͞Ε͍ͯΔXFCQBDLڥQBSDFMCVOEMFSͷڥͰ$VTUPN&MFNFOUTΛ։ൃ͍ͯ͠ΔͱɺϑΝΠϧΛมߋͯ͠ϒϥβʹදࣔ͞Ε͍ͯΔ%0.Ξοϓσʔτ͞Εͳ͍ɻ
Vue.js + Web Components
7VFKT্ͰXFCDPNQPOFOUTΛ͏OQN͔ΒJOTUBMMͯ͠ಡΈࠐΈɺͦͷ··༻ग़དྷΔɻ
7VFKT্ͰXFCDPNQPOFOUTΛ࡞Δ7VF$-*ͷΦϓγϣϯΛͬͯ࡞Δ͜ͱ͕ग़དྷΔ
7VFKTΛ༻ͯ͠8FC$PNQPOFOUTΛ࡞ΔϝϦοτ7VF$PNQPOFOUΛͦͷ··8FC$PNQPOFOUTͱͯ͠ੜग़དྷΔ).3͕༗ޮԽͨ͠ঢ়ଶͰ8FC$PNQPOFOUTΛ։ൃग़དྷΔࠩඳը͞ΕΔͷͰૉͰ8FC$PNQPOFOUTΛ࡞ΔΑΓύϑΥʔϚϯε͕ྑ͍ͱࢥ͏
7VFKTΛ༻ͯ͠8FC$PNQPOFOUTΛ࡞ΔσϝϦοτ7VFKTΛ෦Ͱแ͍ͯ͠Δҝɺී௨ʹ8FC$PNQPOFOUTΛ࡞ΔΑΓϑΝΠϧαΠζ͕ॏ͍ͨ
Micro Frontends
.JDSP'SPOUFOETͱϚΠΫϩαʔϏεͷߟ͑ํΛϑϩϯτΤϯυʹ֦ுͨ͠ͷɻಛʹେاۀͩͱ͋Δ෦ॺ͕࡞ͨ͠6*ίϯϙʔωϯτΛྲྀ༻ͯ͠༻͢Δέʔε͕͋ͬͨΓ͢Δɻ͍҃اۀͷϒϥϯυσβΠϯݪଇʹԊͬͯಉ͡Α͏ͳ6*Λ֤ͦΕͧΕͷ෦ॺͰ࡞͢Δέʔε͕͋Δɻͦ͏͍ͬͨ߹ʹɺ6*ίϯϙʔωϯτΛXFCDPNQPOFOUTͰ͢Δ͜ͱͰΛղܾ͢Δɻ
ྫ͑·ͨXFCDPNQPOFOUTΛ༻͍ͯ͠Δͱ7VFKT3FBDUKTͳͲɺϥΠϒϥϦϑϨʔϜϫʔΫଆͷରԠʹΑΔ͕ɺ෦ͰXFCDPNQPOFOUTΛ༻͢Δ͜ͱ͕ग़དྷΔͷͰɺকདྷతͳΞʔΩςΫνϟʔมߋ͕ൃੜͨ͠ࡍʹɺ6*͕ෛ࠴ʹͳΓʹ͍͘ͱ͍͑ɺݱࡏ7VFKT3FBDUKTڥԼͰͷ41"XFCΞϓϦΛ։ൃ͍ͯ͠ΔͷͰ͋Εૉʹ7VFDPNQPOFOU3FBDUDPNQPOFOUͰߏஙͨ͠ํ͕ྑ͍ͱࢥ͏ɻ
ݸਓతͳײ7VFKTͰͷ։ൃʹ׳Ε͍ͯΕଞ෦ॺ ͘͠ଞͷ৫ʹ8FC$PNQPOFOUTͱͯ͠ؾܰʹϥΠϒϥϦΛఏڙग़དྷͦ͏ɻ7VFKTͩͱ8FC$PNQPOFOUTͷαϙʔτ͢Δʹͯ͠࡞Δʹͯ͠αϙʔτ͕ް͍ͱࢥ͏ɻͱ͍͑7VFKTͰ8FC$PNQPOFOUTΛ࡞Δͷ͕ਖ਼ͩͱࢥΘͳ͍͕ɺଞͷϥΠϒϥϦΛ༻͢ΔΑΓεϜʔζʹऔΓ͔͔ΕΔͱࢥ͏ɻ
օ͞Μ8FC$PNQPOFOUT࢝ΊͯΈ·ͤΜ͔ʁ
Fin.