Web Componentsの現在地

FUKUOKA Engineers Day 2018発表資料

Transcript

1. Web Componentsの現在地 FUKUOKA Engineers Day 2018 / Feb 10th, 2018 / Yusuke, Honda
2. Profile Honda, Yusuke （@ponday） その辺にいるSIer フロントエンドの話ばかりしているけどフロントエンドエンジニアではない
3. Web Components？
4. Web Components HTML / CSS / JSで 再利用可能な部品を作る Web API =
5. Web Componentsの構成 - Custom Elements - Shadow DOM - HTML Template - HTML Imports
6. Web Componentsの構成 - Custom Elements - Shadow DOM - HTML Template - HTML Imports
7. Custom Elements HTMLに独自の要素を 追加する仕組み =
8. Custom Elements
9. Custom Elements HTMLElementを継承して Custom Elementを定義
10. Custom Elements Shadow DOMを有効化 テンプレートを定義 ※ templateタグを利用する方法も
11. Custom Elements my-elementタグとして コンポーネントを登録
12. Web Componentsの構成 - Custom Elements - Shadow DOM - HTML Template - HTML Imports
13. Shadow DOM 各コンポーネントが 独自のDOMツリーを持つ =
14. html 通常 head body div div h1 input button DOM DOMツリーは単一　＝　全てグローバル
15. html Shadow DOMが入ると... head body div my-element h1 input button DOM Shadow DOMは他のDOMツリーから独立 → CSSやJSの影響範囲をカプセル化できる Shadow DOM
17. 通常の要素はそのまま Shadow DOMには影響しない
18. Web Componentsの構成 - Custom Elements - Shadow DOM - HTML Template - HTML Imports
19. HTML5で追加されたtemplate要素のこと
20. Web Componentsの構成 - Custom Elements - Shadow DOM - HTML Template - HTML Imports
21. 仕様の合意が取れず放棄されました
22. Web Componentsの概要はここまで
23. じゃあ、実際Web Componentsって使えるの？
24. 実は既にあるサービスで使われてます
27. とはいえ
28. 各ブラウザの対応状況 （2018/02/04時点） Shadow DOM Custom Elements HTML Template ◦ ◦ ◦ Chrome - ◦ ◦ Firefox ◦ ◦ ◦ Safari - - ◦ Edge ◦ ◦ ◦ Android Chrome ◦ ◦ ◦ iOS Safari ※ 59～ ※ 10.3～ ※ 部分的サポートを含む ※ IEはすべての仕様に非対応
29. 現状ではpolyfillの利用はほぼ必須
30. webcomponents.js - Web Components用のpolyfill - Firefox、EdgeだけでなくIE11にも対応 - CSSのカプセル化はデフォルトでは無効 - Shady CSSというpolyfillを利用 - パフォーマンス上の問題でカプセル化はしていない - YoutubeもShady CSSを使っているらしく、CSSのカプセル化は使ってい ない
31. しかし
32. 各ブラウザの対応状況 （2018/02/04時点） Shadow DOM Custom Elements HTML Template ◦ ◦ ◦ Chrome - ◦ ◦ Firefox ◦ ◦ ◦ Safari - - ◦ Edge ◦ ◦ ◦ Android Chrome ◦ ◦ ◦ iOS Safari ※ 59～ ※ 10.3～ ※ 部分的サポートを含む ※ IEはすべての仕様に非対応 開発中 開発中 Shadow DOMは優先度高
33. 全ブラウザの対応もそう遠くはない（はず）
34. JSフレームワークはどうなる？
35. Vue.js - vue-cli - Vue.js公式のコマンドラインツール - VueコンポーネントをWeb Componentsとしてビルドする機能が開発中（ら しい） - vue-custom-element (非公式) - 既に使える - VueのコンポーネントをWeb Componentsとして動作させる - Shadow DOMはデフォルトでoff
36. Angular - @angular/elements - 公式チームが実験的なプロジェクトとして実装中 - 次期バージョン6でリリース（予定） - AngularアプリをまるごとWeb Components化する - 内部でRouterなども動作する - Ionic - Angularベースのモバイルアプリ向けフレームワーク - 次期バージョンでWeb Componentsベースに移行する方針で開発中
37. Polymer - Web ComponentsベースのJavaScriptライブラリ - Vue.jsやAngularと異なり、Web Componentsが普及する ほど使いやすくなる（はず） - 現在バージョン3が開発中 - HTML importsからES Moduleベースに切り替え中
38. JSフレームワークの未来予想 - 形はどうあれ、JSフレームワークはなくならない - Web Componentsをラップ ／ 糖衣構文を提供 （Polymer型） - 内部的にWeb Componentsの仕様を活用 （AngularのScoped CSS型） - Web Componentsを最小のコンポーネントとして扱う （ReactのPure Function Component型） - 既存のフレームワークも相互運用性は強めてくる - 競合するものではなく、共存可能なもの。役割分担が進むはず。 - いずれもコンポーネント志向という考え方は共通している - FW → Web Componentsのパスは既に見えてきてる
39. 着実にWeb Componentsの世界は近づいている
40. Polyfillなしで、 あらゆるブラウザでWeb Componentsが使える日も近い
41. 各ブラウザの対応状況 （2018/02/04時点） Shadow DOM Custom Elements HTML Template ◦ ◦ ◦ Chrome - ◦ ◦ Firefox ◦ ◦ ◦ Safari - - ◦ Edge ◦ ◦ ◦ Android Chrome ◦ ◦ ◦ iOS Safari ※ 59～ ※ 10.3～ ※ 部分的サポートを含む ※ IEはすべての仕様に非対応
42. ※ IEはすべての仕様に非対応
43. そう、IEさえいなければね（泣）
44. Thank you !!