Web Componentsの現在地

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
16. None

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. 実は既にあるサービスで使われてます

25. None
26. None

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 !!