Polymer 2.0 公式サイトのクイックツアーの邦訳です。
読みやすいように意訳したり、説明不足と思われる箇所に説明を補足しています。なお、Polymer 1.0以前のコードで利用経験がおありの方は、About Polymer 2.0やPolymer 2.0 upgrade guideを併せて参照してください。主な変更点が簡潔に解説されています。また、Webコンポーネントの概要は、Web Componentsとは何か？を参照してください。
Polymerを使えば、宣言的記述によりWebコンポーネントを簡単に作成することができます。
カスタム要素は、Polymerの提供する以下のような機能を利用でき、シンプルな記述によって複雑でインタラクティブな性質を持ったカスタム要素を容易に構築することができます。：
- カスタム要素の登録
- ライフサイクルコールバック
- プロパティの監視
- Shadow DOMテンプレート
- データバインディング
このチュートリアルでは、Plunkerというブラウザベースのエディターを利用することで、何もインストールすることなくPolymerライブラリのクイックツアーを体験できるようにしています。チュートリアル内のPLUNKERのサンプルコードというリンクをクリックすれば、Plunker上のインタラクティブなサンドボックスの上でサンプルを試すことができます。
また、LEARN MORE:xxxをクリックすれば、各セクションで紹介した機能に関連するドキュメントの該当ページへ移動できます。(訳注：以下リンク先は拙訳の日本語版です。原文を参照したい方は公式ドキュメントを参照してください。)
カスタム要素を登録
新しいカスタム要素を登録するには、ES6で導入されたclass構文を使いPolymer.Elementクラスを拡張した上で、customElements.defineメソッドを呼び出しカスタム要素をブラウザに登録します。この登録によってカスタム要素名とclass名が関連付けられます。なお、カスタム要素の名前にはASCII文字を使いダッシュ(-)を含める必要があります。
このサンプルでは、ライフサイクルコールバックをして<custom-element>の初期化時にコンテンツを追加しています。初期化が完了すると、readyというコールバックが呼び出されます。readyコールバックは、カスタム要素の生成後にワンタイムの初期化を行いたい場合に利用できます。
(訳注：constructorはPolymer 1.0のcreatedに相当します。仕様の改定に併せて変更されました。)
Shadow DOMの追加
多くの要素は、独自のUIや動作を実装するために内部にDOMノードを持っています。PolymerのDOMテンプレートを使うことで、カスタム要素にShadow DOMというDOMのサブツリーを作成できます。
Shadow DOMはカスタム要素の内部にカプセル化されています。
Shadow DOMを使って要素を作成
Shadow DOMを使うことでカスタム要素を柔軟に構築できます。カスタム要素の子は割り当てられるので、Shadow DOMツリーに挿入されたかのようにレンダリングされます。
このサンプルでは、ロゴイメージをCSSでスタイリングされた<div>タグで囲うことで、シンプルなカスタムタグを作成しています。
ヒント:
<dom-module>の内部で定義されたCSSのスタイル情報は、カスタム要素のShadow DOM内にスコープされます。そのため、上記サンプルにおいて<picture-frame>内部のdivに対して適用したスタイルルールは、内部の<div>タグに対してのみ適用されます。
データバインディングを利用
もちろん予め静的にマークアップしたShadow DOMだけは十分でないと考えるでしょう。多くの場面において、Shadow DOMを動的にアップデートしたいと考えるはずです。そのような場合には、データバインディングというシステムを使いします。
データバインディングを使えば、簡潔なコードでカスタム要素内部で発生した変化をShadow DOMへ反映させることができます。{{}}という記号を使い、コンポーネント内のプロパティとバインドします。例えば{{foo}}は、カスタム要素内のプロパティfooの値によって置き換えられます。
プロパティの宣言
プロパティは、カスタム要素が外部へ公開するAPIの重要な一部です。Polymerは、宣言的なプロパティをサポートしており、以下のような一般的な機能を提供します。：
- プロパティにデフォルト値を設定
- マークアップからプロパティを設定
- プロパティの変更を監視して事前に指定した処理(observer)を実行
下記サンプルでは、一つ前に紹介したサンプルにownerプロパティの宣言を加えています。index.html内のマークアップからownerプロパティを設定しているのが分かると思います。
プロパティへのデータバインディング
Shadow DOMのテキストコンテンツだけでなく、カスタム要素のプロパティに対してもバインドすることができます。(property-name="[[binding]]"という記法を使います。)Polymerのpropertiesは、任意のオプションとして双方向バインディングもサポートしています。(property-name="{{binding}}"のように{{}}を使います。)
このサンプルでは、双方向バインディング(two-way binding)を使用しています。カスタムinput要素(iron-input)のvalueとownerプロパティがバインドされており、ユーザーがタイプするとカスタム要素のコンテンツもアップデートされます。
ヒント:
<iron-input>要素は、ネイティブの<input>要素のラッパーとして双方向のデータバインディングや入力値のバリデーション機能を提供します。
<dom-repeat>使いテンプレートを連続して描画
テンプレートリピーター(dom-repeat)は、配列とのバインドに特化したテンプレートです。配列内の各アイテムにつき一つずつテンプレート内のコンテンツをインスタンス化します。
LEARN MORE:テンプレートリピーター(dom-repeat)
次のステップ
これでPolymerの基本的なコンセプトは理解できたはずです。あとは、Polymer App ToolboxというCLIツールを使って実際にアプリケーションを作成したり、ドキュメント本文(邦訳)を参照してPolymerライブラリの機能の概要を理解していってください。