CAMPHOR- の定例LTの資料です。
Twitter: https://twitter.com/p1ass GitHub: https://github.com/p1ass
.JDSP'SPOUFOETºH31$8FCͷઓ$".1)03 ఆྫ-5Β͢ !QBTTʙ ,JUBEF8JEHFUฤ ʙ
View Slide
l,JUBEFzͱʁl,JUBEF8JEHFUzͷհઃܭࢥ࣮ɾ։ൃϑϩʔ·ͱΊ
l,JUBEFzͱʁ
l,JUBEFzͱʁ˔ $".1)03 ͷग़੮ཧγεςϜ˓ 4MBDLͰ CPULJUBEFͱଧͭ͜ͱͰྃ˓ IPVTF@BUUFOEBODF νϟϯωϧʹ)064&ͷ༷ࢠ͕ߘ͞ΕΔ˓ )064&ʹਓ͕͍Δ͜ͱΛΞϐʔϧ
l,JUBEFzͱʁ˔ $".1)03 "DDPVOU ҎԼ"DDPVOUXFC˓ <ͱ͋Δ63->˓ લ͔Β ,JUBEF༻ͷ 6*ଘࡏ˓ l։ൃதzͷ··ͣͬͱ์ஔ໓ଟʹ։͔ͳ͍ϖʔδͱԽ͍ͯͨ͠
l,JUBEF8JEHFUzͷհ
l,JUBEF8JEHFUzͷհ˔ ػೳ ˓ 8FC͔Β LJUBEF˓ ݱࡏͷग़੮ਓͷ֬ೝ˓ ग़੮ऀͷҰཡΛදࣔ˔ ࣮͍ͨ͠ػೳ ˓ ࠓ·Ͱͷग़੮ճΛදࣔ
l,JUBEF8JEHFUzͷհ˔ ٕज़ελοΫ˓ 8FC$PNQPOFOUT˓ H31$8FC˓ 7VFKT.JDSP'SPOUFOETʹదͨ͠8JEHFU
ઃܭࢥ
શͷਆΛ࡞Βͳ͍ɻϝϯς͘͢͠ɻ
શͷਆΛ࡞Βͳ͍˔ "DDPVOUXFCμογϡϘʔυ˓ ֤αʔϏεͷใ͕౷߹͞Εͯදࣔ͞ΕΔॴΛࢦ͢˔ ֤αʔϏεશ͘υϝΠϯ͕ҟͳΔผͷαʔϏε˓ ͯ͢ͷαʔϏεʹؔ͢Δίʔυ͕ඞཁʹίʔυ͕ංେԽͯ͠ϝϯςͣ͠Β͘
શͷਆΛ࡞Βͳ͍
શͷਆΛ࡞Βͳ͍˔ 8JEHFUΛಡΈࠐΉ͚ͩͰɺ࣮Λ࣋ͨͳ͍Α͏ʹ͢Δ8JEHFU֤αʔϏεଆ͕ཧ͢ΔͷͰίʔυ͕͖ͬ͢Γ
ϝϯς͘͢͠˔ $".1)03 ͷӡӦগਓͷֶੜͷΈ˓ ΄΅ਓ͕֤αʔϏεͷϝΠϯͷ࣮Λߦ͏˓ ΘΕ͍ͯΔݴޠ͕όϥόϥ˓ ӡӦϝϯόʔͷٕज़ελοΫ͋·Γඃͬͯͳ͍࣮ऀ͕ଔۀ͢Δͱ୭࣮͕͔Βͳ͘ͳΔՄೳੑ
ϝϯς͘͢͠˔ ରԠࡦ˓ ޙഐ͕͔ΔݴޠͰॻ͘˓ ޙഐʹڭ͢Δ FY(P͍͍ͧ˓ υΩϡϝϯτΛඋͯ͠ɺʮޙͤͨʂʯঢ়ଶʹ͢Δ˓ ֎෦ΠϯλϑΣʔε͚ͩʹґଘ͢ΔΑ͏ʹ͢Δʹͯ͠ɺ؆୯ʹ࡞ΓͤΔΑ͏ʹ͢Δ ˡ࠾༻
ϝϯς͘͢͠˔ ࣮ͷৄࡉΛΔඞཁ͕͋Δͷಉ͡ϦϙʹೖΕΔվम࣌ʹ"DDPVOUXFCͷमਖ਼Λগͳ͘͢Δ
ϝϯς͘͢͠˔ .JDSP'SPOUFOET https://micro-frontends.org/˓ ϚΠΫϩαʔϏεͷߟ͑ํΛϑϩϯτΤϯυʹ֦ு˓ ϞϊϦγοΫϑϩϯτΤϯυ͔Βͷ٫Λࢦ͢
࣮ɾ։ൃϑϩʔ
࣮˔ 8FC$PNQPOFOUT˓ ҙͷ)5.-λάΛఆٛ͢Δ l$VTUPN&MFNFOUz˓ ΧϓηϧԽ͞Εͨ%0.Λ࡞Δ z4IBEPX%0.z˓ ࠶ར༻Մೳͳ l)5.-5FNQMBUFz)5.- $44 +4Λ·ͱΊͨΦϦδφϧλάΛ࡞ΕΔ
࣮class MyAppElement extends HTMLElement {constructor() {super()const shadowRoot = this.attachShadow({ mode: 'open' })shadowRoot.innerHTML = this.template()}template() {return `<br/>p {<br/>color: #f00;<br/>}<br/>This is a custom element!`}}customElements.define('my-app', MyAppElement)˔ ݺͼग़͢ଆλάΛࢦఆ͢Δ͚ͩ
࣮˔ 7VFKTˠ 8FC$PNQPOFOUT˓ 8FC$PNQPOFOUTΛͦͷ··ॻ͘ͷ͠ΜͲ͍˓ 7VFKTͷίϯϙʔωϯτϑΝΠϧΛ8FC$PNQPOFOUTʹvue-cli-service build --target wc ¥--name kitade-widget src/KitadeWidget.vueֶशίετΛܰݮ ⾪
࣮˔ H31$8FC˓ H31$ͷαʔϏεΛ ϒϥβ ͔ΒݺͿΈ˓ QSPUPDͰ ΫϥΠΞϯτͱܕఆٛΛੜ DMJFOUXFC˓ &OWPZ͔ /HJOYʹΑΔϓϩΩγ͕ඞཁ &OWPZΛ༻˓ #''ΛݐͯΔΑΓҰ؏ੑΛ࣋ͬͨ։ൃΛߦ͑Δ
࣮˔ H31$8FCͷΫϥΠΞϯτίʔυΛ࡞˓ QSPUPͷ NBTUFSʹ QVTI͞Εͨ࣌Ͱɺ$*ʹΑͬͯDBNQIPSDMJFOUXFC ͕ࣗಈੜ˓ ͍͍ͨαʔϏε OQN PSZBSOͰΫϥΠΞϯτίʔυΛ%FQFOEFODZʹՃ ,JUBEF8JEHFUࡁ˓ جຊతͳ͍ํެࣜͷ HSQDHSQDXFCΛࢀর
։ൃϑϩʔ˔ ੩తͳ8FC$PNQPOFOUTͷϑΝΠϧΛ࡞˓ ϩʔΧϧͰ ZBSOCVJMEDPNQPOFOU Ͱ EJTU ʹੜ˓ NBTUFSʹ QVTI͞Εͨ࣌ɺDBNQIPSTUBUJDʹ ϏϧυࡁΈϑΝΠϧ͕ QVTI͞ΕΔ˔ ੩తϑΝΠϧΛ৴˓ TUBUJDNBTUFSʹQVTI͞Εͨ࣌ʹ EPDLFSJNBHFΛ࡞˓ 3VOEFDL ͷ KPCΛճ͢͜ͱͰ৴
։ൃϑϩʔ˔ ൪ͷΈखಈͰߦ͏ඞཁ͕͋Δ
·ͱΊ
·ͱΊ˔ ,JUBEF8JEHFUΛ࡞ͬͨ˓ 8FC$PNQPOFOUTͱ H31$8FCͰ.JDSP'SPOUFOETԽ˓ 7VFKTʹΑͬͯ 8FC$PNQPOFOUTͷ࣮ίετΛݮ˓ H31$8FCͷͨΊͷ DMJFOUXFCϨϙδτϦΛ৽ͨʹ࡞˔ ੩తϑΝΠϧ৴ج൫Λ࡞˓ TUBUJDϨϙδτϦʹ QVTI͢Δ͚ͩͰ৴४උ͕͏
5IBOLZPV5XJUUFS !QBTT(JU)VC QBTT
ࢀߟ
ࢀߟ˓ https://developer.mozilla.org/ja/docs/Web/Web_Components˓ https://micro-frontends.org/˓ https://cli.vuejs.org/˓ https://qiita.com/ka-miyata/items/63e41e4105d7aeb44d6c