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
February 10, 2018
Technology
2
3.1k
Web Componentsの現在地
FUKUOKA Engineers Day 2018発表資料
ponday
February 10, 2018
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.2k
TypeScriptの型表現
honda
10
3k
Web Componentsの今
honda
1
410
これまでのReact、これからのReact
honda
0
300
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
660
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
670
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
780
Other Decks in Technology
See All in Technology
Cloud Native PG 使ってみて気づいたことと最新機能の紹介 - 第52回PostgreSQLアンカンファレンス
seinoyu
2
220
お問い合わせ対応の改善取り組みとその進め方
masartz
1
370
Go の analysis パッケージで自作するリファクタリングツール
kworkdev
PRO
1
420
ひまプロプレゼンツ 「エンジニア格付けチェック 〜春の公開収録スペシャル〜」
kaaaichi
0
140
数百台のオンプレミスのサーバーをEKSに移行した話
yukiteraoka
0
680
Symfony in 2025: Scaling to 0
fabpot
2
190
Go製のマイグレーションツールの git-schemalex の紹介と運用方法
shinnosuke_kishida
1
410
Amazon Q Developer 他⽣成AIと⽐較してみた
takano0131
1
120
Keynote - KCD Brazil - Platform Engineering on K8s (portuguese)
salaboy
0
120
30代エンジニアが考える、エンジニア生存戦略~~セキュリティを添えて~~
masakiokuda
4
2k
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
470
AWS のポリシー言語 Cedar を活用した高速かつスケーラブルな認可技術の探求 #phperkaigi / PHPerKaigi 2025
ytaka23
7
1.5k
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
22
2.6k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Facilitating Awesome Meetings
lara
53
6.3k
Why Our Code Smells
bkeepers
PRO
336
57k
Become a Pro
speakerdeck
PRO
27
5.2k
Music & Morning Musume
bryan
46
6.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Six Lessons from altMBA
skipperchong
27
3.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
It's Worth the Effort
3n
184
28k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Transcript
Web Componentsの現在地 FUKUOKA Engineers Day 2018 / Feb 10th, 2018
/ Yusuke, Honda
Profile Honda, Yusuke (@ponday) その辺にいるSIer フロントエンドの話ばかりしているけどフロントエンドエンジニアではない
Web Components?
Web Components HTML / CSS / JSで 再利用可能な部品を作る Web API
=
Web Componentsの構成 - Custom Elements - Shadow DOM - HTML
Template - HTML Imports
Web Componentsの構成 - Custom Elements - Shadow DOM - HTML
Template - HTML Imports
Custom Elements HTMLに独自の要素を 追加する仕組み =
Custom Elements
Custom Elements HTMLElementを継承して Custom Elementを定義
Custom Elements Shadow DOMを有効化 テンプレートを定義 ※ templateタグを利用する方法も
Custom Elements my-elementタグとして コンポーネントを登録
Web Componentsの構成 - Custom Elements - Shadow DOM - HTML
Template - HTML Imports
Shadow DOM 各コンポーネントが 独自のDOMツリーを持つ =
html 通常 head body div div h1 input button DOM
DOMツリーは単一 = 全てグローバル
html Shadow DOMが入ると... head body div my-element h1 input button
DOM Shadow DOMは他のDOMツリーから独立 → CSSやJSの影響範囲をカプセル化できる Shadow DOM
None
通常の要素はそのまま Shadow DOMには影響しない
Web Componentsの構成 - Custom Elements - Shadow DOM - HTML
Template - HTML Imports
HTML5で追加されたtemplate要素のこと
Web Componentsの構成 - Custom Elements - Shadow DOM - HTML
Template - HTML Imports
仕様の合意が取れず放棄されました
Web Componentsの概要はここまで
じゃあ、実際Web Componentsって使えるの?
実は既にあるサービスで使われてます
None
None
とはいえ
各ブラウザの対応状況 (2018/02/04時点) Shadow DOM Custom Elements HTML Template ◦ ◦
◦ Chrome - ◦ ◦ Firefox ◦ ◦ ◦ Safari - - ◦ Edge ◦ ◦ ◦ Android Chrome ◦ ◦ ◦ iOS Safari ※ 59~ ※ 10.3~ ※ 部分的サポートを含む ※ IEはすべての仕様に非対応
現状ではpolyfillの利用はほぼ必須
webcomponents.js - Web Components用のpolyfill - Firefox、EdgeだけでなくIE11にも対応 - CSSのカプセル化はデフォルトでは無効 - Shady
CSSというpolyfillを利用 - パフォーマンス上の問題でカプセル化はしていない - YoutubeもShady CSSを使っているらしく、CSSのカプセル化は使ってい ない
しかし
各ブラウザの対応状況 (2018/02/04時点) Shadow DOM Custom Elements HTML Template ◦ ◦
◦ Chrome - ◦ ◦ Firefox ◦ ◦ ◦ Safari - - ◦ Edge ◦ ◦ ◦ Android Chrome ◦ ◦ ◦ iOS Safari ※ 59~ ※ 10.3~ ※ 部分的サポートを含む ※ IEはすべての仕様に非対応 開発中 開発中 Shadow DOMは優先度高
全ブラウザの対応もそう遠くはない(はず)
JSフレームワークはどうなる?
Vue.js - vue-cli - Vue.js公式のコマンドラインツール - VueコンポーネントをWeb Componentsとしてビルドする機能が開発中(ら しい) -
vue-custom-element (非公式) - 既に使える - VueのコンポーネントをWeb Componentsとして動作させる - Shadow DOMはデフォルトでoff
Angular - @angular/elements - 公式チームが実験的なプロジェクトとして実装中 - 次期バージョン6でリリース(予定) - AngularアプリをまるごとWeb Components化する
- 内部でRouterなども動作する - Ionic - Angularベースのモバイルアプリ向けフレームワーク - 次期バージョンでWeb Componentsベースに移行する方針で開発中
Polymer - Web ComponentsベースのJavaScriptライブラリ - Vue.jsやAngularと異なり、Web Componentsが普及する ほど使いやすくなる(はず) - 現在バージョン3が開発中
- HTML importsからES Moduleベースに切り替え中
JSフレームワークの未来予想 - 形はどうあれ、JSフレームワークはなくならない - Web Componentsをラップ / 糖衣構文を提供 (Polymer型) -
内部的にWeb Componentsの仕様を活用 (AngularのScoped CSS型) - Web Componentsを最小のコンポーネントとして扱う (ReactのPure Function Component型) - 既存のフレームワークも相互運用性は強めてくる - 競合するものではなく、共存可能なもの。役割分担が進むはず。 - いずれもコンポーネント志向という考え方は共通している - FW → Web Componentsのパスは既に見えてきてる
着実にWeb Componentsの世界は近づいている
Polyfillなしで、 あらゆるブラウザでWeb Componentsが使える日も近い
各ブラウザの対応状況 (2018/02/04時点) Shadow DOM Custom Elements HTML Template ◦ ◦
◦ Chrome - ◦ ◦ Firefox ◦ ◦ ◦ Safari - - ◦ Edge ◦ ◦ ◦ Android Chrome ◦ ◦ ◦ iOS Safari ※ 59~ ※ 10.3~ ※ 部分的サポートを含む ※ IEはすべての仕様に非対応
※ IEはすべての仕様に非対応
そう、IEさえいなければね(泣)
Thank you !!