Slide 1
Slide 1 text
Polymer と 最近の
Web Components 事情
2017/02/03
石倉淳一
Slide 2
Slide 2 text
アジェンダ
● Web Components おさらい
● 最近のWeb Components事情
● Polymer
● その他のフレームワーク
● まとめ
Slide 3
Slide 3 text
Web Components
おさらい
Slide 4
Slide 4 text
Web Components の構成する４つの仕様
● Templates
JavaScriptから利用することができるDOMベースのクライアントサイドのテンプレー
ト仕様
● HTML Imports
関連するHTML，CSS，JavaScriptファイルなどをロードするための仕様
● Custom Elements
独自の要素を登録し利用するための仕様
● Shadow DOM
DOMツリーに対してカプセル化（スコープの隔離）を実現するための仕様
Slide 5
Slide 5 text
Extensible Web
「低レベルなAPIを道具として提供し、開発者がWebを拡張
(extend)していけるようにしよう」
➔ Webにおける多くの仕様は高レベルであり、ブラウザベンダによって様々なユース
ケース（=使われ方）を考慮されて仕様が策定
➔ 複雑で、仕様策定に時間がかかってしまい、時代の進化についていけていない
➔ The Extensible Web Manifestoという考え方が出てきた
● Web Components も、４つの仕様をまとめて1つの仕様とする
よりも、役割分担を分けてそれぞれで低レベルなAPIを提供
Slide 6
Slide 6 text
最近の
Web Components 事情
Slide 7
Slide 7 text
ブラウザサポート状況
Chrome Opera Firefox Safari Edge
Templates ◯ ◯ ◯ ◯ ◯
HTML Imports ◯ ◯ △ ☓ ☓
Custom
Elements
◯ ◯ △ △ ☓
Shadow DOM ◯ ◯ △ ◯ ☓
※ ○＝サポート済み，△＝開発中／予定あり，×＝開発予定なし
Slide 8
Slide 8 text
Shadow DOM v1 と Custom Elements v1
これまでGoogleを中心に策定されてきたv0の仕様を元に、新たな
ものをv1としてMozillaやAppleなどの各ブラウザベンダーの合意
を改めてとりながら策定が進められている
Slide 9
Slide 9 text
Shadow DOM v1
● Safari 10.0においてShadow DOM v1がネイティブサポート！
● FirefoxについてもShadow DOM v1の実装が既に開始！
Slide 10
Slide 10 text
Custom Elements v1
● Safari Technology Preview Release 14にて開発者向け実験
機能をONにすれば利用可能！
● FirefoxではCustom Elements v1の開発に関するタスク登録
はされている（具体的な作業はまだ進んでいないよう）
Slide 11
Slide 11 text
Edgeは未着手…
Slide 12
Slide 12 text
Polymer
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
/* CSS rules for your element */
{{greeting}}
// element registration
Polymer({
is: "element-name",
// add properties and methods on the element's prototype
properties: {
// declare properties for the element's public API
greeting: {
type: String,
value: "Hello!"
}
}
});
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Slide 18
Slide 18 text
Slide 19
Slide 19 text
Polymer v2
● 昨年9月にプレビュー版公開
● v2のロードマップ
○ Web Components "v1" の機能のフルサポート
○ Polymer v1.x からのスムースなマイグレーション
○ 標準にそぐわない抽象化を排除
○ Polymer 内部のデータシステムの改善
Slide 20
Slide 20 text
その他のフレームワーク
と Web Component
Slide 21
Slide 21 text
React
● JSXを使って書かれたHTMLテンプレート内でCustom Elementsによっ
て登録された部品を書けばそのまま利用できる
○ https://facebook.github.io/react/docs/web-components.html
● Reactコンポーネントの中でShadow DOMを利用可能にする
ReactShadowというライブラリもある
○ https://github.com/Wildhoney/ReactShadow
Web Compornents と React は相互補完的
Slide 22
Slide 22 text
Angular
● Angular 2では、コンポーネントのスタイルとして既にShadow
DOMを利用できる
● Angularはコンポーネント指向のフレームワークの中でも、独
自仕様の色が濃かったが、今後はどうなる？
Slide 23
Slide 23 text
Vue.js
Vue と、Custom Elements や Shadow DOM のスタイルカプ
セル化のような Web Component 仕様の深い統合を提供
することは全体的に適しています。
しかしながら今の段階では、私たちは本格的にコミットす
る前に、その仕様が熟し、すべての主要なブラウザ上に
広く実装されるのをまだ待っています。
Slide 24
Slide 24 text
Riot.js
最終的には、業界標準としてのWeb Componentsに辿り
着くべきです。いずれは標準コンポーネントがウェブを満
たすことになります。
今日多くの人が、直接DOMを操作せずjQueryを使うよう
に、Web Componentsの上にもさらなる層が作られるで
しょう。
Riotはそういった抽象化の一層です。
Slide 25
Slide 25 text
まとめ
Slide 26
Slide 26 text
モバイルはもうすぐ準備が整う
● Androidにおいては、Android Browserは既にダウントレンド
で、Chromeはすべての準備が整っている
● iPhoneは、Safariの対応状況もAppleがGoogleの次にWeb
Componentsに対してアクティブで、実際に実装について目に
見える進捗がある
Slide 27
Slide 27 text
フレームワークの Web Components対応が進
む
● Shadow DOMは、各フレームワークが長年課題にしてきた部
品とスタイルの対応に関する問題を解決するための根本的な
手法となるはず
● 「低レベルAPIを抽象化する層の一つ」が多くできる
Slide 28
Slide 28 text
UIライブラリの Web Components対応が進む
● UIの部品群を提供するライブラリを今まで開発してきた陣営も
Web Componentsに取り組み始めるのでは
Slide 29
Slide 29 text
Web Componentsの主要ウェブブラウザの
対応状況はかなり進んでいて、実は既に環境
は整いつつある。
今年からは，Web Components がアクティブ
になるレイヤは、ウェブブラウザ開発ベンダー
ではなく、フレームワークやライブラリの開発
者であり、そしてそれらを利用する多くのフロ
ントエンジニア。