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.1k
TypeScriptの型表現
honda
10
3k
Web Componentsの今
honda
1
400
これまでのReact、これからのReact
honda
0
290
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
650
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
660
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
770
Other Decks in Technology
See All in Technology
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
730
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
現場で役立つAPIデザイン
nagix
29
10k
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
240
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
BBQ
matthewcrist
86
9.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
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 !!