Web Componentsが変えるWeb開発の未来から、はや二年が経ちました。コミュニティでの議論やフィードバックを経て2016年現在、Web Componentsの仕様は大きくアップデートされています。先日行われたDevFest Tokyo 2016でもWeb Components 2016 & Polymer v2 と題してWeb Componentsの最近についてお話しました。

これまでGoogleを中心に策定されてきたv0の仕様を元に、新しい仕様はMozillaやAppleなどの各ブラウザベンダーの合意を改めてとりながら策定が進められています。今日はアップデートされたWeb Componentsの仕様を説明していきます。

基本概念については割愛しますが、えーじさんのShadow DOM – Web Componentsを構成する技術:Tender SurrenderとCustom Elements – Web Componentsを構成する技術: Tender Surrenderがわかりやすいので、Shadow DOMやCustom Elementsが何なのかわからない人はまずこちらを見ましょう。

Shadow DOM v1の仕様

Shadow DOMはDOMにスコープをもたらす重要な仕様です。v1においては、基本的なコンセプトはそのままにAPIが見直されています。

createShadowRoot()からattachShadow()へ

createShadowRoot() で行っていたShadow Rootの作成ですが、v1では attachShadow() を使います。関数がShadow Rootを返す点はこれまで同様です。

const div = document.querySelector('div');
const shadowRoot = div.attachShadow({
  mode: 'open' // or 'close'
});

// readonly な shadowRoot プロパティの追加
console.log(div.shadowRoot);

attachShadow() は引数にオプションを取ります。v1においてShadow DOMにはOpenedなモードとClosedなモードが存在し、mode: 'open' または mode: 'close' のように指定します。

Shadow DOMをホストできるHTML要素に shadowRoot という読み取り専用のプロパティが追加されており、要素のShadow DOMはこれを通して参照します。要素が Shadow DOMをホストした時点で shadowRoot プロパティは参照を返すようになり、Shadow DOMがないうちは null です。DevToolsで document.querySelector('div').shadowRootを実行すると undefined ではなく null が（きっと）返ってきます。

OpenedなShadow DOMとClosedなShadow DOM

Shadow DOMのモードにOpenedとClosedがあることを先に述べましたが、これはShadow DOMの外の世界からアクセスできるかどうかを示します。このため、外部からアクセス不能なClosedなShadow DOMをホストする要素の shadowRoot プロパティは、null を返します。

外部からのアクセスを許すべきか封じるべきかは賛否両論があったため、このモードという形で合意形成されました。

ClosedなShadow DOMをホストする要素は第三者に編集されないので、コンポーネントを作ったときに独立性を保つことができます。ネイティブの video 要素を Chrome で閲覧すると、各種制御UIがShadow DOMで実装されていることがわかりますが、このように外部から操作されたくない場合にはClosedモードが適しているのでしょう。逆にOpenedでアクセスの余地を残せば、より柔軟にコンポーネントを利用できるはずです。

複数Shadow Rootの廃止

v0では単一の要素に対してShadow Rootを複数持つことが許可されていましたが、v1では禁止されます。そのため attachShadow() を2回以上実行すると例外が発生します。

Shadow DOMをホストできる要素が限定的に

v0ではあらゆる要素がShadow DOMをホストすることが可能でしたが、v1では限定的になります。許可が予定されているのは次の要素です。

article, aside, blockquote, body, div, footer, h1, h2, h3, h4, h5, h6, header, 
nav, p, section, span

これらのネイティブ要素に加えて、カスタム要素もShadow DOMをホストできます。inputや imgなどの置換要素がShadow DOMをホストできなくなるようです。

Insertion PointsからSlotsへ

カスタム要素で囲むコンテンツがどのように表示されるかは、カスタム要素に含まれる content 要素によって挿入先（Insertion Points）が決まっていました。v1では slot 要素によるSlotsに変わります。

form-container というカスタム要素を例に解説します。

<!-- v0での<content>によるInsertion Pointsの決定 -->
<template>
  <style>
    ::content input {
      background: skyblue;
    }
  </style>
  <div>
    <content select=".class-name"></content>
    <content></content>
  </div>
</template>

<form-container>
  <input class="class-name" type="text">
  <button>Button</button>
</form-container>

form-container で囲まれた input と button は、それぞれ form-container の content に挿入されます。挿入先は select 属性に指定するセレクタで決定されていました。

v1からは次のように slot に置き換わります。slot は name 属性で命名可能で、カスタム要素を利用する側から能動的に指定できるようになります。

<!-- v1での<slot>によるSlotsの決定 -->
<template>
  <style>
    ::slotted(input) {
      background: skyblue;
    }
  </style>
  <div>
    <slot name="slot-name"></slot>
    <slot></slot>
  </div>
</template>

<form-container>
  <input slot="slot-name" type="text">
  <button>Button</button>
</form-container>

に挿入された要素を参照する疑似セレクタも ::content の子孫から、 ::slotted() になっています。

さらなる詳細について

Shadow DOMのスペックエディタであるGoogleの夷藤さんのWhat’s New in Shadow DOM v1 (by examples)という記事を見ましょう。スペックに合わせて記事も随時アップデートされています。

Custom Elements v1の仕様

Custom Elementsは開発者が任意の要素を再定義可能にする、Shadow DOM同様に重要な機能です。

ES2015 classベースの要素定義とライフサイクルコールバック

Custom Elements v1ではES2015の class 記法を使った定義が推奨されます。もちろん function を使っても同等の実装は可能ですが、ブラウザのサポートも進みつつある class で書いていくのが望ましいでしょう。

<!-- v0でのカスタム要素の定義 -->
<script>
  const FooElement = Object.create(HTMLElement.prototype);
  FooElement.createdCallback = () => { ... };
  FooElement.attachedCallback = () => { ... };
  FooElement.detachedCallback = () => { ... };
  FooElement.attributeChangedCallback = () => { ... };

  document.registerElement('foo-element', {
    prototype: FooElement
  });
</script>

ライフサイクルコールバックも class の constructor() を活かしリネームされているほか、adoptedCallback() が追加されています。

<!-- v1で推奨されるclassを使ったカスタム要素の定義 -->
<script>
  class FooElement extends HTMLElement {
    constructor() { ... }
    connectedCallback() { ... }
    disconnectedCallback() { ... }
    attributeChangedCallback() { ... }
    adoptedCallback() { ... }
  }

  window.customElements.define('foo-element', FooElement);
</script>

adoptedCallback(oldDocument, newDocument) はオーナーとなるドキュメントが変わったタイミングのハンドラです。同一のカスタム要素名が追加先のコンテキストで既に登録されている場合に、フォールバックするなどのユースケースがあるようです。

window.customElements へ

先に出ていますが、カスタム要素を定義する関数も document.registerElement から customElements.define() に変更されています。 customElements はブラウザコンテキストに追加される新たなグローバルオブジェクトです。

customElements.define() の他には次のような関数が提案されています。

// <foo-element>コンストラクタを参照する
const FooElement = customElements.get('foo-element');

// <foo-element>が定義されたタイミングを取得する
customElements.whenDefined('foo-element').then(() => {
  console.log('foo-element is defined');
});

カスタム要素は非同期で処理されるため、HTMLドキュメントに存在するカスタム要素の振る舞いは定義されるまでブラウザは知り得ません。そのため、ロードの遅延などと相まって意図しないガタツキなどを招きます。そのカスタム要素が他の要素をSlotsに追加するようなものであれば、影響はなおさら大きくなります。

それを防ぐには対象のカスタム要素が定義されるタイミングを知る必要があります。customElements.whenDefined() は指定のカスタム要素が定義されるタイミングをPromiseで知らせてくれます。これによって、初期表示ではカスタム要素を非表示にしておいて、ブラウザが評価可能になるタイミングでdisplay: none; を外すといった対応も可能になるでしょう。

Type Extensionの行方

button is="foo-button" のように、元の振る舞いを活かしつつ機能を拡張するType Extensionという機能がv0では検討されていました。この機能については今なお議論が続けられています。複雑な機能を持つ既存要素の振る舞いを壊さないような機能拡張の難しさへの懸念から反対意見も出ており、WebKitは実装を見送っています。行方が気になる人は引き続きウォッチしてみてください。

HTML Imports

HTML ImportsについてはMozillaが2014年に実装を見送っており、昨年（2015年）においても引き続きES6 Modulesによるリソース解決が適切に動作するかどうかを見守る姿勢を見せています。

ブラウザサポート状況

Shadow DOM v1とCustom Elements v1はChromiumにて先行実装されており、Shadow DOM v1はChrome 53とOpera 40から、Custom Elements v1はChrome 54とOpera 41から利用可能です。

またWebKitでも先行して進められており、Shadow DOM v1がSafari 10に実装されている他、Custom Elements v1もSafari Technology Preview 14に実装されており、メニューのDevelop → Experimental Features → Custom Elementsから有効化できます。

• Safari 10.0
• Safari Technology Preview Release Notes

これらが意味するところは大きく、モバイルプラットフォームで大きなシェアを占めるSafariでサポートされることで、モバイルをターゲットとしているプロダクトではWeb Componentsの利用がかなり現実的になってきたと言えます。

デスクトップブラウザについてはFirefoxとEdgeで実装が進むを期待したいところです。EdgeはDeveloper FeedbackでCustom ElementsとShadow DOMに投票しておくと、早く実装してくれるかもしれません

Googleが開発するWeb ComponentsのライブラリPolymerのバージョン1.1が、2015年8月13日にリリースされました。本記事では、Polymer v1.1のAPIの主要なAPIを解説しつつ、その参考情報を紹介していきます。

また、この記事は「Web ComponentsのこれからーPolymer 0.8、X-Tag、Brick、Bosonic」を事前に読むと理解が深まりますが、これからPolymer v1.1を始めてみるということであれば、本記事単体でも参考にしてもらえればと思います。

Polymer v1.1までの変更点

v0.5からv0.8にかけての差分は前回の記事にて紹介しましたが、その1週間後にv0.9がリリースされ、さらに2週間後にv1.0がリリースされています。

• 0.8 released! – polymer blog
• 0.9 released! – polymer blog
• 1.0 – polymer blog
• 1.1 Release – polymer blog
• Migration guide

v0.8からv1.0にかけてAPIに変更が加えられていますが、v1.0からv1.1へかけては破壊的なAPIの変更はありません。今回は以降で、Polymer v1.x系の主な機能と、参考リソースの紹介をしていきます。

カスタム要素の登録

<dom-module> に <template> と <script> を記述して宣言します。 <script> 内で実行しているPolymer()関数は、 <dom-module> に指定しているID（カスタム要素の名前）を渡し、その他の引数でカスタム要素の振る舞いを決定します。返り値にはカスタム要素のコンストラクタが返却されるので、それを使ってカスタム要素のインスタンスを生成することも可能です。

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="my-element">

  <template>
    <style>
      div { color: red; }
    </style>
    <div>Shadow DOM in My Element</div>
  </template>

  <script>
    var MyElement = Polymer({is: 'my-element'});
  </script>

</dom-module>

v0.8との違いは、カプセル化されるカスタム要素のスタイルを記述する <style> と、Polymer関数を実行する <script> を <dom-module> の中に書くようになった点です。v0.5までの <polymer-element> を彷彿させます。v1.1では <template> の外側に <style> を書いてもスタイルが適用されますが、パフォーマンスは悪く推奨されません。

カスタムコンストラクタ

カスタム要素のコンストラクタを自前で書きたい場合は、Polymer()関数の引数として、factoryImplキーワードと共にコンストラクタ関数を渡します。カスタムコンストラクタによって、引数を渡すことが可能になります。

<script>
  var MyElement = Polymer({
    is: 'my-element',
    factoryImpl: function(foo, bar) {
      // custom constructor is called
    }
  });

  var myInstance = new MyElement('foo', 100);
</script>

このfactoryImplはコンストラクタ関数（ここではMyElement）をnewキーワードと共呼び出した場合のみ実行され、HTMLドキュメントで <my-element> が評価された場合には呼ばれません。

ネイティブ要素の継承

ネイティブ要素を継承したカスタム要素を作る場合は、Polymer()関数の引数にextendsキーワードに継承するネイティブのHTML要素を指定します。v0.5まではカスタム要素の継承もサポートされていましたが、Custom Elementsの仕様としてdocument.registerElement()にカスタム要素名を渡せないのと同様、ブラウザネイティブの要素（inputやbuttonなど）のみを指定できるようになっています。

<script>
  var MyElement = Polymer({
    is: 'my-element',
    extends: 'button'
  });
</script>

