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
890
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
300
payjp-anti-pattern
Avatar for Takuya Nishio webuilder240
0
140

Other Decks in Programming

See All in Programming
Observability in Practice：Grafana 與 Edge Device SRE 的那些事
Avatar for Blueswen blueswen
0
130
不変条件と整合性境界—ビジネスが決める設計判断と実現パターン / Invariants and Consistency Boundaries
Avatar for nrs nrslib
13
3.5k
IBM Bobを活用したレガシーアプリの最新化
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
1
180
Oxlintのカスタムルールの現況
Avatar for syumai syumai
6
1k
AIチームを指揮するOSS「TAKT」活用術 / How to Use “TAKT,” an OSS Tool for Orchestrating AI Teams
Avatar for nrs nrslib
6
840
GitHub Copilot CLIのいいところ
Avatar for tkym htkym
2
1.3k
Webフレームワークの ベンチマークについて
Avatar for Yusuke Wada yusukebe
0
140
AI駆動開発で崩れていくコードベースを立て直す
Avatar for Kyoko NR kyoko_nr_nr
1
440
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
Avatar for minako-ph minako__ph
4
1.4k
キャリア迷子上等 ─ "ない道"は自分で作ればいい
Avatar for 16bit_idol 16bitidol
3
1.8k
Inside Stream API
Avatar for Yuichi.Sakuraba skrb
1
650
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
Avatar for hideki kinjyo o0h
PRO
0
190

Featured

See All Featured
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.2k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
330
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
580
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
310
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
23k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
380
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.3k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.1k

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