超便利なWeb Components用語解説 ｜ SiTest (サイテスト) ブログ

弊社の幾つかのプロジェクトでは、最新のWeb技術であるWeb Componentsを採用しています。

これは広い意味でのHTMLの進化系であり、ビューとロジックをひとつの固まりとして、オリジナルのカスタムエレメントの中に閉じ込めることによって、全体の構成がわかりやすくなったり、それを再利用できる。という利点があります。

例えば、HTML5で追加された便利なエレメントに<audio>があります。これはHTML、CSS、JavaScriptを組み合わせて作られたオーディオプレイヤーが<audio>タグひとつで使用できるというものです。Web Componentsによって、そのようなエレメントを自分自身でつくったり、誰かが作った便利なエレメントを自分のサービスで利用できます。

便利なWeb Componentsにもデメリットがあります。最新技術のため完全に「これ」という仕様が固まりきっておらず、動作しないブラウザがあったり、そもそも技術の全体像が掴みづらかったりします。策定に長い時間がかかっているため、その全体もまた変化している。という状態です。

Web Componentsを解説している色々なページをみても、具体的な実装方法はある程度わかるのですが、それぞれの用語の関連性がよくわからない。という壁にぶつかりました。
そこで、自分の勉強がてらWeb Components周りの用語の整理をしてみます。

Google社が中心となって推し進めている、広義のHTML(HTML、CSS、JavaScript)の次世代Web標準です。Componentsという名前の通り、これまで、divなどの一般的なタグを使ってひとつのファイルに書いていたHTMLを、リスト、入力フォームなどの構成要素ごとに、CSS、JavaScriptと一緒にひとつのカスタムエレメントの中に閉じ込めて、再利用することのできる技術です。

Web Componentsは次の4つの技術から成り立っています。それぞれ単体で使うこともできますが、カスタムエレメントに関連付けて使用すれば、より力を発揮できるでしょう。

・Custom Elements
HTML、CSS、JavaScriptをまとめて独自のタグ(カスタムエレメント)を定義できます。

・Shadow DOM
CSSは画面で共通のものですが、この規格に基づいた定義をすることで、CSSを画面中の要素の中に「閉じ込める」ことができます。たとえセレクタの名前がかぶっても、異なる要素の中で定義されていれば、他に影響をおよぼすことがありません。

・HTML Imports
他のファイルで定義された、HTMLやカスタムエレメントを取り込んで使用できます。

・HTML Templates
HTMLだけで、Ifによる条件分岐や繰り返しなどのロジックに基づいた画面描画が可能となります。

Googleによる、Web Componentsの機能を簡単に使用するためのJSライブラリ(Web Components版jQueryのようなもの)であるPolymer.jsと、便利なカスタムエレメント群であるPolymer-elementsからなります。Polymerと単にいった場合、これらを総称していることが多いです。

Polymer公式（英語）
https://www.polymer-project.org/1.0/

実は、Web Componentsは現状、すべてのブラウザで使えるわけではなく、完全に対応しているのはGoogle Chromeだけです。しかし、webcomponents.jsを読み込ませることによって、多くのブラウザでWeb Componentsの機能を使うことができます。
当初はplatform.jsという名前でしたが、変更になりました。

Web開発の世界では、ある新機能が紹介されてもブラウザごとの対応状況がまちまちということがよくあります。webcomponents.jsのように、まだ対応していないブラウザでも新機能が動くようにするモジュールを総称してpolyfill(ポリフィル)といいます。Polymerと言葉が似ているため、混乱しますが(実際私は混乱しました)直接関係のない概念です。

これらを踏まえた上で下記参考ページを読めば、初めてでもある程度Web Componentsの世界観を理解できるでしょう。それでは！

Web Components公式(英語)
http://webcomponents.org/
(変化を続けるWeb Components最新の動向を紹介したサイトです。BROWSER SUPPORTの欄にブラウザのサポート情報が記載されています。webcomponents.jsダウンロードもこちらから。)

Shadow DOM 101(日本語)
https://www.html5rocks.com/ja/tutorials/webcomponents/shadowdom/
(Shadow DOMに関する記述、Custom Elements以外の機能の、日本語による詳細な解説は貴重です。)

HTML Imports　―ウェブのための #include(日本語)
https://www.html5rocks.com/ja/tutorials/webcomponents/imports/
(HTML Importsに関する記述、Custom Elements以外の機能の、日本語による詳細な解説は貴重です。)

Web Componentsの現状(日本語)
http://postd.cc/the-state-of-web-components/
(Web Componentsが広がらない理由の分析)

Web Componentsの基本的な使い方・まとめ(日本語)
http://www.h2.dion.ne.jp/~defghi/webc/webc.htm
(網羅的でわかりやすい日本語による紹介。ページ注にある通り、最新情報ではありませんが、参考になります)

Web開発者に革命をもたらす！「Web Components」超入門(日本語)
https://liginc.co.jp/web/html-css/html/58267
(おなじみLIGさんのブログです。3年前の記事なので、いくつか個別の実装方法は変わっていますが、概要はつかみやすいです。)

Web標準だけでHTMLを部品化するWeb Componentsを試してみる(日本語)
http://albatrosary.hateblo.jp/entry/2014/07/23/221839
(実際の使い方の紹介)