ネイティブ要素を拡張するカスタム要素を使うには、extendsに指定した要素にカスタム要素名をis属性に指定します。JavaScriptからインスタンスを生成する場合は、コンストラクタをnewするか、document.registerElement()の第二引数にカスタム要素名を指定してください。

<button is="my-element">My Element</button>

<script>
  console.log(new MyElement() instanceof HTMLButtonElement);
  // => true
  console.log(document.createElement('button', 'my-element') instanceof HTMLButtonElement);
  // => true
</script>

ライフサイクルコールバック

カスタム要素には4つのライフサイクルが存在し、Polymerでもそれらをハンドリングできます。ライフサイクルについてはWeb Componentsを構成する4つの仕様 ー Web Components基礎編という記事の「カスタム要素の挙動を設定する」をセクションにて解説しています。ブラウザネイティブではcreatedCallback・attachedCallback・detachedCallback、attributeChangedCallbackの4つが定義されていますが、PolymerではCallbackが省略されている他、readyというShadow Root配下のDOM構築が完了したタイミングで発火されるハンドラも定義できるようになっています。

<script>
  Polymer({
    is: 'my-element',
    created: function () {
      console.log('my-elementが生成されました');
    },
    attached: function () {
      console.log('my-elementがHTMLドキュメントに追加されました');
    },
    detached: function () {
      console.log('my-elementがHTMLドキュメントから切り離されました');
    },
    attributeChanged: function (name, type) {
      console.log('my-elementの' + name + '属性が変更されました');
    },
    ready: function () {
      console.log('my-elementのDOM構築が完了しました');
    }
  });
</script>

ハンドラの実行順序をまとめると以下のようになります。

1. createdコールバック
2. readyコールバック
3. factoryImplコールバック
4. attachedコールバック
5. (detachedコールバック)

behaviorsを使った振る舞いの制御

カスタム要素の振る舞いを制御するには、これまでのようにPolymer()に直接ハンドラなどを指定するほか、behaviorsにプロトタイプとなるようなオブジェクトを渡すことでも可能です。オブジェクトで定義できるのは先程登場したライフサイクルコールバック、後述するデフォルト属性やプロパティ、オブザーバー（observer）、イベントハンドラの登録（listener）です。

<script>
var MyBehavior = {
  ready: function() {
    console.log('DOM is ready');
  }
};

Polymer({
  is: 'my-element',
  behaviors: [MyBehavior]
});
</script>

見ての通り、behaviorsにはオブジェクトを配列で指定することが可能です。複数指定されてハンドラが重複する（例えば、複数のオブジェクトでreadyが定義されている）場合は、配列上で後から出現するオブジェクトが優先されます（つまり右辺が優先されます）。

カスタム要素のデフォルト属性

カスタム要素のデフォルト属性は、引数のhostAttributesに定義します。hostAttributesに指定した属性とその値は、カスタム要素の属性のデフォルト値になります。

<script>
  var MyElement = Polymer({
    is: 'my-element',
    hostAttributes: {
      role: 'navigation'
    }
  });
</script>

この時 <my-element> は、デフォルトで <my-element role="navigation"></my-element> として評価されます。

カスタム要素のプロパティ

カスタム要素のプロパティは、引数のpropertiesに定義します。プロパティ名をキーに、typeやvalueなどの属性を渡すことでプロパティの特徴を定義します。簡略化された形としては、propertyName: typeという指定も可能です

<script>
  Polymer({
    is: 'my-element',
    properties: {
      foo: {
        type: Number,
        value: 0,
        observer: 'fooChanged'
      }
      bar: {
        type: String,
        computed: 'computeBar(foo)'
      }
    }
    fooChanged: function(newValue, oldValue) {
      // ...
    },
    computeBar: function(foo) {
      return String(foo + 100);
    }
  });
</script>

ここではfooとbarの2つをmy-elementのプロパティとして定義していますが、それぞれobserverとcomputedという属性を渡しています。

オブザーバー関数を指定するobserver

observerはプロパティの変更を監視するオブザーバー関数を指定する属性です。ここではfooChangedという関数を定義しているので、関数名を文字列で渡しています。v0.5まではpropertyNameChangedといったような命名規則を用いてオブザーバー関数を定義していましたが、v1.1においてその機能はありません。監視する関数には引数として、変更後の値（newValue）と変更前の値（oldValue）が引数と渡されるので、前後値を利用することができます。

コンピュート関数を指定するcomputed

computedはプロパティの値を動的に算出するための関数を指定する属性です。observer同様に関数名を文字列で渡しますが、ここではbarプロパティに対しcomputeBar(foo)という値を渡しています。この記述によってcomputeBar関数にはfooプロパティが引数として渡され、barの値は関数が返却する値を参照します。

HTML属性に反映するかどうかを指定するreflectToAttribute

プロパティの値に変更があっても通常はHTML属性に反映されませんが、reflectToAttributeにtrueを指定するとHTMLの属性も更新されるようになります。

<script>
  Polymer({
    is: 'my-element',
    properties: {
      foo: {
        type: String,
        reflectToAttribute: true
      }
    },
    ready: function() {
      this.foo = 'Hello!';
      // this.setAttribute('foo', 'Hello!');と同等の振る舞いが得られる
    }
  });
</script>

この時、readyの関数が実行されたタイミングで <my-element></my-element> は <my-element foo="Hello!"></my-element> となり、setAttribute('foo', 'Hello!')を実行したときと同様の振る舞いが得られます。

イベントハンドラの登録

v0.5以前まではイベントハンドラの登録をブラケットを使って宣言的に定義していましたが、v1.1からはブラケットを使わなくなった他、listenersプロパティにイベントとそのハンドラをハッシュ形式で定義が可能です。

<dom-module id="my-element">

  <template>
    <button on-click="clickHandler">Button</button>
  </template>

  <script>
    var MyElement = Polymer({
      is: 'my-element',
      listeners: {
        'tap': 'myElementTapHandler'
      },
      clickHandler: function(e, detail) {
        // button click handler
      },
      myElementTapHandler: function(e, detail) {
        // my-element tap handler
      }
    });
  </script>

</dom-module>

ジェスチャーイベントのハンドリング

先程のサンプルでtapというDOMネイティブには存在しないイベントに対してmyElementTapHandlerというハンドラを登録していますが、Polymerは自前で実装するにはやや面倒な4つのイベントをサポートしています。

• down: マウスや指によって要素が押下された時
• up: マウスや指が押下後に離された時
• tap: downとupが連続して発生した時
• track: マウスや指が押下されたまま移動した時

それぞれのイベントのハンドラに渡されるイベント引数のdetailプロパティには様々な付加情報が渡されます。詳しくは公式ドキュメントを確認してください。

カスタムイベントの発火

fireという関数を実行することで、ホスト要素を呼び出し元オブジェクトとしてカスタムイベントを発行することが出来ます。引数にはカスタムイベント名と、ハンドラのdetailプロパティに渡すデータを指定します。

<dom-module id="my-element">

  <template>
    <button on-click="clickHandler">Button</button>
  </template>

  <script>
    var MyElement = Polymer({
      is: 'my-element',
      clickHandler: function(e, detail) {
        this.fire('foo', {
          bar: 100
        });
      }
    });
  </script>

</dom-module>

<my-element></my-element>

<script>
  var myElement = document.querySelector('my-element');
  myElement.addEventListener('foo', function(e) {
    console.log(e.detail.bar);
    // => 100
  });
</script>

ここでは <my-element> のボタンをクリックした時にfooというカスタムイベントを発行し、付加データとして{ bar: 100 }という値を渡しています。

データバインディング

データバインディングは以前と同様にカーリーブラケット{{}}およびスクエアブラケット[[]]で指定します。ブラケットではプロパティおよびコンピュート関数を評価することが可能で、v0.5まで有効だった演算子などはサポートされていません。

<dom-module id="my-element">

  <template>
    <input value="{{foo}}" type="text">
    <input value="[[bar]]" type="text">
  </template>

  <script>
    Polymer({
      is: 'my-element',
      properties: {
        foo: String,
        bar: Number
      }
    });
  </script>

</dom-module>

ここでは<my-element>のプロパティとして定義しているfooやbarを、 <input> のvalueにバインディングしています。これによってfooやbarの値に変更があると、<input>に自動で反映されます。

カーリーブラケット{{}}とスクエアブラケット[[]]

カーリーブラケット{{}}とスクエアブラケット[[]]の差は、データバインディングの方向が一方向に制限されるかどうかの違いです。{{}}のデータバインディングは双方向か一方向かが記述によって変わりますが、[[]]は一方向のみであり参照しているプロパティを受け取るのみです。

カーリーブラケット{{}}で指定した際にバインディングの振る舞いを決定するのは、プロパティのnotifyフラグとreadOnlyフラグです。

<script>
  Polymer({
    is: 'my-element',
    properties: {
      foo: {
        type: String,
        notify: true
      },
      bar: {
        type: Number,
        readOnly: true
      }
    }
  });
</script>

notifyフラグはプロパティの変更をホスト要素に通知するかどうか、readOnlyフラグはプロパティが読み取り専用かどうかを決定します。この例ではnotify: trueなので、 <my-element foo="{{value}}"></my-element> としたときにfooに変更があるとvalueへ値が反映されます。

ネイティブ要素との双方向データバインディング

ネイティブ要素との双方向データバインディングも target-prop="{{hostProp::target-change-event}}" という構文でサポートしています。ここでは<input>に入力された値に括弧を付与して<div>に埋め込んでいます。

<dom-module id="my-element">

  <template>
    <input value="{{foo::input}}" type="text">
    <div>{{computeBar(foo)}}</div>
  </template>

  <script>
    Polymer({
      is: 'my-element',
      properties: {
        foo: {
          type: String
        }
      },
      computeBar: function(foo) {
        return `「${foo}」`;
      }
    });
  </script>

</dom-module>

入力された値を参照するタイミングはinputイベントで、バインドするホストプロパティはfooなので、 input value="{{foo::input}}"> になります。これによって、ネイティブ要素のプロパティからカスタム要素へのプロパティへのデータバインディングが行われます。

属性とのデータバインディング

属性に対してデータをバインディングするには以下のように$=を使い、ブラケット{{}}にはこれまでと同様にカスタム要素のプロパティやコンピュート関数を記述します。

<template>
  
  <!-- Attribute binding -->
  <my-element selected$="{{value}}"></my-element>
  <!-- results in <my-element>.setAttribute('selected', this.value); -->

  <!-- Property binding -->
  <my-element selected="{{value}}"></my-element>
  <!-- results in <my-element>.selected = this.value; -->
  
</template>

プロパティとのデータバインディングには <my-element foo={{value}}> と記述することでdocument.querySelector('my-element').foo = valueを振る舞いますが、HTMLの属性にバインディングするためには <my-element foo$={{value}}> のように$=で指定することで document.querySelector('my-element').setAttribute('foo', value) が動的に実行されます。

ネイティブの属性であるclassやstyleには、次のように$=でバインディングすることが可能です。

<!-- class -->
<div class$="{{foo}}"></div>

<!-- style -->
<div style$="{{background}}"></div>

<!-- href -->
<a href$="{{url}}">

<!-- label for -->
<label for$="{{bar}}"></label>

<!-- dataset -->
<div data-bar$="{{baz}}"></div>

HTML上の属性名とDOMのプロパティ名が異なる場合には留意が必要でしょう。data-*の場合、data-fooへの実際のプロパティはelement.dataset.fooとなるため、data-foo={{bar}}ではバインディングできず、element.setAttribute('data-foo', bar)となるdata-foo$={{bar}}を使う必要があります。

Templateのリピート

配列のデータは <template is="dom-repeat"> を使ってリピートし、要素ひとつひとつを参照することが出来ます。以下はis="dom-repeat"を使って配列を展開しているサンプルです（公式より引用）。

<dom-module id="employee-list">

  <template>
    <div> Employee list: </div>
    <template is="dom-repeat" items="{{employees}}">
      <div># <span>{{index}}</span></div>
      <div>First name: <span>{{item.first}}</span></div>
      <div>Last name: <span>{{item.last}}</span></div>
    </template>
  </template>

  <script>
    Polymer({
      is: 'employee-list',
      ready: function() {
        this.employees = [
          {first: 'Bob', last: 'Smith'},
          {first: 'Sally', last: 'Johnson'}
        ];
      }
    });
  </script>

</dom-module>

<template is="dom-repeat"> に加えて展開したい配列をitems属性で指定します。配列の要素の数だけ <template > の内部が繰り返されますが、この中では要素を表すitemと配列のインデックスを示すindexという二つの変数を参照できます。

