Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Vue.js with Web Components
hiro
November 10, 2018
Programming
2
9.8k
Vue.js with Web Components
hiro
November 10, 2018
Tweet
Share
More Decks by hiro
See All by hiro
hooksが変革する未来について
takahirosaeki
0
210
lit-html, lit-elementどちらを使うか迷った際の個人的見解
takahirosaeki
0
400
Other Decks in Programming
See All in Programming
Get Ready for Jakarta EE 10
ivargrimstad
0
2.8k
インターン生・新卒向け、学校でもっと教えてほしいITエンジニア基本スキル
nearme_tech
0
130
シェーダー氷山発掘記
logilabo
0
150
Lancersをコンテナへ本番移行する取り組み
rvirus0817
1
410
Node.jsデザインパターンを読んで
mmmommm
0
2.8k
IE Graduation (IE の功績を讃える)
jxck
20
12k
JetPackComposeは宣言型プログラミングパラダイムって実はよくわかってないんですが、別に使ってもいいんですよね、
conigashima
0
190
社用PCのdotfiles管理 / dotfiles-in-company
yammerjp
0
140
I/O Extended 2022 in Android ~ Whats new in Android development tools
pluu
0
570
短納期でローンチした新サービスをJavaで開発した話/launched new service using Java
eichisanden
6
2k
Deep Dive Into Google Zanzibar and its Concepts for Authorization Scenarios
dschenkelman
1
140
Reactは何を提供するLibraryなのか?
taro28
3
570
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
The Art of Programming - Codeland 2020
erikaheidi
32
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
How GitHub (no longer) Works
holman
296
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Web Components: a chance to create the future
zenorocha
303
40k
Infographics Made Easy
chrislema
233
17k
The Invisible Side of Design
smashingmag
290
48k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Music & Morning Musume
bryan
35
4.2k
Transcript
Vue.js with Web Components
5BLBIJSP4BFLJ 'SPOU&OE%FWFMPQFS )PCCZ%%3 %BODFSVTI 5XJUUFS!IJSPEFBUI (JU)VCUBLBIJSPTBFLJ
ίϛέ$౦τC৽ץग़͠·͢ʂʂʂʂ
Disclaimer
None
web components
8FC$PNQPOFOUTͱ 8FCϖʔδ8FCΞϓϦέʔγϣϯͷதͰ࠶ར༻ՄೳͰΧϓηϧԽ͞Εͨ ಠࣗͷ)5.-λάΛ࡞͢Δҝͷ༷Ͱ͢ɻ 8FC$PNQPOFOUTओʹͭͷ༷Ͱߏ͞Ε͍ͯ·͢ɻ )5.-5FNQMBUFT $VTUPN&MFNFOUT 4IBEPX%PN &4.PEVMFT
None
None
XFCDPNQPOFOUTΛܽΛิ͓͏ҝʹ ૉͷXFCDPNQPOFOUT͚ͩͩͱBUUSJCVUF͕มߋͨ͠ࡍʹɺ %0.શମ͕࠶ඳը͞Εͯ͠·͏ Կ͔͠ΒͷϦετΛදࣔͤ͞ΔΑ͏ͳ$VTUPN&MFNFOUTΛ ࡞ͨ͠߹ʹɺྫ͑Ϧετͷ༰ͷҰ෦͔͠มߋࠩҟ͕ͳ͔ͬͨ ͱͯ͠Ϧετશମ͕࠶ඳը͞Εͯ͠·͏ɻ ͦͷܽΛิ͏ҝʹMJUIUNMɺMJUFMFNFOUIZQFS)UNMͱ͍ͬͨ খ͞ͳԾ%0.Λ7JFXͷϥΠϒϥϦͱͯ͠༻͢Δͱ͜ͷΛ ղܾग़དྷΔɻ
None
None
͏ҰͭͷXFCDPNQPOFOUTͷܽ )PU.PEVMF3FQMBDFNFOU ).3 ͕ޮ͔ͳ͍ɻ ͱ͍͏ͷ$VTUPN&MFNFOU3FHJTUSZʹ$VTUPN&MFNFOUTΛҰొ͢Δͱ ొͨ͠$VTUPN&MFNFOUTΛഁغͨ͠ΓɺΞοϓσʔτ͢Δखஈ͕ແ͍ɻ ͦͷҝɺ).3͕༗ޮԽ͞Ε͍ͯΔXFCQBDLڥQBSDFMCVOEMFSͷڥͰ $VTUPN&MFNFOUTΛ։ൃ͍ͯ͠ΔͱɺϑΝΠϧΛมߋͯ͠ϒϥβʹ දࣔ͞Ε͍ͯΔ%0.Ξοϓσʔτ͞Εͳ͍ɻ
Vue.js + Web Components
7VFKT্ͰXFCDPNQPOFOUTΛ͏ OQN͔ΒJOTUBMMͯ͠ಡΈࠐΈɺͦͷ··༻ग़དྷΔɻ
None
None
None
None
7VFKT্ͰXFCDPNQPOFOUTΛ࡞Δ 7VF$-*ͷΦϓγϣϯΛͬͯ࡞Δ͜ͱ͕ग़དྷΔ
None
None
None
None
7VFKTΛ༻ͯ͠8FC$PNQPOFOUTΛ ࡞ΔϝϦοτ 7VF$PNQPOFOUΛͦͷ··8FC$PNQPOFOUTͱͯ͠ੜग़དྷΔ ).3͕༗ޮԽͨ͠ঢ়ଶͰ8FC$PNQPOFOUTΛ։ൃग़དྷΔ ࠩඳը͞ΕΔͷͰૉͰ8FC$PNQPOFOUTΛ࡞ΔΑΓ ύϑΥʔϚϯε͕ྑ͍ͱࢥ͏
7VFKTΛ༻ͯ͠8FC$PNQPOFOUTΛ ࡞ΔσϝϦοτ 7VFKTΛ෦Ͱแ͍ͯ͠Δҝɺී௨ʹ8FC$PNQPOFOUTΛ࡞ΔΑΓ ϑΝΠϧαΠζ͕ॏ͍ͨ
Micro Frontends
None
.JDSP'SPOUFOETͱ ϚΠΫϩαʔϏεͷߟ͑ํΛϑϩϯτΤϯυʹ֦ுͨ͠ͷɻ ಛʹେاۀͩͱ͋Δ෦ॺ͕࡞ͨ͠6*ίϯϙʔωϯτΛྲྀ༻ͯ͠༻͢Δ έʔε͕͋ͬͨΓ͢Δɻ ͍҃اۀͷϒϥϯυσβΠϯݪଇʹԊͬͯಉ͡Α͏ͳ6*Λ֤ͦΕͧΕͷ ෦ॺͰ࡞͢Δέʔε͕͋Δɻ ͦ͏͍ͬͨ߹ʹɺ6*ίϯϙʔωϯτΛXFCDPNQPOFOUTͰ͢Δ ͜ͱͰΛղܾ͢Δɻ
ྫ͑ ·ͨXFCDPNQPOFOUTΛ༻͍ͯ͠Δͱ7VFKT3FBDUKTͳͲɺϥΠϒϥϦ ϑϨʔϜϫʔΫଆͷରԠʹΑΔ͕ɺ෦ͰXFCDPNQPOFOUTΛ༻͢Δ͜ͱ͕ ग़དྷΔͷͰɺকདྷతͳΞʔΩςΫνϟʔมߋ͕ൃੜͨ͠ࡍʹɺ6*͕ෛ࠴ʹͳΓ ʹ͍͘ ͱ͍͑ɺݱࡏ7VFKT3FBDUKTڥԼͰͷ41"XFCΞϓϦΛ։ൃ͍ͯ͠ΔͷͰ ͋Εૉʹ7VFDPNQPOFOU3FBDUDPNQPOFOUͰߏஙͨ͠ํ͕ྑ͍ͱ ࢥ͏ɻ
None
ݸਓతͳײ 7VFKTͰͷ։ൃʹ׳Ε͍ͯΕଞ෦ॺ ͘͠ଞͷ৫ʹ 8FC$PNQPOFOUT ͱͯ͠ؾܰʹϥΠϒϥϦΛఏڙग़དྷͦ͏ɻ 7VFKTͩͱ8FC$PNQPOFOUTͷαϙʔτ͢Δʹͯ͠࡞Δʹͯ͠αϙʔτ͕ ް͍ͱࢥ͏ɻ ͱ͍͑7VFKTͰ8FC$PNQPOFOUTΛ࡞Δͷ͕ਖ਼ͩͱࢥΘͳ͍͕ɺ ଞͷϥΠϒϥϦΛ༻͢ΔΑΓεϜʔζʹऔΓ͔͔ΕΔͱࢥ͏ɻ
օ͞Μ8FC$PNQPOFOUT࢝ΊͯΈ·ͤΜ͔ʁ
Fin.