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

WebComponentsで フレームワークを1ページに共存させる

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Takuya Nishio Takuya Nishio
March 08, 2024
Programming
880
0

WebComponentsで フレームワークを1ページに共存させる

エンジニアの自由研究発表会vol.9

Avatar for Takuya Nishio

Takuya Nishio

March 08, 2024

More Decks by Takuya Nishio

See All by Takuya Nishio
8年以上RailsのWebサービスをメンテしてわかったこと
Avatar for Takuya Nishio webuilder240
0
120
スタートアップでどのようにAutifyを活用しているか
Avatar for Takuya Nishio webuilder240
0
290
payjp-anti-pattern
Avatar for Takuya Nishio webuilder240
0
140

Other Decks in Programming

See All in Programming
PHPer、Cloudflare に引っ越す
Avatar for Suguru Oki / スー suguruooki
1
140
Agentic UI in the Frontend: Architectures with Open Standards @JAX 2026 in Mainz
Avatar for Manfred Steyer manfredsteyer
PRO
0
100
SREに優しいTerraform構成 modulesとstateの組み方
Avatar for hiyanger hiyanger
2
170
2026年のソフトウェア開発を考える（2026/05版） / Software Engineering Scrum Fest Niigata 2026 Edition
Avatar for Takuto Wada twada
PRO
22
11k
Are We Really Coding 10× Faster with AI?
Avatar for Koichi Yoshida kohzas
0
130
Making the RBS Parser Faster
Avatar for Soutaro Matsumoto soutaro
0
670
アクセシビリティ試験の"その後"を仕組み化する
Avatar for yuuumin yuuumiravy
1
200
運転動画を検索可能にする〜Cosmos-Embed1とDatabricks Vector Searchで〜/cosmos-embed1-databricks-vector-search
Avatar for 開発室Graph studio_graph
1
660
20260514_its_the_context_window_stupid.pdf
Avatar for heita heita
0
620
Symfony AI in Action - SymfonyLive Berlin 2026
Avatar for Christopher Hertel chr_hertel
1
120
継続的な負荷検証を目指して
Avatar for Kazuhiko Yamashita pyama86
1
630
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
240

Featured

See All Featured
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.7k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
400
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
3k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.4k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
820

Transcript

  1. 8FC$PNQPOFOUTͰ ϑϨʔϜϫʔΫΛϖʔδʹڞ ଘͤ͞Δ 1 自 vol. 9

  2. 2 西 @webuilder 24 0

  3. 3 自己 ・ SaaS ・ Web WebComponents 心

  4. Web 4

  5. 5

  6. 🥺 6

  7. 入 7

  8. 日 8

  9. 9 Web Components

  10. 10 Web Components Custom Elements 自 HTML JS HTML Vue

    React CSS GitHub Salesforce

  11. 11 Vue React CSS connectedCallback disconnectedCallback DOM

  12. 12 Web Components

  13. 13 React ・ Vue 比 WebComponents Web HTML 一 CSS

    SSR

  14. 14 行 Vue.js React 行 CustomElement WebComponents

  15. 15

  16. 16

  17. 17

  18. 18 https://ace-resolver- 39930 5 .web.app/

  19. 19 色 Vue Svelte Preact WebComponents 立

  20. 20

  21. 21 HTML

  22. 22 WebComponents Vue

  23. 23 CustomElements 行 createApp Vue React

  24. 24 Intersection Observer WebComponents 面 示 JS

  25. 25 GitHub https://github.com/webuilder 24 0 /sample-webcomponents-project

  26. 26 方 WebComponents Astro SSR

  27. 27

  28. 28 用 WebComponents 用 Vue 50 行

  29. 29 WebComponents Svelte ・ React ・ Vue 方 npm WebComponents

  30. 30 心 WebComponents 色 https://zenn.dev/p/osiro

  31. None