itemsで参照している配列に変更を加える場合には、インスタンスの関数をそのまま使うのではなくPolymerのインスタンスが備えている専用の関数を使います。例えばこのサンプルのemployeesに値を追加する場合は、 this.employees.push({...})ではなくthis.push('employees', {...})とする必要があります。pushの他にはpop、splice、shift、unshiftも同様です。これらの関数を使わないと、配列への変更が検知されずに再描画されません。

Polymerのデータバインディングの更なる詳細についてはData binding – Polymer 1.0を参照してください。

Polymer内部で行うDOM操作

<dom-module>内部のDOMの操作を行う場合は、Shadow RootのDOM APIではなく専用のインターフェースが用意されています。

IDが与えられている要素の参照

要素に対してIDが与えられていると、this.$.idという形で自動的に参照が生成されます。これはv0.5まで存在していた機能なので、馴染みのある人もいるかと思います。

<dom-module id="my-element">

  <template>
    This is my-element <span id="foo"></span>!
  </template>

  <script>
    Polymer({
      is: 'my-element',
      ready: function() {
        this.$.foo.textContent = this.foo;
      }
    });
  </script>

</dom-module>

また、動的に生成された要素を参照する場合はthis.$$(selector)という関数が用意されています。これにCSSセレクタを渡すと、セレクタにマッチする最初の要素が返却されます。

Polymer.dom()を使ったDOM操作

Polymer内部のDOM操作を行う場合は、Shadow Root配下の要素のDOM APIを直接実行するのではなく、Polymer.dom()という専用のAPIが用意されています。Polymer.dom()の引数にはNodeを渡し、返却されるオブジェクトには、ネイティブのDOM APIと同等の振る舞いをするAPIが用意されています。いずれもDOMのAPIと同じ命名と引数で設計されていますが、サブセットとして用意されているに過ぎず、完全に互換性があるわけではないことに注意してください。

親子関係

• Polymer.dom(parent).childNodes
• Polymer.dom(node).parentNode
• Polymer.dom(node).firstChild
• Polymer.dom(node).lastChild
• Polymer.dom(node).firstElementChild
• Polymer.dom(node).lastElementChild
• Polymer.dom(node).previousSibling
• Polymer.dom(node).nextSibling
• Polymer.dom(node).textContent
• Polymer.dom(node).innerHTML

クエリ

• Polymer.dom(parent).querySelector(selector)
• Polymer.dom(parent).querySelectorAll(selector)

コンテンツの参照

• Polymer.dom(contentElement).getDistributedNodes()
• Polymer.dom(node).getDestinationInsertionPoints()

属性の操作

• Polymer.dom(node).setAttribute(attribute, value)
• Polymer.dom(node).removeAttribute(attribute)
• Polymer.dom(node).classList

Polymer.domから行う追加や削除といったDOM操作は、パフォーマンスを考慮し遅延して実行するようになっています。そのため、操作後のノードの座標やgetComputedStyle()を使ったスタイルの取得をする場合は、操作をPolymer.dom.flush()を使って適時実行し、反映します。

カスタム要素のスタイリング

CSSのスタイリングは、これまでと同様にShadow DOMをスタイリングする記法が適用されます。PolymerはShadow DOMの実装状況で振るまいが変わらないように、Shady DOMという軽量なポリフィルを採用しているため、CSSセレクタをネイティブと同様に書くことはできません。

例えば、<content>を参照する::contentセレクタです。Shadow DOMがブラウザネイティブに実装されていれば単一でも評価されるはずですが、Shady DOMの互換性として::contentセレクタには何らかの親セレクタを指定する必要があります。これは ::content .bar と記述された場合にShady DOMで実現しているスコープを再現できなくなるためです。この場合、 .foo > ::content .bar と書く必要があり、実際には .foo > .bar のように評価されます。

<dom-module id="my-element">

  <template>
    <style>
      :host {
        display: block;
        border: 1px solid red;
      }
      .foo > ::content .bar {
        background: orange;
      }
    </style>

    <div class="foo"><content></content></div>
  </template>
  
  <script>
    Polymer({
      is: 'my-element'
    });
  </script>

</dom-module>

まとめ

Polymer v1.1の主な機能について解説しました。v0.5 → v0.8 → v0.9 → v1.0…とAPIに多くの変更が加えられてきましたが、メジャーリリースになったことで、これまでのような大きな変更は（ おそらく ）なくなるでしょう。

最後に、今年9月の14日〜15日にオランダのアムステルダムにて開催されたPolymer Summit 2015にて、参考リソースが多く公開されたのでそれを紹介します。

Polymer Codelabs

Polymer Codelabsは、Polymerを使ったアプリケーションを作成していくチュートリアル集です。Polymer Summitに合わせて11個のチュートリアルが公開されています。こちらも英語ですが、環境のセットアップから丁寧に解説されています。

セッション動画リスト

Polymer Summit 2015の各セッションはすべて以下のチャンネルで配信されていますので、興味のある方は是非チェックしてみてください。

この記事は、連載「基礎からわかるWeb Components徹底解説～仕様から実装まで理解する〜」の第5回目になります。今回は、先日発表されたPolymer 0.8の変更点、MozillaのWeb Componentsへの関わり方やX-Tag、Brick、BosonicといったPolymer以外の周辺ライブラリについて紹介します。

Polymer 0.8のリリース

先日、Polymerのバージョン0.8がリリースされました。

• 0.8 Released! – Polymer Blog

0.8は1.0のリリースに向けたアルファリリースと位置付けられています。APIも正式版への提案として大きく変更が加えられており、これまでとの互換性も保たれていません。既に実践でPolymerを使っていて、0.8へアップデートを行う場合はこれまでのコンポーネントを作り直す必要があります。

アルファ版ということで、ユーザーのフィードバックや再設計を経て、さらなる変更がある可能性もありますが、より完成度の高いライブラリに近づいていくことでしょう。アップデートに伴い、どのような変更があるのかを見ていきます。

ポリフィルライブラリ

これまでポリフィルライブラリとして推奨されてきたwebcomponents.jsですが、以降はwebcomponents-lite.jsが推奨されています。webcomponents.jsとwebcomponents-lite.jsの差はShadow DOMのポリフィルを含んでいるかどうかなのですが、Polymer 0.8ではよりシンプルで軽量な shady DOM というShadow DOMのポリフィルを含んでいるためです。

• webcomponents/webcomponentsjs
• webcomponents/webcomponents-lite

異なる用途でShadow DOMのポリフィルを必要とする場合は別ですが、Polymerを利用するためであれば、webcomponents.jsの重いShadow DOMのポリフィルを含まず、軽量なwebcomponents-lite.jsを選択するのが望ましいと言えます。

軽量化とパフォーマンスの向上

APIの大きな見直し（後述）と抜本的なリファクタリングによって、ライブラリのファイルサイズの軽量化と実行パフォーマンスの向上が図られています。以下はPolymerLabs/benchmarksで試すことができるベンチマークの結果です（Polymer公式サイトより引用）。初期描画までの時間の棒グラフになっており、低ければ低いほど描画までの時間が短くパフォーマンスが良いということになります。

いくつかのデバイス・ブラウザで計測されていますが、いずれも0.5に比べて0.8が数倍高速に動作するという結果が出ています。もとよりWeb ComponentsはHTML ImportsのCustom Elementsの遅延評価されるという性質によるコンポーネントのがたつきやチラつきが問題になりがちですが、最も重要である初期描画までのパフォーマンスが向上されているのは嬉しいところです。

互換性のない大きなAPIの変更

冒頭で述べた通り、0.5以前と互換性はありません。

• About this release – Polymer
• Migration guide – Polymer

リリースノートとマイグレーションガイドを元に主な変更点を見ていきます。さらなる詳細な差分については、公式ドキュメントを確認してください。

カスタム要素の登録

これまでは、<polymer-element>要素を用いてカスタム要素の登録を行ってきました。

<polymer-element name="my-element">
  <template>
    <style>
      div { color: red; }
    </style>
    <div>Shadow DOM in My Element</div>
  </template>
  <script>
    Polymer();
  </script>
</polymer-element>

0.8からは以下のように、<dom-module>を起点にした方法に変更されます。<dom-module>要素のIDに登録したいカスタム要素名（ここではmy-element）を指定し、PolymerコンストラクタでそのIDを参照しています。

<dom-module id="my-element">
  <style>
    div { color: red; }
  </style>
  <template>
    <div>Shadow DOM in My Element</div>
  </template>
</dom-module>

<script>
  var MyElement = Polymer({is: 'my-element'});
</script>

Polymer({is: 'my-element'});の実行より前に、<dom-module>がロードされている必要があります。<style>タグを<template>の外に配置するようになった点にも注意して下さい。要素の継承についても同様にextendsキーワードで行うことができますが、0.5以前では可能であったカスタム要素の継承は廃止され、<button>や<textarea>のようなビルドインのHTML要素のみになっています。また、これまではconstructor属性にコンストラクタ関数名を指定していましたが、0.8では属性が廃止されるとともにPolymer()がカスタム要素のコンストラクタを返却するようになりました。

document.registerElementの第二引数に指定するextendsの値にもカスタム要素名を指定することはできず、コンストラクタ関数の返却もdocument.registerElementが行います。いずれも素の挙動に近い振る舞いになったと言えるでしょう。

カスタム要素のパースの順序

カスタム要素を含むカスタム要素を作成する場合は、内包するカスタム要素が事前に登録されている必要があります。つまり、<child-element>を含む<parent-element>を作成する場合、<child-element>が事前に登録されていなければなりません。

デフォルト属性とプロパティの宣言

カスタム要素のデフォルト属性とプロパティ宣言の方法も変わります。0.5までは以下のように、デフォルト属性は<polymer-element>に、プロパティの宣言はattributesにスペース区切りで指定していました。

<polymer-element name="your-element" attributes="foo bar" role="button" layout horizontal wrap>
  <template>
    <button>Your Element</button>
  </template>
  <script>
    Polymer({
      foo: 0,
      bar: 'Hello!'
    });
  </script>
</polymer-element>

0.8以降は以下のように、Polymer()コンストラクタにhostAttributesやpropertiesを渡すことで宣言します。

<dom-module id="your-element">
  <template>
    <button>Your Element</button>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'your-element',
    hostAttributes: {
      role: 'button',
      class: 'layout horizontal wrap'
    },
    properties: {
      foo: {
        type: Number,
        value: 0
      },
      bar: {
        type: String,
        value: 'Hello!'
      }
    }
  });
</script>

layout、horizontal、wrapといったようなレイアウトに関するカスタム属性も通常のCSSクラスになり、hostAttributesのclassに指定します。また、このレイアウト機能はPolymerのコアから分離されpolymer.htmlに同梱されなくなったので、別途layout.htmlをインポートする必要があります。

オブザーバーの登録

プロパティの値の監視や、宣言的なイベントハンドラ登録といった機能もPolymerの強力な機能のひとつですが、これらにも少々変更があります。

これまでは、fooというプロパティに対してfooChangedというオブザーバー関数を宣言すると命名規則によって自動でバインドされる機能がありました。また、IDを振った要素はthis.$.idという形でコンストラクタ内でノードを参照することが可能であり、それをobserversに定義することでもプロパティの監視が可能でした。

<polymer-element name="your-element" attributes="foo">
  <template>
    <input type="text" id="input">
  </template>
  <script>
    Polymer({
      foo: 0,
      observers: {
        'this.&.input.value': 'inputValueChanged'
      },
      fooChanged: function (oldValue, newValue) {
        console.log('newValue is ', newValue);
      },
      inputValueChanged: function () {
        console.log('this.&.input.value is changed');
      }
    });
  </script>
</polymer-element>

0.8からはこのpropertyNameに対してpropertyNameChangedという関数を定義することで自動バインドされる仕組みと、IDを振った要素がthis.$にぶら下がる機能が廃止されます。これによってプロパティの監視を行うには、以下のように、ブラケットで囲った変数に対し、observer属性にオブザーバー関数を明示的に宣言することになります。

<dom-module id="your-element">
  <template>
    <input type="text" value="{{inputValue}}">
  </template>
</dom-module>

<script>
  Polymer({
    is: 'your-element',
    properties: {
      foo: {
        type: Number,
        value: 0,
        observer: 'fooChanged'
      },
      inputValue: {
        observer: 'inputValueChanged'
      }
    },
    fooChanged: function (oldValue, newValue) {
      console.log('newValue is ', newValue);
    },
    inputValueChanged: function () {
      console.log('inputValue is changed');
    }
  });
</script>

暗黙的にオブザーバー関数がバインドされる分、直感的に解り難い機能であったので、このように明示的な宣言方法になるのは嬉しいところです。

