Web Componentsの現在地

52604f94a6d2172df2cad5ab45189940?s=47 ponday
February 10, 2018

Web Componentsの現在地

FUKUOKA Engineers Day 2018発表資料

52604f94a6d2172df2cad5ab45189940?s=128

ponday

February 10, 2018
Tweet

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