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
え、まだWeb Componentsを未来の技術だと思ってるの?
Search
ponday
November 05, 2018
Programming
2
820
え、まだWeb Componentsを未来の技術だと思ってるの?
VEGA Tech Meetup #3 (2018/11/05) 発表資料です。
ponday
November 05, 2018
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.2k
TypeScriptの型表現
honda
10
3.1k
Web Componentsの今
honda
1
430
これまでのReact、これからのReact
honda
0
310
Gatsbyお試し
honda
0
120
styled-components or emotion?
honda
0
680
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
690
Web Componentsの動向とPolymer
honda
4
2.5k
Other Decks in Programming
See All in Programming
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
900
エンジニア向け採用ピッチ資料
inusan
0
140
機械学習って何? 5分で解説頑張ってみる
kuroneko2828
0
220
AIネイティブなプロダクトをGolangで挑む取り組み
nmatsumoto4
0
120
Claude Codeの使い方
ttnyt8701
1
130
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
240
Javaに鉄道指向プログラミング (Railway Oriented Pro gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
cocet33000
2
580
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
260
Cursor Meetup Tokyo ゲノミクスとCursor: 進化と制約のあいだ
koido
2
1k
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
エラーって何種類あるの?
kajitack
5
260
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Navigating Team Friction
lara
187
15k
For a Future-Friendly Web
brad_frost
179
9.8k
Side Projects
sachag
455
42k
Site-Speed That Sticks
csswizardry
10
650
Music & Morning Musume
bryan
46
6.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
え、まだWeb Componentsを未来の技術だと思ってるの? VEGA Tech Meetup #3 / Nov 5th, 2018
ponday (@ponday_dev)
Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション エンジニア - Like
: TypeScript / Elixir / Python etc… - あいかわらずフロントエンドの人ではない
None
Web標準の技術のみで 再利用可能な部品を作るAPI
使ったことある人 ノ
たぶんほとんど居ないのでは?
Web Componentsを未来の技術と思い込んでいませんか?
よくある意見 - まだブラウザの対応が進んでないでしょ? - まだほとんど使われてないでしょ? - ウチはReact/Angular/Vue.js使ってるから...
よくある意見 - まだブラウザの対応が進んでないでしょ? - まだほとんど使われてないでしょ? - ウチはReact/Angular/Vue.js使ってるから...
ブラウザの対応状況 対応済 未対応
ブラウザの対応状況 対応済 未対応 大半のブラウザが 対応済
ブラウザの対応状況 対応済 未対応 開発ステータスが 「開発中」に
ブラウザの対応状況 - 大半のモダンブラウザが対応済 - Edgeもステータスが「検討中」→「開発中」に - 既に対応ブラウザ次第では十分使えるレベル - Polyfillを使うという手も
よくある意見 - まだブラウザの対応が進んでないでしょ? - まだほとんど使われてないでしょ? - ウチはReact/Angular/Vue.js使ってるから...
Web Componentsの利用例 - 既に採用事例は多数 - GitHub、YouTube、Google Earthなど
Web Componentsの本番利用 - 既存のリソースを捨てる必要はない - 特に追加設定なく利用も可能 - まずは小さく
よくある意見 - まだブラウザの対応が進んでないでしょ? - まだほとんど使われてないでしょ? - ウチはReact/Angular/Vue.js使ってるから...
or
or No !!
with
フレームワークとの連携 - Web ComponentsはあくまでWeb標準の技術 - 特定のフレームワークに依存するものではない - あらゆるフレームワークと連携できる
これまで Component Component Component State Management Routing State Management Routing
State Management Routing DOM API
これまで Component Component Component State Management Routing State Management Routing
State Management Routing DOM API 各FWが コンポーネント機構を提供
これまで Component Component Component State Management Routing State Management Routing
State Management Routing DOM API コンポーネント機構に 各種機能が依存
これまで Component Component Component State Management Routing State Management Routing
State Management Routing DOM API 独自の要素は 他のFWで流用できない
これから DOM API Component Component Component State Management Routing State
Management Routing State Management Routing Web Components
これから DOM API Component Component Component State Management Routing State
Management Routing State Management Routing Web Components Web標準APIによる コンポーネント機構
これから DOM API Component Component Component State Management Routing State
Management Routing State Management Routing Web Components 各FWのコンポーネントから 利用することができる
Web Componentsの役割 - 再利用可能な部品を作るためのAPI - アプリケーション開発のためのAPIではない - あくまでViewの機能を拡充するもの
Web Componentsとフレームワーク Component State Management Routing Component State Management Routing
DOM API
これだけでアプリケーション(SPA)は作れない
Web ComponentsとJSフレームワーク - Web ComponentsはView以外の面倒は見ない - 状態管理 - ルーティング -
etc… - Web Componentsを使わないほうが便利な場面も - JSフレームワークとは適切に役割分担して使う
例えばReact + Web Components React Component Redux (State Management) Web
Components React Router
例えばReact + Web Components React Component Redux (State Management) Web
Components React Router Web Componentsが 面倒をみない機能
例えばReact + Web Components React Component Redux (State Management) Web
Components React Router ReduxやReact Routerは Reactから利用
例えばReact + Web Components React Component Redux (State Management) Web
Components React Router Reactからプロパティを 渡して利用
Vueで利用する場合も構造は同じ Vue Component Vuex (State Management) Web Components Vue Router
課題 - プロパティの受け渡し - Server Side Renderingが難しい - window.customElements.define -
Shadow DOM - SEO
まとめ - Web Componentsはもう未来の技術ではない - 採用実績も増えつつある - JSフレームワークと共存できる - まずは小さく始めてみては?
Thank you !!