イベントハンドラの登録とデータバインディング

ブラケット{{}}によるデータバインディングや、イベントハンドラの登録もPolymerお馴染みの機能ですが、これらにも少々変更があります。

<polymer-element name="our-element">
  <template>
    <input type="text" value="{{firstName}}">
    <input type="text" value="{{lastName}}">
    <button on-click="{{onClick}}">Say full name</button>
  </template>
  <script>
    Polymer({
      onClick: function () {
        alert("{{firstName + ' ' + lastName}}");
      }
    });
  </script>
</polymer-element>

0.8からは{{}}内の式の評価はサポートされなくなります。

この例で言えば、"{{firstName + ' ' + lastName}}"のような表現はできなくなります。代わりにcomputedを用いて、式評価後の値を参照するプロパティを宣言する必要があります。これは0.5以前とは異なり、0.8からはpropertiesの配下に定義する属性になることに注意してください。

同じく、{{}}を使ってon-click="{{onClick}}"のように定義していたイベントハンドラの登録は、カーリーブラケットを使わずに記述します。

<dom-module id="our-element">
  <template>
    <input type="text" value="{{firstName}}">
    <input type="text" value="{{lastName}}">
    <button on-click="onClick">Say full name</button>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'our-element',
    properties: {
      firstName: String,
      lastName: String,
      fullName: {
        type: String,
        computed: 'computeFullName(firstName, lastName)'
      }
    },
    computeFullName: function (firstName, lastName) {
      return firstName + ' ' + lastName;
    },
    onClick: function () {
      alert('{{fullName}}');
    }
  });
</script>

このようにfullNameにcomputed: computeFullName(firstName, lastName)とすることでcomputeFullNameの実行結果を参照することが可能です。

DOMの操作

Polymer内でDOM操作を行う場合、通常のShadow Rootから実行するDOMのAPIではなく、Polymer.domという専用のAPIを使う必要があります。

• Polymer.dom(parent).appendChild(node)
• Polymer.dom(parent).insertBefore(node, beforeNode)
• Polymer.dom(parent).removeChild(node)
• Polymer.dom(parent).querySelector(selector)
• Polymer.dom(parent).querySelectorAll(selector)
• Polymer.dom(parent).childNodes
• Polymer.dom(node).parentNode
• Polymer.dom(contentElement).getDistributedNodes()
• Polymer.dom(node).getDestinationInsertionPoints()

Polymer.domから行う追加や削除といったDOM操作は、パフォーマンスを考慮し遅延して実行するようになっています。そのため、操作後のノードの座標やgetComputedStyle()を使ったスタイルの取得をする場合は、操作をPolymer.dom.flush()を使って適時実行し、反映します。

// 従来のDOM操作
this.appendChild(node);
this.shadowRoot.appendChild(node);

// Polymer.domを使ったDOM操作
Polymer.dom(this).appendChild(node);
Polymer.dom(this.root).appendChild(node);

いずれもDOMのAPIと同じ命名と引数で設計されていますが、サブセットとして用意されているに過ぎず、完全に互換性があるわけではありません。例えば、firstChildといったプロパティは用意されていないので、この場合は代わりにchildNodes[0]を使ってください。

MozillaのWeb Componentsへの関わり方

MozillaもWeb Componentsに対し、積極的な姿勢を見せています。FirefoxでもWeb Componentsの仕様のうち、いくつかが実験的に実装され、またX-TagやBrickといったWeb Componentsをつかったコンポーネント作成を後押しするライブラリもリリースしています。

X-Tag

X-TagはWeb Componentsの作成をサポートするライブラリです。webcomponents.jsをポリフィルとし、記述の簡略化や一元化いったライブラリとしての目的もPolymerと似ている部分がありますが、Polymerに比べて多くのブラウザをサポートしているという特徴があります。X-Tagのブラウザターゲットは以下の通りです。

• Firefox 5+ desktop & mobile
• Chrome 4+, Android 2.1+
• Safari 4+ desktop & mobile
• Internet Explorer 9+
• Opera 11+ desktop & mobile

以下は公式ドキュメント引用のX-Tagを使ったカスタム要素作成のコード例です。Polymerほど多機能ではない分、シンプルで全体像を把握しやすいかもしれません。

xtag.register('x-accordion', {
  // extend existing elements
  extends: 'div',
  lifecycle:{
    created: function(){
      // fired once at the time a component
      // is initially created or parsed
    },
    inserted: function(){
      // fired each time a component
      // is inserted into the DOM
    },
    removed: function(){
      // fired each time an element
      // is removed from DOM
    },
    attributeChanged: function(){
      // fired when attributes are set
    }
  },
  events: {
    'click:delegate(x-toggler)': function(){
      // activate a clicked toggler
    }
  },
  accessors: {
    'togglers': {
      get: function(){
        // return all toggler children
      },
      set: function(value){
        // set the toggler children
      }
    }
  },
  methods: {
    nextToggler: function(){
      // activate the next toggler
    },
    previousToggler: function(){
      // activate the previous toggler
    }
  }
});

Brick

X-Tagだけでなく、UIコンポーネント群として配布しているのがBrickです。PolymerとX-Tagとの関係になぞらえるなら、BrickはCore ElementsやPaper Elementsと同じような存在と言えます。以前まではX-Tagが使われていましたが、現在は非依存になっています。

BrickもPolymerの対抗馬として注目されていましたが、開発が中断されているのか、最近は更新がない状態です。参照しているポリフィルライブラリもwebcomponents.jsではなく、旧称のplatform.jsになっているので、利用する場合は注意してください。

Web Componentsの各仕様へのMozillaの対応

2014年12月の記事ですが、MozillaのWeb Componentsに対する興味深い記事が公開されました。

• Mozilla and Web Components: Update

記事には、端的に述べると 「Custom ElementsとShadow DOMの実装は進め、HTML Importsの実装は見送ります。差し当たって、HTML Importsの機能はJavaScriptのライブラリでやってください。」 とあります。HTML Importsが実装されないことについての議論がコメント欄にて行われていますが、この記事の筆者であるAnne van Kesterenは以下のように述べています。

> Both ES6 modules and service workers open up resource dependency management to web developers. And while ES6 modules is mostly intended for JavaScript, we want to see what kind of dependency systems will be built on these two systems in libraries and frameworks before committing to a standardized design. Especially before committing to one that is not influenced by them. （ES6 modulesやService Workersも依存関係の解決に関わってくる。ES6 modulesはJavaScript向けのものだし、ライブラリやフレームワークにとってどのような機構になるかを見たい）

依存管理の仕組みが、HTML ImportsとES6 modules、Service Workerのような、Web WorkersのimportScriptsといった方法が複数存在してしまうことを懸念してのことと察します。例えばHTML ImportsとES6 modulesは目的を共有するものではないはずですが、HTML ImportsでロードするHTML内でES6 modulesが使われるようなケースも加味して、様子を見たいということでしょう。

Bosonic

BosonicもPolymerやX-Tag同様に、Web Componentsの作成を支援するライブラリです。

• Bosonic Web Component
• bosonic/bosonic – GitHub

PolymerやX-Tagと異なるのは、これらのようにライブラリとして機能を補完したりするのではなく、作成したWeb ComponentsをBosonicを使って事前にビルドするトランスパイラであるという点です。Bosonicでビルドすることで、Internet ExplorerやSafariを含めたWeb Componentsに関するAPIが実装されていないブラウザでも機能するコードが生成されます。

Bosonicはブラウザターゲットは以下の通りです。

• Internet Explorer 9, 10, 11
• Safari 8
• Android 4.4
• iOS 8.1
• Chrome 35
• Firefox 30

Bosonicで生成するコード例

以下は公式で例示されている<b-hello-world>というWeb ComponentsをBosonicを使ってビルドする例です。

<element name="b-hello-world">
  <style>
    :host {
      text-align: center;
      font-weight: bold;
      color: red;
    }
  </style>
  <template>
    <p>Hello world!</p>
  </template>
  <script>
    ({
      createdCallback: function() {
        var root = this.createShadowRoot();
        root.appendChild(this.template.content.cloneNode(true));
      }
    });
  </script>
</element>

Bosonicを使ってコンパイルすると、以下の様なCSSとJavaScriptのコードが出力されます。

b-hello-world {
  text-align: center;
  font-weight: bold;
  color: red;
}

(function () {
  var BHelloWorldPrototype = Object.create(HTMLElement.prototype, {
    createdCallback: {
      enumerable: true,
      value: function () {
        var root = this.createShadowRoot();
        root.appendChild(this.template.content.cloneNode(true));
      }
    }
  });
  window.BHelloWorld = document.registerElement('b-hello-world', { prototype: BHelloWorldPrototype });
  Object.defineProperty(BHelloWorld.prototype, '_super', {
    enumerable: false,
    writable: false,
    configurable: false,
    value: HTMLElement.prototype
  });
  Object.defineProperty(BHelloWorldPrototype, 'template', {
    get: function () {
      var fragment = document.createDocumentFragment();
      var div = fragment.appendChild(document.createElement('div'));
      div.innerHTML = ' <p>Hello world!</p> ';
      while (child = div.firstChild) {
        fragment.insertBefore(child, div);
      }
      fragment.removeChild(div);
      return { content: fragment };
    }
  });
}());

これらのファイルと、いくつかのポリフィル（HTMLImports、MutationObservers、WeakMap、Custom Elements）をHTMLでロードすることで、非対応のブラウザでも<b-hello-world>を使うことができます。

トランスパイラとして導入するメリット

新しいAPIで書かれたコードを、非対応のブラウザ向けに従来のAPIで実行できるようにするというのは、ES6をBabelでES5に変換するというアプローチと同様です。新しい技術の導入は常にブラウザサポートと天秤にかかり、サポートを優先するが故に新しい技術を試すことができないというジレンマも多いでしょう。しかし、こういったトランスパイラによって、新しい技術の導入と古いブラウザのサポートが、コストをかけずに両立できるのは非常に嬉しいところなのではないでしょうか。

<element>タグを使った古い記述であったり、リポジトリの更新もしばらくされていないなど、使うには少々抵抗があります。しかし、トランスパイラというアプローチは非常に興味深いものがありますので、メンテナンスが再開されるのを期待したいところです。

まとめ

Polymer 0.8のアップデート、X-Tag・Brick・Bosonic、およびFirefoxの実装状況について紹介しました。

ブラウザの実装状況は、Internet Explorer・Safariが未だに思わしくありません。仕様についても、FirefoxがHTML Importsの実装を遅らせたようにまだ確実とはいえない状況です。しかしこれは議論が行われている表れでもあり、Polymerの0.8がリリースされたことも含めて、Web Componentsに関する技術は普及に向けて着実に前進しているといえます。

しかし、Shadow DOMによってCSSやJSがカプセル化されても、今度はコンポーネント化のアプローチについて頭を悩ませることになるでしょう。Web Componentsが一般化するには仕様の安定やブラウザのサポートだけではなく、我々開発者でナレッジを蓄積していくことが最も重要です。

この記事は、連載「基礎からわかるWeb Components徹底解説～仕様から実装まで理解する〜」の第4回目になります。今回は、前回紹介したGoogleが開発するWeb Componentsのライブラリ、Polymerを元に作られたコンポーネント群「Core Elements」と「Paper Elements」について紹介します。

Core ElementsとPaper Elements

Core ElementsとPaper ElementsはGoogleが開発するWeb Components群です。Core Elementsは、Webを構成する要素をWeb Componentsとして切り出し抽象化したものであり、Paper ElementsはデザインコンセプトMaterial DesignをWebで実現します。

いずれもPolymerをベースに作られている他、各コンポーネントが異なるコンポーネントに依存したつくりになっているものもあります。アーカイブファイルの配布もされていますが、Bowerであればインストール時に依存関係は自動で解決されるため、意識する必要はありません。

インストールして実際に利用する例

Core Elementsのひとつであるcore-imageというコンポーネントを、Bowerを使ってインストールし、実際に使う例を以下に示します。core-imageは通常のimgタグにはない、画像のリサイズやプリロードといった機能を備えたWeb Componentsです。

まず、コマンドラインからBowerを使ってcore-imageをインストールします。bower.jsonに依存情報を記録する場合は--saveオプションを付けます。

$ bower install Polymer/core-image

実行後は、デフォルトであればbower_componentsフォルダ配下にcore-imageと、core-imageが依存するサブリソースがダウンロードされています。core-imageが依存するのはPolymer Coreのみですが、Polymer Coreが依存するリソースがさらに存在するので、それらもダウンロードされています。

