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.2k
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
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
700
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
820
Other Decks in Technology
See All in Technology
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
17k
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
What’s new in Android development tools
yanzm
0
320
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.8k
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
ビギナーであり続ける/beginning
ikuodanaka
3
760
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
130
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Why Our Code Smells
bkeepers
PRO
336
57k
Building Adaptive Systems
keathley
43
2.7k
The Invisible Side of Design
smashingmag
301
51k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Done Done
chrislema
184
16k
The Cult of Friendly URLs
andyhume
79
6.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Being A Developer After 40
akosma
90
590k
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 !!