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

Vue.js with Web Components

15eb9fe75117e987992d2ae56b811f2d?s=47 hiro
November 10, 2018
Programming
2
9.8k

Vue.js with Web Components

15eb9fe75117e987992d2ae56b811f2d?s=128

hiro

November 10, 2018
Tweet

More Decks by hiro

See All by hiro
hooksが変革する未来について
15eb9fe75117e987992d2ae56b811f2d?s=48 takahirosaeki
0
210
lit-html, lit-elementどちらを使うか迷った際の個人的見解
15eb9fe75117e987992d2ae56b811f2d?s=48 takahirosaeki
0
400

Other Decks in Programming

See All in Programming
Get Ready for Jakarta EE 10
B489790e1a844284d7cd1fa2cd6e021f?s=48 ivargrimstad
0
2.8k
インターン生・新卒向け、学校でもっと教えてほしいITエンジニア基本スキル
E72f241475dfe632c6b1666debc16e8a?s=48 nearme_tech
0
130
シェーダー氷山発掘記
6a661bb5871208cad64912223bb0c637?s=48 logilabo
0
150
Lancersをコンテナへ本番移行する取り組み
5059d3f370ad7e1f4d8de4be79ae1a2c?s=48 rvirus0817
1
410
Node.jsデザインパターンを読んで
3d06fa4b3230d37a8d940405cc4abcc6?s=48 mmmommm
0
2.8k
IE Graduation (IE の功績を讃える)
1ff811939fd0923df8321ec6d8bf9d4b?s=48 jxck
20
12k
JetPackComposeは宣言型プログラミングパラダイムって実はよくわかってないんですが、別に使ってもいいんですよね、
6affc38c52fa1cd2e395b3044cfb95fe?s=48 conigashima
0
190
社用PCのdotfiles管理 / dotfiles-in-company
8c653f1257636312a8e88612ccb27718?s=48 yammerjp
0
140
I/O Extended 2022 in Android ~ Whats new in Android development tools
354271902cd8ba2762d05b251dfa0f84?s=48 pluu
0
570
短納期でローンチした新サービスをJavaで開発した話/launched new service using Java
B887cc104275187588fae7d58790563e?s=48 eichisanden
6
2k
Deep Dive Into Google Zanzibar and its Concepts for Authorization Scenarios
A68cb0f927eafc449f4046ea3edc09a2?s=48 dschenkelman
1
140
Reactは何を提供するLibraryなのか？
2801ae8fb5381bcd119805124a5eeaf2?s=48 taro28
3
570

Featured

See All Featured
Easily Structure & Communicate Ideas using Wireframe
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
181
15k
The Art of Programming - Codeland 2020
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
32
11k
Reflections from 52 weeks, 52 projects
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
337
17k
How GitHub (no longer) Works
78b475797a14c84799063c7cd073962f?s=48 holman
296
140k
CSS Pre-Processors: Stylus, Less & Sass
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
349
27k
10 Git Anti Patterns You Should be Aware of
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
638
52k
The MySQL Ecosystem @ GitHub 2015
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
238
11k
Web Components: a chance to create the future
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
303
40k
Infographics Made Easy
282d599b414022eba5096510f675b6e2?s=48 chrislema
233
17k
The Invisible Side of Design
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
290
48k
XXLCSS - How to scale CSS and keep your sanity
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
236
1M
Music & Morning Musume
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
4.2k

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.