ダウンロードしたcore-image.htmlをHTML内でロードすることで、core-image要素を使えるようになります。

<html>
  <head>
    <link rel="import" href="bower_components/core-image/core-image.html">
  </head>
  <body>
    <core-image src="http://lorempixel.com/400/400"></core-image>
  </body>
</html>

サンプルでは、ダウンロードされたPolymer Coreを参照していませんが、ロードしているcore-image.htmlの中でPolymer Coreのインポートが行われているため、改めてPolymer Coreを読み込む必要はありません。

Polymerチームは、依存管理にBowerを使うことを推奨しています。自身でWeb Componentsを作成し、公開する場合は依存するリソースをbower.jsonに書き、コンポーネント内のサブリソースへの参照も、Bowerが使われることを意識するとよいでしょう。

基本的な要素・機能を提供するCore Elements

Core Elementsは、ユーザーインターフェースの基礎です。よく使われるけどブラウザネイティブには提供されていない機能や、Polymerの強力な機能との橋渡しとなるコンポーネントを提供します。後述のPaper Elementsの土台になっているように、拡張前提のコンポーネントも多くあります。

• Polymer core elements Polymer公式サイトのCore Elementsのページ
• Core Elements Sampler Core Elementsのサンプル集

UI関連のCore Elements

UIに関するCore Elementsとしては、既存のHTMLでは提供されていないドロップダウンやオーバーレイといった汎用的なUIや、既存のUIの機能を補完しているコンポーネントが用意されています。

例えば、core-dropdown-menuを使ったドロップダウンが挙げられます。ドロップダウンのUIは今や当たり前のように見かけますが、要件が出る度にイチから実装していたケースも多いのではないでしょうか。

以下は、core-dropdown-menuとcore-menu及びcore-itemを組み合わせて実装するドロップダウンメニューの例（公式サイトから引用）です。

<core-dropdown-menu label="Choose a pastry">
  <core-dropdown class="dropdown">
    <core-selector>
      <core-item label="Croissant"></core-item>
      <core-item label="Donut"></core-item>
      <core-item label="Financier"></core-item>
      <core-item label="Madeleine"></core-item>
    </core-selector>
  </core-dropdown>
</core-dropdown-menu>

他にも以下のようなインターフェースが切り出されています。

• core-collapse 折りたたみコンテンツ
• core-drag-drop ドラッグアンドドロップ
• core-menu メニューアイテム
• core-overlay 他のコンテンツに覆いかぶさるオーバーレイ
• core-tooltip ホバー時に表示されるツールチップ

機能を補完している例としては、core-inputがあります。

core-inputはis="core-input"のように、ネイティブHTMLの拡張として利用します。拡張されたinput要素は、aria-labelやaria-disabledといったARIAで定義されるアクセシビリティを自動で保管したり、フォームとしてサブミットされた時の値をcommittedValueとして取得できるようになります。

他には前述のcore-imageも、後者に該当すると言えるでしょう。

アニメーション関連のCore Elements

Core ElementsにはUIパーツだけでなく、アニメーションを抽象化したコンポーネント群があります。その中核を成すのがcore-animationです。

core-animationでアニメーションを定義し、core-animation-keyframeとcore-animation-propでアニメーションの具体的な挙動を指定します。以下はcore-animation要素でアニメーションを定義する例（公式サイトから引用）です。

<core-animation id="fadeout" duration="500">
  <core-animation-keyframe>
    <core-animation-prop name="opacity" value="1"></core-animation-prop>
  </core-animation-keyframe>
  <core-animation-keyframe>
    <core-animation-prop name="opacity" value="0"></core-animation-prop>
  </core-animation-keyframe>
</core-animation>

<div id="el">Fade me out</div>

<script>
  var animation = document.getElementById('fadeout');
  animation.target = document.getElementById('el');
  animation.play();
</script>

ここではキーフレーム毎に透過度を変化させ、フェードアウトのアニメーションを宣言しています。そして、アニメーションさせたい要素を、core-animationのtarget属性に指定することでフェードアウトさせてます。これはJavaScriptのコードで命令的に行っています。

複数のアニメーションを組み合わせて使いたい場合は、core-animation-groupというグルーピングを担うコンポーネントもあります。

ブラウザAPI関連のCore Elements

提供しているのは、汎用的なアイコンやユーザーインターフェースといったビジュアルに関わる部分に限りません。Core ElementsではAjaxやキーボードアクションのハンドリング等、見た目には直接関わらない機能もWeb Componentsとして抽象化しています。

• core-a11y-keys キー押下のハンドリング
• core-ajax Ajaxの定義及びハンドリング
• core-localstorage ローカルストレージへのアクセス

今まではJavaScriptからそれぞれのAPIを実行し制御していた機能ですが、これらによって、他の要素との連携がPolymerが提供するデータバインディング機能などで容易になる他、HTMLに記述することで宣言的に挙動を定義していくことが可能になります。

以下はデータバインディングを利用してinput要素に入力した値をローカルストレージに保存する例です。

<input type="text" value="{{value}}">
<core-localstorage name="localstorage-key" value="{{value}}"></core-localstorage>

core-localstorageのvalue属性の値がローカルストレージに保存されるので、inputのvalueとバインドすることで入力値がそのまま保存されるようになります。今まではイチからJavaScriptで制御していたことを考えれば、よりわかりやすく、そしてグッと楽になっています。

Material Designを実現するPaper Elements

Paper ElementsはMaterial DesignをWebで実現するWeb Components群です。Polymer Coreへ依存している他、Core Elementsをベースに構成されているコンポーネントが多くを占めています。

Material Designについては、話題のMaterial DesignをWebで実現！Polymerで「Paper Elements」を試そうという記事を一読するとよいでしょう。

• Polymer paper elements Polymer公式サイトのPaper Elementsのページ
• Paper Elements Sampler Paper Elementsのサンプル集

UI関連のPaper Elements

UI関連のPaper Elementsとしては、Core ElementsのUIコンポーネントにMaterial Designを取り入れた要素が多くあります。これは要素の一覧を見比べてもらうとわかるかと思います。

以下はpaper-dropdown-menuの利用例です。

<paper-dropdown-menu label="Your favorite pastry">
  <paper-dropdown class="dropdown">
    <core-menu class="menu">
      <paper-item>Croissant</paper-item>
      <paper-item>Donut</paper-item>
      <paper-item>Financier</paper-item>
      <paper-item>Madeleine</paper-item>
    </core-menu>
  </paper-dropdown>
</paper-dropdown-menu>

このように、利用方法もほぼ同じです。Paper Elementsとして独自に拡張しているのは、影やエフェクトのdurationなどのMaterial Designの表現に関わる部分だけとも捉えられます。

Material Designを体現するエフェクト

影の動きや波紋のようなインタラクションや、奥行きを表現するZ座標のルールといった、特徴的なMaterial Designのコンセプトを担うのは、以下のコンポーネントです。

• paper-ripple クリックした位置から波紋が広がるエフェクト
• paper-spinner 円状のスピナー
• paper-shadow 紙で持ち上げられ影がついたようなエフェクト

特にpaper-rippleとpaper-shadowはMaterial Designのコンセプトの中核を担っており、Paper Elementsのほとんどが、この2つのいずれかに（あるいは両方に）依存したコンポーネントになっています。

paper-shadowを利用する例

実際にpaper-shadowを取り入れてみます。以下はpaper-shadowを使わずにレイアウトしています。

paper-shadowを使うには、冒頭で解説したようにBowerを使ってインストールして、影を付けたい要素をpaper-shadowタグで囲むだけです。

<paper-shadow z="2">
  <core-selector id="theme-selector" selected="default">
    <paper-item name="arta">Arta</paper-item>
    <paper-item name="ascetic">Ascetic</paper-item>
    <paper-item name="color-brewer">Color Brewer</paper-item>
    <paper-item name="docco">Docco</paper-item>
    ...
  </core-selector>
</paper-shadow>

このコードの場合はcore-selectorを囲っていますが、Core Elementsである必要はありません。divでもsectionでも大丈夫です。適用すると以下のようになります。

サンプルページでは、簡単ではありますが他のPaper Elementsも使っています。Paper Elementsを取り入れる例としては、PolymerでMaterial Designなチャットアプリを作ろうという記事に、より実践的なチュートリアルがあります。

Polymer Designer

Core ElementsやPaper Elementsを試す手段としてPolymer Designerがあります。

Polymer Designerではブラウザ上で、Core ElementsやPaper Elementsをドラッグアンドドロップで配置し、データバインディング等もGUI上で行いコンポーネントを作成することが可能なツールです。Web上でお手軽に試したい場合には、こちらを使うのもよいでしょう。

使い方についてはWeb Componentsが変えるWeb開発の未来という記事で触れています。

おわりに

Core ElementsとPaper Elementsの概要・使い方について紹介しました。Web Componentsを使ってWebページの基礎を組み立てるならCore Elementsは便利ですし、Material DesignをWebに取り入れるには、Paper Elementsが既にデファクトスタンダードと言えるかもしれません。

使う分にはもちろん便利なCore ElementsとPaper Elementsですが、興味があればGitHubで公開されているソースコードを見てみることをオススメします。どういった設計でどのように抽象化しているかを見るのも、今後Web Componentsを自分で作っていく上できっと参考になるはずです。

Web Componentsを簡単・便利にするライブラリ「Polymer」を使いこなそう

この記事は、連載「基礎からわかる Web Components 徹底解説 〜仕様から実装まで理解する〜」の第3回目になります。連載の第3回目となる今回は、Googleが中心となって開発を進めるPolymerというWeb Componentsのライブラリについて解説します。

Web Componentsをより柔軟に、そして強力にするライブラリ

Polymerは素のWeb Componentsにおいて、煩雑である部分を簡略化し、機能をより強力なものにし、基礎となるコンポーネントを提供します。BSDライセンスのもと、オープンソースで開発が行われており、ソースコードもGitHubにて公開されているので、Pull Requestを送るなどのかたちで私たちも開発に貢献することが可能です。

• Welcome Polymer

Polymerが提供する機能は、主に3つのパートに分かれています。Web Componentsの作成を簡単に、そして強力なものにする Polymer Core 。次に、一般的なUIの基礎の他、アニメーションや通信機能等を抽象化した Core Elements 。最後に、Google I/O 2014で発表されたデザインコンセプト「Material Design」をWebで実現する Paper Elements です。また、その他にも同じくPolymerチームが開発する、Web Componentsが未実装のブラウザでもWeb Componentsを利用可能にする WebComponents.js というポリフィルも提供されています。

Core Elements及びPaper Elementsは、Polymer Coreをベースに作られているため次回紹介するものとし、今回はPolymerの機能の中心となる Polymer Core と、この WebComponents.js について解説します。

Polymer Core

Polymer Coreは、素のWeb Componentsでは煩雑とも言える作成の手順を簡略化し、テンプレート機能やデータバインディングといった、Web Componentsを作る上で土台となる強力な機能を提供します。Core ElementsやPaper ElementsはこのPolymer Coreをベースに構成されています。よって、Core ElementsやPaper Elementsの利用にはPolymer Coreが必要です。

カスタム要素の作成をシンプルに書き換える

まずは、Web Componentsを作る最もシンプルな例を比べてみましょう。

<template id='sample-element-template'>
  <button>Sample Element</button>
</template>
<script>
  var SampleElementPrototype = Object.create(HTMLElement.prototype);
 
  SampleElementPrototype.createdCallback = function () {
    var shadowRoot = this.createShadowRoot();
    var template = document.querySelector('#sample-element-template');
    var clone = document.importNode(template.content, true);
    shadowRoot.appendChild(clone);
  };

  document.registerElement('sample-element', {
    prototype: SampleElementPrototype
  });
</script>

これはPolymerを使うことで以下のようにシンプルに書き換えることができます。

<link rel="import" href="polymer.html">

<polymer-element name="sample-element">
  <template>
    <button>Sample Element</button>
  </template>
  <script>
    Polymer({
      ready: function () {}
    });
  </script>
</polymer-element>

document.registerElement('sample-element')によるカスタム要素の宣言は、Polymerの場合、<polymer-element name=”sample-element”>のように<polymer-element>のname属性によって行われます。

また、カスタム要素の雛形となる<template>からの要素のコピーとShadow Rootの作成をcreatedCallbackで行っていた部分は、<polymer-element>が自動的に行うため省略できます。

このカスタム要素の定義のエントリポイントとなる<polymer-element>は、polymer.htmlをインポートすることで利用可能になります。

<polymer-element>の属性値

<polymer-element>固有の属性値として、次の4つがあります。

