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

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

Avatar for Takuya Nishio Takuya Nishio
March 08, 2024
Programming
0
770

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

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

Avatar for Takuya Nishio

Takuya Nishio

March 08, 2024
Tweet

More Decks by Takuya Nishio

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

Other Decks in Programming

See All in Programming
大規模アプリのDIフレームワーク刷新戦略 ～過去最大規模の並行開発を止めずにアプリ全体に導入するまで～
Avatar for GO Inc. dev mot_techtalk
1
450
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
110
Go言語の特性を活かした公式MCP SDKの設計
Avatar for hond hond0413
1
230
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
Avatar for Naofumi Kagami naofumi
4
4.1k
バッチ処理を「状態の記録」から「事実の記録」へ
Avatar for HideyukiKitao panda728
PRO
0
160
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
Avatar for Masahiro Nishimi masahiro_nishimi
2
460
スマホから Youtube Shortsを見られないようにする
Avatar for lemolatoon lemolatoon
27
32k
Devoxx BE - Local Development in the AI Era
Avatar for Kevin Dubois kdubois
0
130
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
Avatar for Marco Roth marcoroth
3
1k
20251016_Rails News ～Rails 8.1の足音を聴く～
Avatar for Masato Mori morimorihoge
1
320
Catch Up: Go Style Guide Update
Avatar for ANDPAD inc andpad
0
230
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
Avatar for Masayuki Izumi izumin5210
0
3.3k

Featured

See All Featured
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
23k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
Done Done
Avatar for chrislema chrislema
185
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.7k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
It's Worth the Effort
Avatar for 3n 3n
187
28k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.5k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
10k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k

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