Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
WebComponentsで フレームワークを1ページに共存させる
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Takuya Nishio
March 08, 2024
Programming
960
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
WebComponentsで フレームワークを1ページに共存させる
エンジニアの自由研究発表会vol.9
Takuya Nishio
March 08, 2024
Transcript
31 slides
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
More Decks by Takuya Nishio
See All by Takuya Nishio
8年以上RailsのWebサービスをメンテしてわかったこと
webuilder240
0
140
スタートアップでどのようにAutifyを活用しているか
webuilder240
0
310
payjp-anti-pattern
webuilder240
0
150
Other Decks in Programming
See All in Programming
Lambda durable functionsでHuman in the Loopを楽に…楽に……
har1101
2
300
Vue.jsで作る空間解析アプリとCapacitorプラグインのData Bridge
hal_spidernight
1
170
地方こそサーバーレス — 10年続けた、顔が見えるチームで確かな基盤を / Serverless Matters Most in Regional Areas — 10 Years of Building Reliable Foundations with Close-Knit Teams
seike460
PRO
1
380
PyConTW 2026 - AI Coding 不只是工具升級, 區域醫院醫療資訊系統協作開發與資訊團隊轉型實踐
cclai999
0
250
AI-Powered Domain-Driven Design
ziobrando
0
430
AIで開発が速くなった先で、開発チームは何を目指すか
shihochan
1
2k
[DroidKnights 2026] Workflow AX: From Auto-Documented Policies to E2E Testing
raeminkang
0
560
SODA - FACT BOOK(JP)
sodainc
1
40k
AI時代のシニアエンジニアとは
yosuke_furukawa
PRO
15
11k
Engineering Biometric UX Across Android Versions | DroidKnights 2026
ryunen344
1
200
React Native에 현대적인 빌드 도구 더하기: Rollipop 구현기
leegeunhyeok
0
180
Seven New Principles of Software Engineering
yegor256
0
480
Featured
See All Featured
Test your architecture with Archunit
thirion
2
2.5k
Context Engineering - Making Every Token Count
addyosmani
9
1.3k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.8k
The World Runs on Bad Software
bkeepers
PRO
72
12k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
3
300
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
68
60k
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
250
1.3M
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
6.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
22k
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.6k