• name 定義するカスタム要素名を指定する（必須）。
• attributes プロパティをスペース区切りで指定する（任意）
• extends 継承する他の要素名を指定する（任意）。document.registerElement()の第二引数に指定するextendsと異なり、カスタム要素名を与えることが可能。
• noscript Polymer()をコールする必要がない場合に指定する（任意）
• constructor カスタム要素のコンストラクタ名を指定する（任意）。カスタム要素のコンストラクタは指定した名称でグローバル空間にエクスポートされる。document.registerElement()の返り値に指定する名称と同等。

以下はconstructor属性とattributes属性を指定する例です。

<link rel="import" href="polymer.html">

<polymer-element name="sample-element"
  constructor="SampleElement"
  attributes="foo bar baz">
  <template>
    <button>Sample Element</button>
  </template>
  <script>
    Polymer({
      foo: 0,
      bar: 'Hello!'
    });
  </script>
</polymer-element>

constructor="SampleElement"と指定することで、このHTMLが評価されると、new SampleElement()でインスタンスを作成することができます。

また、attributes="foo bar baz"でプロパティを3つ定義しました。これはPolymer()関数内で初期値を指定しており、この例においてfoo、bar、bazの初期値はそれぞれ0、'Hello!'、undefinedということになります。

プロパティの宣言については、他にもpublishedを使った方法があります。こちらに関してはPolymer公式のPublished properties – API developer guideを参照してください。

ライフサイクルコールバック

カスタム要素のプロトタイプに指定していたライフライクルコールバックは、それぞれ”Callback”が省略され、Polymer()に引数として指定します。

<link rel="import" href="polymer.html">

<polymer-element name="sample-element">
  <template>
    <button>Sample Element</button>
  </template>
  <script>
    Polymer({
      created: function () {},
      attached: function () {},
      detached: function () {},
      attributeChanged: function () {}
    });
  </script>
</polymer-element>

また、素のCustom Elementsでは提供されていないPolymer特有のコールバックとしてreadyとdomReadyがあります。readyは<sample-element>内で行っているShadow DOMの構築やイベントへのリスナの定義といった様々な処理が完了したタイミングで発火し、domReadyは、宣言するカスタム要素に内包されるコンテンツの生成が完了したタイミングで発火します。

テンプレート機能とデータバインディング

Templateの仕様は不活性なHTML要素を提供するという非常にシンプルなものですが、Polymerは、テンプレートエンジンMustacheでお馴染みのブラケット{{}}を使ったテンプレート機能を提供します。

<template>
  <ul>
    <template repeat="{{item in items}}">
      <li>{{item.name}} - {{item.message}}</li>
    </template>
  </ul>
</template>
<script>
  Polymer({
    ready: function () {
      this.items = [{
        name: 't32k',
        message: 'In Canada.'
      }, {
        name: 'hiloki',
        message: 'So hungry.'
      }, {
        name: '1000ch',
        message: 'Feeling lucky.'
      }];
    }
  });
</script>

{{variable}}のように変数名を記述することで値が展開されるほか、コード例の{{item in array}}のようにinを挿入することで、配列の要素を列挙することも可能です。この変数のコンテキストは常に作成するカスタム要素(this)になります。

また、この{{}}による変数の挿入は、次のon-click="{{onClick}}"のような書式でイベントハンドラの設定をする他、そのままデータバインディングにもなります。

<link rel="import" href="bower_components/polymer/polymer.html">

<polymer-element name="sample-element" attributes="message">
  <template>
    <input type="text" value="{{message}}">
    <button on-click="{{onClick}}"><content></content></button>
  </template>
  <script>
    Polymer({
      message: '',
      onClick: function () {
        alert(this.message);
      }
    });
  </script>
</polymer-element>

まず、on-click="{{onClick}}"によってボタンがクリックされた時の処理を指定し、このonClickで指定されるイベントハンドラはPolymer()コンストラクタを参照しています。もちろんここでも変数のコンテキストはカスタム要素自身（this）になっています。

