Web Componentsの現在地

by ponday

Slide 1

Slide 1 text

Web Componentsの現在地 FUKUOKA Engineers Day 2018 / Feb 10th, 2018 / Yusuke, Honda

Slide 2

Slide 2 text

Profile Honda, Yusuke （@ponday）その辺にいるSIer フロントエンドの話ばかりしているけどフロントエンドエンジニアではない

Slide 3

Slide 3 text

Web Components？

Slide 4

Slide 4 text

Web Components HTML / CSS / JSで再利用可能な部品を作る Web API =

Slide 5

Slide 5 text

Web Componentsの構成 - Custom Elements - Shadow DOM - HTML Template - HTML Imports

Slide 6

Slide 6 text

Web Componentsの構成 - Custom Elements - Shadow DOM - HTML Template - HTML Imports

Slide 7

Slide 7 text

Custom Elements HTMLに独自の要素を追加する仕組み =

Slide 8

Slide 8 text

Custom Elements

Slide 9

Slide 9 text

Custom Elements HTMLElementを継承して Custom Elementを定義

Slide 10

Slide 10 text

Custom Elements Shadow DOMを有効化テンプレートを定義 ※ templateタグを利用する方法も

Slide 11

Slide 11 text

Custom Elements my-elementタグとしてコンポーネントを登録

Slide 12

Slide 12 text

Web Componentsの構成 - Custom Elements - Shadow DOM - HTML Template - HTML Imports

Slide 13

Slide 13 text

Shadow DOM 各コンポーネントが独自のDOMツリーを持つ =

Slide 14

Slide 14 text

html 通常 head body div div h1 input button DOM DOMツリーは単一　＝　全てグローバル

Slide 15

Slide 15 text

html Shadow DOMが入ると... head body div my-element h1 input button DOM Shadow DOMは他のDOMツリーから独立 → CSSやJSの影響範囲をカプセル化できる Shadow DOM

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

通常の要素はそのまま Shadow DOMには影響しない

Slide 18

Slide 18 text

Web Componentsの構成 - Custom Elements - Shadow DOM - HTML Template - HTML Imports

Slide 19

Slide 19 text

HTML5で追加されたtemplate要素のこと

Slide 20

Slide 20 text

Web Componentsの構成 - Custom Elements - Shadow DOM - HTML Template - HTML Imports

Slide 21

Slide 21 text

仕様の合意が取れず放棄されました

Slide 22

Slide 22 text

Web Componentsの概要はここまで

Slide 23

Slide 23 text

じゃあ、実際Web Componentsって使えるの？

Slide 24

Slide 24 text

実は既にあるサービスで使われてます

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

とはいえ

Slide 28

Slide 28 text

各ブラウザの対応状況（2018/02/04時点） Shadow DOM Custom Elements HTML Template ○ ○ ○ Chrome - ○ ○ Firefox ○ ○ ○ Safari - - ○ Edge ○ ○ ○ Android Chrome ○ ○ ○ iOS Safari ※ 59～ ※ 10.3～ ※ 部分的サポートを含む ※ IEはすべての仕様に非対応

Slide 29

Slide 29 text

現状ではpolyfillの利用はほぼ必須

Slide 30

Slide 30 text

webcomponents.js - Web Components用のpolyfill - Firefox、EdgeだけでなくIE11にも対応 - CSSのカプセル化はデフォルトでは無効 - Shady CSSというpolyfillを利用 - パフォーマンス上の問題でカプセル化はしていない - YoutubeもShady CSSを使っているらしく、CSSのカプセル化は使っていない

Slide 31

Slide 31 text

しかし

Slide 32

Slide 32 text

Slide 33

Slide 33 text

全ブラウザの対応もそう遠くはない（はず）

Slide 34

Slide 34 text

JSフレームワークはどうなる？

Slide 35

Slide 35 text

Vue.js - vue-cli - Vue.js公式のコマンドラインツール - VueコンポーネントをWeb Componentsとしてビルドする機能が開発中（らしい） - vue-custom-element (非公式) - 既に使える - VueのコンポーネントをWeb Componentsとして動作させる - Shadow DOMはデフォルトでoff

Slide 36

Slide 36 text

Angular - @angular/elements - 公式チームが実験的なプロジェクトとして実装中 - 次期バージョン6でリリース（予定） - AngularアプリをまるごとWeb Components化する - 内部でRouterなども動作する - Ionic - Angularベースのモバイルアプリ向けフレームワーク - 次期バージョンでWeb Componentsベースに移行する方針で開発中

Slide 37

Slide 37 text

Polymer - Web ComponentsベースのJavaScriptライブラリ - Vue.jsやAngularと異なり、Web Componentsが普及するほど使いやすくなる（はず） - 現在バージョン3が開発中 - HTML importsからES Moduleベースに切り替え中

Slide 38

Slide 38 text

JSフレームワークの未来予想 - 形はどうあれ、JSフレームワークはなくならない - Web Componentsをラップ／糖衣構文を提供（Polymer型） - 内部的にWeb Componentsの仕様を活用（AngularのScoped CSS型） - Web Componentsを最小のコンポーネントとして扱う（ReactのPure Function Component型） - 既存のフレームワークも相互運用性は強めてくる - 競合するものではなく、共存可能なもの。役割分担が進むはず。 - いずれもコンポーネント志向という考え方は共通している - FW → Web Componentsのパスは既に見えてきてる

Slide 39

Slide 39 text

着実にWeb Componentsの世界は近づいている

Slide 40

Slide 40 text

Polyfillなしで、あらゆるブラウザでWeb Componentsが使える日も近い