WebComponentsを始めよう

こんにちは。naoto@qword.meです。私の記事では、Qwordで採用している要素技術を紹介していきます。まずはWebComponentsです。

WebComponentsとはなにか

ざっくりいうと、カスタムUIコンポーネントを作成、共有するためのWeb標準です。以下の要素で構成されています。

• Template
• Custom Elements
• Shadow DOM
• HTML Imports

http://webcomponents.org/

Polyfill

残念ながらこれを実装しているブラウザはまだ多くないため JavaScript Polyfillを利用する必要があります。

Polyfillはbowerで管理するのがよいでしょう。(bowerの説明は省略。)

$ bower install webcomponentsjs

htmlの内に以下のコードを書いてwebcomponentsのpolyfillをloadします。Browserがひとつでも要素技術を実装していない場合には、polyfillをloadするようにしています。

<script>
  if ('registerElement' in document
    && 'createShadowRoot' in HTMLElement.prototype
    && 'import' in document.createElement('link')
    && 'content' in document.createElement('template')) {
    // We're using a browser with native WC support!
  } else {
    document.write('<script src="bower_components/webcomponentsjs/webcomponents.min.js"><\/script>');
  }
</script>

Polymer

WebComponents自体は低いレベルの要素技術であり、実際の開発ではその上に構築されたJavaScriptのライブラリを採用することになることが多いでしょう。現時点での代表的なものはPolymerとX-TAGです。QwordではPolymerを採用しています。

次回以降は、必要に応じてWebComponentsの解説を加えつつ、Polymerの解説をしていきます。