次に<input type=”text” value=”{{message}}”>となっている部分に着目してください。<input>要素の入力値に対し{{message}}という変数を割り当てていますが、これはデータバインディングの力によって入力値が随時message変数に代入されるようになります。先ほどのonClickにおいて、このmessageをアラートで表示するようにしていますが、message変数を介して`<input>要素への入力値が表示されることになります。

最後に、<sample-element>の属性値を宣言しているattributesでもmessageという属性を定義しています。こちらも例外なくデータバインディングが適用され、<sample-element message=”Input Value”>Button</sample-element>とすれば Input Value が初期値として表示されます。

Web Componentsのポリフィルライブラリwebcomponents.js (旧platform.js)

Web Componentsを実際のWebで使うには、Custom ElementsやHTML Importsといった機能が、仕様にそってブラウザに実装されている必要があります。各機能は2014年末の時点で、実装を先行して積極的に進めていたChrome(Version 39.0.2171.71)をはじめ、Opera(26.0.1656.32)、Firefox(34.0.5)はフラグを立てることでサポートされています。

しかしSafari、Internet Explorerは共に実装を見合わせている状態で、ユーザーの環境を考慮するとこれらのブラウザでもWeb Componentsが動くことが望ましいです。

こういった環境をサポートするのが、webcomponents.jsというPolymerチームの開発するポリフィルライブラリです。これをロードすることで、Web Componentsに関する機能が未実装のブラウザでも利用することが可能になります。また、Mozillaが開発するWeb ComponentsのライブラリであるX-TagやUIコンポーネント群であるBrickもサブセットとして利用しています。

• Polyfills – WebComponents.org webcomponents.jsに関する解説
• webcomponents/webcomponentsjs GitHubのリポジトリ

以前まではplatform.jsという名前で知られていましたが、Polymerの公式アナウンスでv0.5.0からwebcomponents.jsへの名称変更とGitHubのリポジトリがWeb Componentsへ移管が発表されました。コミットログを見る限り開発体制も変わっていないように見えますので、役割に応じて分担を適切に図った結果と言えるでしょう。

webcomponents.jsのインストールと利用方法

webcomponents.jsはGitHubのリポジトリからダウンロードすることができます。

• Releases · webcomponents/webcomponentsjs

Bowerもしくはnpmからもダウンロードすることが可能です。プロジェクトのパッケージ管理に合わせて選んでください。

# bowerでインストール
$ bower install --save webcomponentsjs

# npmでインストール
$ npm install --save webcomponents.js

あとはダウンロードしてきたwebcomponents.jsをHTML内でロードするだけです。Web ComponentsのAPIを実行される前に評価されている必要があることに注意する必要があります。公式では、head要素で最初のscript要素としてロードすることを推奨しています。

<script src="bower_components/webcomponentsjs/webcomponents.js"></script>

また、webcomponents.jsはWeb Componentsの仕様4つ全てをサポートしますが、Shadow DOMのポリフィルを除いたwebcomponents-lite.jsもあります。重いShadow DOMのサポートがない分、軽量化されているので、もしShadow DOMを必要としないのであればwebcomponents-lite.jsを選択するのもよいでしょう。

webcomponents.jsのカスタムビルド

Web Componentsのポリフィルを提供するwebcomponents.jsですが、webcomponents-lite.jsのように補完する機能を選べるように、Custom Elements・HTML Imports・Shadow DOMそれぞれ個別のポリフィルを行うカスタムビルドが用意されています。先程のbowerによるインストールでCustomElements.js、HTMLImports.js、ShadowDOM.jsが同梱されているので、これらをロードすることで個別にポリフィルを行うことも可能です。

自身でカスタムビルドを行う場合はリポジトリをクローンし、gulpで用意されているカスタムビルドを実行します。

# リポジトリのクローン
$ git clone git@github.com:webcomponents/webcomponentsjs.git

# クローンしたリポジトリに移動
$ cd webcomponentsjs

# 依存モジュールのインストール
$ npm install

# gulpのbuildタスクを実行
$ gulp build

実行後、distフォルダにそれぞれのファイルが生成されます。ES6の機能であるWeakMapやMutationObserverもポリフィルとして用意され、Web Componentsに関する仕様であるCustom Elements、HTML Imports、Shadow DOMに、内部で使われているのは非常に興味深い点です。

Polymerとwebcomponents.jsの取り扱い

このように、Polymerはカスタム要素を構築する上での機能拡張であり、webcomponents.jsはWeb Componentsの前提となる機能を提供します。よって、「Web Componentsを作る上でPolymerがなければ作れない」ということはありませんし、提供したいブラウザ環境にWeb Componentsの仕様が実装されていればwebcomponents.jsは不要です。

説明した通りPolymerでは、素のWeb Componentsとは少々異なる方法論を強いられます。これは、Web Componentsの仕様が今後変わる場合に、PolymerがAPIのギャップを吸収してくれる可能性を示唆しています。ですが、Polymer自体のAPIの変更がある場合にそれに追従しなければならないですし、Web Componentsの仕様そのものに比べればサポートがいつまで行われるかという懸念もあります。これらを踏まえると、Web Componentsの機能をひと通り理解した上でPolymerを使うことが望ましいと言えるでしょう。

まとめ

Web Componentsの基礎仕様・実践的なコンポーネント作成に続き、今回はWeb Componentsを支えるPolymerについて解説しました。次回はPolymerを実際に使って作られた、便利な基礎コンポーネント群 Core Elements と、Material DesignをWebで実現する Paper Elements について扱います。

この記事は、連載「基礎からわかる Web Components 徹底解説 〜仕様から実装まで理解する〜」の第2回目になります。

カルーセルギャラリーをコンポーネント化する

Web Componentsによってスコープが実現したものの、コンポーネント化する難しさは変わりません。分割しすぎればHTML ImportsによるHTTPリクエストが必然的に増加し、パフォーマンスへ懸念が残ります。コンポーネント化した要素のどの部分を変更可能にするかなどの、汎用性についても悩ましいところです。

複数の写真をコンパクトなスペースで表示するUIとして、カルーセルギャラリーはよく見かけるUIです。これを実装するには、例えばカルーセルを構築するためのJavaSciriptの処理、及びそのCSSを既存のHTMLに追加する必要があります。

カルーセルギャラリーを構成するためのjQueryのプラグインなどは多数配布されていますが、サードパーティのリソースを導入するリスクについては前回の記事で触れたとおりです。今回は実践編として、これをコンポーネント化し、タグのみでカルーセルを実現する<carousel-panel>という要素を実際に作っていきます。

キャプチャだけではわかりませんが、画像をマウスで左右にスワイプ可能になっています。

仕様の決定と利用のイメージ

コンポーネントを作る前に、どのような機能でどのように表示されるかといった仕様を決めなければなりません。これはWeb Componentsに限らない話ですが、機能として断片化するにあたり重要なステップです。今回は次のような形で進めます。

• <carousel-panel>をカスタム要素とする
• カルーセルに表示する画像は、内部の<img>に指定
• <img>は複数配置可能だが、画像サイズは同一とする
• スワイプアクションで画像を送れるようにする

以下は配置するHTMLのイメージです。

<carousel-panel>
  <img src="image.png" width="320" height="320">
  <img src="image.jpg" width="320" height="320">
  <img src="image.gif" width="320" height="320">
</carousel-panel>

このステップでは、HTMLタグとしてのインターフェースや、どんなUIを備えているのかといった実装の部分はもちろんのこと、切り出す機能の範囲やそもそもの利用頻度といった保守性についても考慮したほうがよいでしょう。

カルーセルのベースとなる要素を作成する（Web Componentsの基本手順のおさらい）

では、前回の記事で解説した内容を踏まえて、次のような流れで作成していきます。

1. カスタム要素の雛形となるHTMLを<template>に定義する
2. 挙動を決定するプロトタイプオブジェクトを作成し、ライフサイクルコールバックを指定する
3. カスタム要素にShadow DOMを作成し、スタイルを閉じ込める
4. プロトタイプオブジェクトをdocument.registerElement()に指定し、カスタム要素を定義する

<template id='template-carousel-panel'></template>

<script>
  // 現在実行中のスクリプト要素を取得する
  var currentScript = document.currentScript;
  var ownerDocument = currentScript.ownerDocument;
  var CarouselPanelPrototype = Object.create(HTMLElement.prototype);

  // <carousel-panel>要素が生成された時のコールバック
  CarouselPanelPrototype.createdCallback = function () {
    var template = currentScript.ownerDocument.querySelector('#template-carousel-panel');
    var clone = document.importNode(template.content, true);

    this.shadowRoot = this.createShadowRoot();
    this.shadowRoot.appendChild(clone);
  };

  // <carousel-panel>要素がHTMLに追加された時のコールバック
  CarouselPanelPrototype.attachedCallback = function () {};

  // <carousel-panel>要素の定義
  window.CarouselPanel = document.registerElement('carousel-panel', {
    prototype: CarouselPanelPrototype
  });
</script>

これで<carousel-panel>要素の定義と、処理を追加していく雛形の作成が完了しました。

カルーセル要素へ挿入したコンテンツを利用する（Shadow DOMへのコンテンツ挿入）

<carousel-panel>内に<img>を配置するという仕様にしました。しかし、Shadow Rootが生成されると、ブラウザに表示されるのはShadow Rootに追加された内容になります。

このようにカスタム要素で挟まれた要素（この場合は<img>）をShadow DOM内で参照するには<content>を使います。<content>を使ってShadow DOM内に挿入ポイントを設けることで、Shadow Hostのコンテンツを参照することが可能になります。

Shadow Rootに追加するHTMLの雛形となるテンプレートを以下のように変更します。

<template id='template-carousel-panel'>
  <div id='container' class='carousel'>
    <div id='wrap' class='carousel-wrap'>
      <content></content>
    </div>
  </div>
</template>

すると以下のように、HTMLのツリー構造に変化はありませんが、Shadow Root配下にある<content>に<img>があるように振る舞います。

<content>による挿入ポイントを複数定義し、参照をコントロールする手段も存在します。これらのShadow DOMのさらなるコンセプトについては、HTML5RocksのShadow DOM 301 – 上級者向けコンセプトと DOM APIという記事を参照してください。

カルーセル要素のスタイリング（Shadow DOMへ追加したコンテンツのスタイリング）

次に、カルーセルギャラリーを実現するために<carousel-panel>に配置される<img>や、内部でラッパーの役割を果たしている<div id=’container’ class=’carousel’>や<div id=’wrap’ class=’carousel-wrap’>にCSSを適用します。

Shadow DOM内のHTMLを装飾する場合、Shadow DOMに<style>要素を追加することで、CSSの影響範囲はShadow Root配下のHTMLに限定されます。

しかし、カスタム要素の外からShadow DOMを装飾したいケースも往々にしてあることでしょう。そのために、カスタム要素の外からカスタム要素内のHTML（つまりShadow DOM）にアクセスしたり、前述の<content>によって参照されるHTMLにアクセスするためのCSSセレクタがあります。

Shadow DOMに関連するCSSセレクタ

今回はカスタム要素である<carousel-panel>と、<content>によって参照する要素の選択するCSSセレクタを使います。

• :host Shadow Treeをホストしている要素（つまり、カスタム要素）を指すセレクタ
• ::content <content>による挿入ポイントをShadow DOM内部から参照するセレクタ

:host {background: red;}というルールをShadow DOM内の<style>に追加すると、<carousel-panel>の背景色が赤になります。また、:host()のようにホスト要素に特定のクラスが付与されているケースだけに限定することも可能です。:host(.red) {background: red;}というルールを定義すると、<carousel-panel class=’red’>の場合のみ、背景色が赤になります。

また、<content>によって参照する要素は、Shadow Root配下に存在しません。そのため、Shadow DOM内部から参照するために::contentという擬似要素が用意されています。

今回はこの:hostで<carousel-panel>そのものと配下の.carouselと.carousel-wrapを、::contentで<carousel-panel>のコンテンツとなる<img>を、それぞれスタイリングしています。

<template id='template-carousel-panel'>
  <style>
    :host {
      display: inline-block;
    }
    :host .carousel {
      overflow: hidden;
      visibility: hidden;
      position: relative;
    }
    :host .carousel-wrap {
      overflow: hidden;
      position: relative;
    }
    ::content img {
      float: left;
      position: relative;
    }
  </style>
  <div id='container' class='carousel'>
    <div id='wrap' class='carousel-wrap'>
      <content></content>
    </div>
  </div>
</template>

他にも、今回は使いませんが、Shadow DOMに関連するCSSセレクタは次のものがあります。

• :host-context() ホスト要素の祖先にあたる要素を選択する
• ::shadow Shadow DOMの外部からShadow DOMを参照する擬似要素
• /deep/ Shadow DOMが形成するスコープを貫通するコンビネータ

これらのShadow DOMに関するCSSセレクタについての詳細は、HTML5RocksのShadow DOM 201 – CSS とスタイリングが参考になるでしょう。

Shadow DOM配下の<link>要素は無効になる

Shadow DOM配下のHTMLにCSSを適用するために<style>を記述してきましたが、以下のように<link rel=’stylesheet’>ではダメなのかという疑問を抱いた人もいるかと思います。

<template>
  <link rel='stylesheet' href='carousel-panel.css'>
  <div id='container' class='carousel'>
    <div id='wrap' class='carousel-wrap'>
      <content></content>
    </div>
  </div>
</template>

結論から言えば、Shadow DOM配下の<link>要素は無効です。<link>の他にも、<base>要素がShadow DOM配下では不活性でなければならないと、仕様で定められています。これについての詳細は7.1 Inert HTML Elements – Shadow DOMを見てください。

そのため、Shadow DOM配下のHTMLをスタイリングするためには、Shadow DOMに<style>要素を記述するか、Shadow DOMの外から前述の::shadow等のセレクタを使う必要があります。

カルーセル要素のJavaScriptによる挙動の追加（ライフサイクルコールバックの利用）

attachedCallback

カルーセルを実装するには、touchstart・touchmove・touchendを使ったスワイプアクションのハンドリングや、スワイプ領域を確保するための画像サイズを計算、現在何枚目の画像を表示しているか等を記憶する必要があります。

このように、カスタム要素へのイベントを定義することの負荷であったり、このケースの画像のサイズの計算のようにHTMLに挿入されるまで不確定な情報の取得、タイマーの実行のようなグローバルのリソースを必要とする処理等は、createdCallback中で行うのではなく、HTMLに追加されたタイミングで実行されるattachedCallbackで行う方が適切と言えます。

今回のカルーセルの実装では、画像のスワイプ時の実装等をこのattachedCallback内で実装しました。Web Components特有の実装というものはなく、DOMのAPIを使った実装が続くので、記事での解説は割愛します。なお、最後にも紹介しますが今回の<carousel-panel autoslide>はGitHubにて全てのソースコードが公開されています。attachedCallbackの実装はこちらです。

detachedCallback

windowやdocumentのようなグローバルオブジェクトのイベントを監視したり、setIntervalのようなタイマーを実行するような場合は、detachedCallbackでそれらを解放するのが望ましいでしょう。必要なくなりカスタム要素が削除されても、イベントハンドラが残り続け、ブラウザに負荷を及ぼしてしまうといったような可能性があります。

attributeChangedCallback

<script>要素のsrc属性のように、値が更新されると要素の振る舞いは即座に変わります。カスタム要素の属性値の変更を検知して、振る舞いをコントロールしたい場合は、attributeChangedCallbackを利用します。

今回の<carousel-panel>には利用していませんが、例えば<carousel-panel autoslide>のように、「autoslideがある場合は自動で画像送りをする」という仕様だとすると、autoslideが追加された場合は自動で画像送りを開始し、削除された場合はそれを止めるという処理を実装しなければなりません。

attributeChangedCallbackに指定するコールバック関数はattributeName（変更された属性）, oldValue（変更前の値）, newValue（変更後の値）を引数に取るので、様々な利用ケースに対応することができるでしょう。

カルーセル要素の完成（デモとソースコード）

ここまでの解説を踏まえて、後は実際にJavaScriptでスワイプ時の動作などをコールバックを利用して定義するだけです。実際に作成した<carousel-panel>はこちらです。JavaScriptのコードは少し長いので、GitHubのリポジトリから確認していただきたいと思います。

• 1000ch/carousel-panel – GitHub
• デモページ

本記事では実装していなかったスワイプ時の処理等が、attachedCallback内で追加されています。

また以下のサイトでは、リッチなUIをひとつのタグで利用できるようにしたものから、ブラウザAPIをHTMLから宣言的に利用可能にするものまで、実に様々なアイデアがWeb Componentsとして公開されています。コンポーネント化のアイデアに詰まったときには眺めてみるのもよいでしょう。

• Custom Elements – a web components gallery for modern web apps
• Component Kitchen – The best ingredients for your web apps

まとめ

今回はひとつの機能を実際にWeb Components化する例を解説しました。Web Componentsによってコンポーネント化をする手段は提供されましたが、コンポーネント化のアイデアや方法論については、引き続き開発者の間で議論がされていくことと思います。

次回は、Web Componentsをより柔軟に、そして強力に利用出来るようにするPolymerというライブラリについて紹介します。

我々Web開発者がWeb Componentsという言葉を耳にしてから、もう2年程経ったでしょうか。Web Componentsが変えるWeb開発の未来という記事に、「今のWeb開発がどのような課題を抱えているか、それをWeb Componentsがどう解決するか」を書きました。これを踏まえて、本連載ではWeb Componentsの仕様から実装、PolymerやX-TagといったWeb Componentsを支えるライブラリなどの周辺知識まで解説していきます。

Web Componentsを支える4つの仕様

連載第1回目となる本記事では、Web Componentsを支える4つの仕様について解説します。Web Componentsは以下の4つの独立した仕様から構成されます。

• Custom Elements – 独自のカスタム要素をユーザーが定義することを可能にする
• Shadow DOM – Shadow DOMという起点になる要素を提供し、HTMLにスコープを形成する
• Templates – HTMLのテンプレート機能をブラウザネイティブに利用可能にする
• HTML Imports – 断片化したHTMLファイルをロードする

つまり、Web Componentsはそれがひとつの仕様というわけではなく、これらの各機能を組み合わせてHTMLをコンポーネント化する技術のことを指します。よって、各仕様は独立した機能なので、ブラウザが実装していれば単独で利用することも可能です。今回はこれらの仕様について、順に解説していきます。また、記事中で実際のコードを取り扱っていますが、これらを実際に試す場合は、各機能の実装が進んでいるGoogle Chromeで行うことをオススメします。

Custom Elements

Custom Elementsは、ブラウザに新たな要素を定義する仕様です。CSSでのスタイリングやJavaScriptで付与するインタラクションといった特徴をまとめたカスタム要素として登録し、新たなネイティブ要素として利用可能にします。

カスタム要素を定義する

カスタム要素を新しく定義するにはdocument.registerElementというDOMのAPIを使います。document.registerElementの第1引数に文字列でカスタム要素名を指定し、第2引数の指定でカスタム要素の挙動が決定されます。ネイティブで定義されているタグとの区別のために、カスタム要素名にはハイフンを含める必要があります。

// <sample-element>を定義する
document.registerElement('sample-element');

これでsample-elementという、カスタム要素を使うことができるようになりました。

カスタム要素の挙動を設定する

先程定義したsample-elementは、何の機能も持たない要素です。このsample-elementの挙動をカスタマイズするには、 document.registerElementの第2引数のprototype属性に指定します。

// <sample-element>のプロトタイプ
var SampleElementPrototype = Object.create(HTMLElement.prototype);

// <sample-element>を定義する
document.registerElement('sample-element', {
  prototype: SampleElementPrototype
});

このように、HTMLElementを継承したSampleElementPrototypeオブジェクトを生成し、prototype属性に指定します。 HTMLElementを継承することで、HTMLとして基本的な振る舞いをするようになります。挙動を更に細かく制御するために、 SampleElementPrototypeには、ライフサイクルコールバックを指定することが可能です。ライフサイクルコールバックには以下の4つがあります。

これらのライフサイクルコールバックを必要に応じて利用します。

カスタム要素を利用する

document.registerElement('sample-element')を実行したあとは、定義したカスタム要素を実際に利用することが可能です。HTML上にsample-elementタグを書くことでも利用可能ですし、以下のようにJavaScriptから生成することもできます。

// <sample-element>を生成する
var sampleElement = document.createElement('sample-element');

// 生成した<sample-element>をbodyに追加する
document.body.appendChild(sampleElement);

また、document.registerElement()は定義したカスタム要素のコンストラクタ関数を返すので、それをnewと共に実行することでも生成可能です。

// document.registerElementの返り値を変数に保持する
var SampleElement = document.registerElement('sample-element', {
  prototype: SampleElementPrototype
});

// <sample-element>を生成する
var sampleElement = new SampleElement();

// 生成した<sample-element>をbodyに追加する
document.body.appendChild(sampleElement);

既存の要素を拡張する

カスタム要素の作成にはprototypeを利用して挙動をゼロから指定するほか、extendsに拡張したい要素名を指定し、その要素の拡張機能を作成するという方法があります。

// <button>を拡張するextended-buttonを定義する。
document.registerElement('extended-button', {
  prototype: ExtendedButtonPrototype,
  extends: 'button'
});

extendsを使って作成された要素を利用する場合は、is='extended-button'のようにextendsで指定した要素のis属性に指定します。

<button is='extended-button'>This is button</button>

extendsを使って作成された要素は、元々の要素の見た目や内部の特徴を持ちつつも、is='〜'で指定されたカスタム要素の特徴を持ちます。この場合、button要素にextended-buttonで定義した処理が付与されることになります。

また、extends属性にはカスタム要素を指定することはできません。prototypeに指定するオブジェクトに継承させましょう。

// <sample-element>のプロトタイプ
var SampleElementPrototype = Object.create(HTMLElement.prototype);

// <sample-element>を定義する
document.registerElement('sample-element', {
  prototype: SampleElementPrototype
});

// これはNG。カスタム要素をextendsすることはできない
// 継承したい場合はSampleElementPrototypeを利用する
document.registerElement('extended-again-element', {
  prototype: Object.create(HTMLElement.prototype),
  extends: 'sample-element'
});

Shadow DOM

Shadow DOMはHTMLの世界にスコープの概念をもたらします。HTMLとCSS、そしてJavaScriptを組み合わせて作ったUIコンポーネントの再利用を考えた時に必ず障壁となるのがスコープがないという問題でした。（正確に言えば、iframeだけはスコープを形成しますが、セキュリティが強く柔軟性に欠け、コンポーネント化という目的は果たせません）

例えばボタンのコンポーネントを作るために.buttonというクラスを定義しても、このCSSを別の場所で利用しようとした際に同名のクラスが定義されていると、どちらか一方が上書きされてしまいます。こうした問題に対しては命名規則の工夫等、様々なアプローチがされてきましたが、いずれもカスケーディングを完全に回避できる保証はありません。

これを根本的に解決してくれるのがShadow DOMです。

Shadow DOMの仕組み

Shadow DOMによって、要素は新たにShadow Rootという新たなノードを持つことができるようになります。このShadow Rootを持つ要素はShadow Hostと呼ばれ、スコープの起点となります。Shadow Rootにぶら下がるDOMツリーには外部からアクセスすることができず、内部の処理が外部に漏れることもありません。

つまり、 カスタム要素の振る舞いをShadow DOMに閉じ込めることで、既存のスタイルやJavaScriptに影響されずに扱う ことができます。

実は、Chromeでは既にネイティブのHTMLの要素に、Shadow DOMが使われています。代表的なのがvideo要素です。video要素のShadow DOMを確認するには、DevToolsのSettingsの「Show user agent shadow DOM」をチェックする必要があります。

DevToolsでvideo要素を見てみると、videoの下に #shadow-root があり、その下にdiv要素やinput要素がぶら下がっているのが確認できます。divやinputにフォーカスしてみると、それらが再生ボタン等のUIコントロール部分を構成しているのがわかると思います。このShadow Hostはvideo要素ということになります。

• HTML5 Video Events and API

video要素の他にも、textareaやinput等でネイティブで使われているShadow DOMを確認することが可能です。

Shadow Rootの生成

では実際にShadow DOMを利用していきます。Shadow Rootを生成するにはcreateShadowRoot()というDOMのAPIを使います。 createShadowRootはHTMLElementをインターフェースとするどの要素からも実行することが可能です。ここでは先程のsample-element要素内で使います。

// <sample-element>のプロトタイプ
var SampleElementPrototype = Object.create(HTMLElement.prototype);

SampleElementPrototype.createdCallback = function () {

  // <sample-element>にShadow Rootを生成する
  var shadowRoot = this.createShadowRoot();

  // <style>を生成する
  var style = document.createElement('style');
  var styleString = '';
  styleString += 'button {background: #000; color: #fff; font-size: 24px;}';
  styleString += 'input {font-size: 24px; background: #cfc;}';
  style.innerHTML = styleString;

  // <input type='button'>と<button>を生成する
  var input = document.createElement('input');
  input.setAttribute('type', 'text');
  var button = document.createElement('button');
  button.textContent = 'This is button.';

  // 生成した<style>と<input type='button'>と<button>をShadow Rootに追加する
  shadowRoot.appendChild(style);
  shadowRoot.appendChild(input);
  shadowRoot.appendChild(button);
};

// <sample-element>を定義する
document.registerElement('sample-element', {
  prototype: SampleElementPrototype
});

作成したShadow Rootに対し、style・input・buttonの各要素を追加しました。Shadow Rootに要素が追加されるとShadow Hostの要素は表示されなくなり、代わりにShadow Rootの内容が表示されるようになります。

• Sample Element – jsdo.it

こちらは実際に動くサンプルです。

style要素内にはbutton要素を装飾するCSSを記述していますが、Shadow Root配下にあるので外部に漏れることはありません。また、グローバルな領域にbuttonの装飾をするCSSがありますが、sample-element内のbuttonに対しては影響していないことが確認できます。

このように、Shadow DOMはHTMLにスコープを提供します。Web Componentsに関連する機能の中でも、最も重要と言える機能かもしれません。

Templates

TemplatesはHTMLをひな形として扱うための仕様です。今までHTMLをひな形として扱いたい場合にはscript要素を使った方法等がありましたが、これらはあくまでハック的なアイデアに過ぎませんでした。Templatesではtemplateというタグで括ることで、ブラウザはその中のHTMLを不活性なHTML要素として認識します。不活性な要素は描画されることはなく、document.querySelector()等でアクセスすることもできません。

HTMLの生成はもちろんDOMのAPIでも可能ですが、HTML生成がJavaScript内で行われていると構造がわかりにくいですし、メンテナンスの観点からもHTML上にテンプレートが配置されているほうが望ましいです。

template要素を利用する

先程の、Shadow Rootに追加しているHTMLをtemplateを使って書きなおしていきます。Shadow Rootに追加しているHTMLをそのままtemplate内に記述するだけです。このtemplate要素にはIDを付与しておきます。

<template id='sample-element-template'>
  <style>
    button {
      background: #000;
      color: #fff;
      font-size: 24px;
    }
    input {
      font-size: 24px;
      background: #cfc;
    }
  </style>
  <input type='text'>
  <button>Button</button>
</template>

先程行っていた、 DOMのAPIでHTMLを生成しShadow Rootに追加する という処理を、 テンプレートをコピーしてShadow Rootに追加する という処理に置き換えます。

// <sample-element>のプロトタイプ
var SampleElementPrototype = Object.create(HTMLElement.prototype);

SampleElementPrototype.createdCallback = function () {

  // <sample-element>にShadow Rootを生成する
  var shadowRoot = this.createShadowRoot();

  // <template>を取得する
  var template = document.querySelector('#sample-element-template');
    
  // <template>の中の要素をコピーする
  var clone = document.importNode(template.content, true);

  // 生成した<style>と<input type='button'>と<button>をShadow Rootに追加する
  shadowRoot.appendChild(clone);
};

// <sample-element>を定義する
document.registerElement('sample-element', {
  prototype: SampleElementPrototype
});

追加したい要素の構造がHTML側に整理されたことで、ぐっと見通しが良くなりました。

• Sample Element with Templates – jsdo.it

HTML Imports

Custom Elements、Shadow DOM、Templatesを使ってsample-elementを作成してきました。ここまでの処理をHTMLファイルにまとめて、そのHTMLをロードすることでsample-elementが利用可能になります。

JavaScriptファイルや画像といったサブリソースをロードするにはscriptやimg要素を使った方法がありましたが、HTMLに関してはネイティブは存在していませんでした。XMLHttpRequestを使ってロードする方法もありますが、HTMLのロードに必ずJavaScriptを利用するのもやや大袈裟と言えます。この最も基本的とも言える 外部のHTMLをロードする という機能を実現するのがHTML Importsです。

HTML Importsを利用する

外部のHTMLファイルをロードするには、以下のようにlink要素を使ってロードします。

<link rel='import' href='sample-element.html'>

断片化されたHTMLファイルはこのようにlink要素をつかってロードすることが可能で、読み込まれたファイルは読み込み先のHTMLに引き継がれます。ここでは、Custom Elements、Shadow DOM、Templatesを使って構築してきたsample-elementを外部ファイル化します。

<template id='sample-element-template'>
  <style>
    button {
      background: #000;
      color: #fff;
      font-size: 24px;
    }
    input {
      font-size: 24px;
      background: #cfc;
    }
  </style>
  <input type='text'>
  <button>Button</button>
</template>

<script>
  // <sample-element>のプロトタイプ
  var SampleElementPrototype = Object.create(HTMLElement.prototype);

  SampleElementPrototype.createdCallback = function () {

    // <sample-element>にShadow Rootを生成する
    var shadowRoot = this.createShadowRoot();

    // <template>を取得する
    var template = document.querySelector('#sample-element-template');
    
    // <template>の中の要素をコピーする
    var clone = document.importNode(template.content, true);

    // 生成した<style>と<input type='button'>と<button>をShadow Rootに追加する
    shadowRoot.appendChild(clone);
  };

  // <sample-element>を定義する
  document.registerElement('sample-element', {
    prototype: SampleElementPrototype
  });
</script>

テンプレートとなるHTMLから、実際にsample-elementを定義するスクリプト処理までをまとめてsample-element.htmlとしました。 このように単一のHTMLファイルに集約することでコンポーネントの責任の在処も明確にすることが可能です。 外部ファイル化したsample-element.htmlをロードする最も単純な例は以下のようになるでしょう。以下をindex.htmlとします。

<html>
  <head>
    <link rel="import" href="sample-element.html">
  </head>
  <body>
    <sample-element></sample-element>
  </body>
</html>

しかし、このsample-element.htmlをいざインポートしようとすると、エラーが発生します。具体的にはdocument.querySelector('#sample-element-template');で要素が存在しないためにnullを返すためです。

インポート時のdocumentの扱いに注意する

HTMLの評価はindex.html側で行われるため、querySelectorの実行者であるdocumentはロード先のindex.htmlになります。そうするとsample-element.htmlに配置してある#sample-element-templateはindex.htmlにないので、要素が見つからないという結果になってしまいます。

そのため、querySelectorの実行者をsample-element.htmlのdocumentにする必要がありますが、これにはdocument.currentScriptという属性を利用します。document.currentScriptでは実行中のスクリプトノードを返します。ノードからはownerDocumentを使って親となるドキュメントを参照することができるので、これらを組み合わせてquerySelectorの実行者がsample-element.htmlのドキュメントになるようにします。

• document.currentScript – HTML Standard
• Node.ownerDocument – Document Object Model Core

<script>
  // 実行中のスクリプトを参照する
  var currentScript = document.currentScript;

  // <sample-element>のプロトタイプ
  var SampleElementPrototype = Object.create(HTMLElement.prototype);

  SampleElementPrototype.createdCallback = function () {

    // <sample-element>にShadow Rootを生成する
    var shadowRoot = this.createShadowRoot();

    // <template>を取得する
    var template = currentScript.ownerDocument.querySelector('#sample-element-template');
    
    // <template>の中の要素をコピーする
    var clone = document.importNode(template.content, true);

    // 生成した<style>と<input type='button'>と<button>をShadow Rootに追加する
    shadowRoot.appendChild(clone);
  };

  // <sample-element>を定義する
  document.registerElement('sample-element', {
    prototype: SampleElementPrototype
  });
</script>

querySelectorの実行者がsample-element.htmlのdocumentになったことで正常に動くようになります。その直後のdocument.importNodeやdocument.registerElementはそのままにしてあることにも注目してください。ノードのコピーや、カスタム要素の登録はインポート先のドキュメントで行うのが適切と言えるでしょう。これで晴れてsample-element.htmlのインポートが正常にできるようになりました。

• Sample Element with HTML Imports – jsdo.it

まとめ

Custom Elements、Shadow DOM、Templates、HTML Importsの4つの仕様の基本的な使い方について解説しました。簡単におさらいすると、以下のようになります。

1. Custom Elementsでカスタム要素を新たに定義し、基本的な挙動を指定する。
2. カスタム要素に指定するCSSやJavaScriptの効力はShadow DOMに閉じ込める。
3. テンプレートとして扱うHTMLをtemplateタグに宣言する。
4. カスタム要素を定義する一連の処理を記述したHTMLを、HTML Importsで読み込む。

再利用可能なコンポーネント化を実現するために、それぞれがどういった役割を果たしているかを理解することはもちろん重要ですが、それらはあくまで独立した仕様であり、単一の機能として利用できることも認識しておきましょう。

次回は、より実践的なコンポーネント作成を解説する予定です。