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
400
これまでのReact、これからのReact
honda
0
290
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
660
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
660
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
770
Other Decks in Technology
See All in Technology
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
540
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
1.9k
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
330
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
220
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5.3k
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
550
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
1
170
E2Eテスト自動化入門
devops_vtj
1
120
Qiita Organizationを導入したら、アウトプッターが爆増して会社がちょっと有名になった件
minorun365
PRO
1
300
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
770
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
840
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
240
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
44
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
530
Site-Speed That Sticks
csswizardry
4
410
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Git: the NoSQL Database
bkeepers
PRO
428
65k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Documentation Writing (for coders)
carmenintech
68
4.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
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 !!