Web Componentsの考え方にしたがって、「既存のコンポーネントを使いたい」または「自分のお手製のコンポーネントを作ってみたい」と思った場合はどうすれば良いでしょうか？どうすると一番簡単に実現できるでしょうか？
僕は今のところ、「Polymerを使うのが一番良い」と思います。
（画像：http://www.polymer-project.org/）
PolymerはGoogleが開発しているプロジェクトで、これを使うとWeb Componentsを手軽に体験できるようになりそうです。 この記事では、Polymerが提供してくれるおもな機能をまとめました。
Polymerで、できること
Chrome以外のブラウザでもWeb Componentsをつかうことができるようになる。
- 現時点では、Shadow DOMなどのWeb Componentsに必要な技術は、Chrome以外のブラウザでは、ネイティブサポートされていないそうです。そこで、Polymerではエミュレーションライブラリ「platform.js」を用意してくれています。これを読み込んでおけば、すべてのモダンブラウザでWeb Componentsの機能が使えるようになります。これをPolyfillというようです。*1
しかし残念ながら、完全に快適なWeb Components体験ができるのは、今のところ Chrome, Firefox のみと考えておいたほうが良いのかもしれません。僕がPolymerサイトのデモを試した限りでは、そもそも読み込めなかったり、仮に読み込みに成功した場合でも動作がカクカクして遅かったり、といったブラウザもありました。*2
マテリアルデザイン（Material Design）を試すことができる。
- 今年のGoogle I/Oで紹介された新デザイン言語「Material Design」をimportして使うことができます。綺麗なデザインでアニメーション豊かなコンポーネントはPolymerを用いて作られているようです。こちらのページでMaterial DesignのコンポーネントとそのDemoを探すことができます。
コンポーネントを簡単に作成できる
- JavaScriptで
createShadowRoot()などをする手間を省くことができます。非常に直感的に<my-element>をつくることが可能になります。
- JavaScriptで
Polymerで、コンポーネントの製作を始めるには
一番簡単な方法は、Chrome Dev Editor上で開発を行うことです。Chrome Dev Editorについては、こちらの記事を参照してください。
次回は、Chrome Dev Editorを用いて実際にシンプルなコンポーネントをつくってみたいと思います！
参考
- Shadow DOMなどをとても分かりやすく説明されています。Web Componentsを学ぶモチベーションがアップする動画です：
Web をまともにしたいので Shadow DOM と Web Components をつくってます - HTML5 Conference 2013 - - YouTube
*1:"「新しい環境を基準にし、古い環境を新しい環境に近づけて差をなくす」という手段を「Polyfill（ポリフィル）」といいます。"（http://www.adobe.com/jp/devnet/dreamweaver/articles/html5pack_css3_part6.html より引用）
*2:この辺りは今後もう少し詳しく調べてみます。
