Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebComponentsで フレームワークを1ページに共存させる
Search
Takuya Nishio
March 08, 2024
Programming
890
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
WebComponentsで フレームワークを1ページに共存させる
エンジニアの自由研究発表会vol.9
Takuya Nishio
March 08, 2024
More Decks by Takuya Nishio
See All by Takuya Nishio
8年以上RailsのWebサービスをメンテしてわかったこと
webuilder240
0
120
スタートアップでどのようにAutifyを活用しているか
webuilder240
0
300
payjp-anti-pattern
webuilder240
0
140
Other Decks in Programming
See All in Programming
Observability in Practice:Grafana 與 Edge Device SRE 的那些事
blueswen
0
130
Modding RubyKaigi for Myself
yui_knk
0
900
DynamoDBには集計系のクエリがないけどなんとかしたい
musan
1
130
IBM Bobを活用したレガシーアプリの最新化
oniak3ibm
PRO
1
180
3Dシーンの圧縮
fadis
1
670
Datadog × OpenTelemetry 入門と実践のあいだ
kn_to_maxpno
1
150
tsserverとは何だったのか、これからどうなるのか
nowaki28
1
450
作って学ぶ、 JSX (TSX) ランタイムの基本
syumai
7
1.6k
AutonomyとControlのあいだ:Graflowで記述するAIエージェント協調
myui
0
110
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
minako__ph
4
1.4k
The Arts and Crafts of Work in the AI Era — Toward Mastery in Software Development
kuranuki
1
730
AI駆動開発で崩れていくコードベースを立て直す
kyoko_nr_nr
1
440
Featured
See All Featured
How Software Deployment tools have changed in the past 20 years
geshan
0
34k
Agile that works and the tools we love
rasmusluckow
331
21k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
360
Odyssey Design
rkendrick25
PRO
2
690
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
430
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
840
jQuery: Nuts, Bolts and Bling
dougneiner
66
8.5k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
How to Talk to Developers About Accessibility
jct
2
220
The SEO identity crisis: Don't let AI make you average
varn
0
480
Accessibility Awareness
sabderemane
1
130
Transcript
8FC$PNQPOFOUTͰ ϑϨʔϜϫʔΫΛϖʔδʹڞ ଘͤ͞Δ 1 自 vol. 9
2 西 @webuilder 24 0
3 自己 ・ SaaS ・ Web WebComponents 心
Web 4
5
🥺 6
入 7
日 8
9 Web Components
10 Web Components Custom Elements 自 HTML JS HTML Vue
React CSS GitHub Salesforce
11 Vue React CSS connectedCallback disconnectedCallback DOM
12 Web Components
13 React ・ Vue 比 WebComponents Web HTML 一 CSS
SSR
14 行 Vue.js React 行 CustomElement WebComponents
15
16
17
18 https://ace-resolver- 39930 5 .web.app/
19 色 Vue Svelte Preact WebComponents 立
20
21 HTML
22 WebComponents Vue
23 CustomElements 行 createApp Vue React
24 Intersection Observer WebComponents 面 示 JS
25 GitHub https://github.com/webuilder 24 0 /sample-webcomponents-project
26 方 WebComponents Astro SSR
27
28 用 WebComponents 用 Vue 50 行
29 WebComponents Svelte ・ React ・ Vue 方 npm WebComponents
30 心 WebComponents 色 https://zenn.dev/p/osiro
None