Polymer とは HTML5 で独自のタグを定義するためのライブラリです。 Web Components という仕様の上になりったっており、簡単に独自のタグを定義できるようになります。

Web Components は強力な技術ですがその分低レベルなため、扱いづらいです。そのため API をラップしたライブラリがいくつか出ています。 Polymer はその中でも一番勢いのあるものの1つです。

現在 Polymer は Developer Preview でバージョンは 0.5 です。3月に 0.8 がアルファとして公開され、1.0 の準備段階とされています。1.0 前に慣れておくために試してみます。

必要な知識

  • bower コマンドの使い方
  • Web Components のこと

インストール

Polymer は bower でインストールします。 0.8 を入れる場合はバージョンをきちんと指定してあげます。

$ bower install Polymer/polymer#^0.8.0-rc.2

要素を定義する

押した数を表示するボタンを定義してみます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>

    <count-button></count-button>

    <dom-module id="count-button">
        <template>
        <button on-click="onClick">[[count]]</button>
        </template>
    </dom-module>
    <script>
        Polymer({
            is: 'count-button',
            properties: {
                count: {
                    type: Number,
                    value: 0
                }
            },
            onClick: function() {
                this.count++;
            }
        });
    </script>

</body>
</html>

順に見ていきます。

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

これは Web Components のポリフィルです。 bower で Polymer を入れるとこれも自動でダウンロードされるはずです。

最新の Chrome ではこれがなくても動くみたいです。たいていの場合は他のブラウザもサポートするはずなので読み込んでおきましょう。

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

ここで Polymer を読み込みます。よくある JavaScript を読み込む形ではなく Web Components の HTML Imports を読み込みます。

<count-button></count-button>

これが定義された要素を使っている部分です。

<dom-module id="count-button">
    <template>
        <button on-click="onClick">[[count]]</button>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'count-button',
        properties: {
            count: {
                type: Number,
                value: 0
            }
        },
        onClick: function() {
            this.count++;
        }
    });
</script>

<dom-module> と Polymer({ ... }) が要素の定義です。

<dom-module> の id が要素の名前になります。必ずハイフンが含まれている必要があるので注意です。 Polymer({ is: 'count-button', ... }) として JavaScript 側から指定しています。

<template> がカスタム要素の中身になります。中の on-click 要素はイベントリスナの登録をしています。 [[count]] の部分は JavaScript で定義したプロパティで置き換えられます。

Polyer({ ... }) で JavaScript 側の定義をしています。 properties が文字通りプロパティを定義しています。 count はさっき <template> の中で使っていたものの定義です。 onClick は on-click に指定したものの定義です。

これをサーバを立てて開くと 0 と表示されたボタンが表示され、クリックするとその数字が増えていきます。

まとめ

  • Polymer は Web Components をラップするライブラリ
  • HTML Imports で読み込む
  • <dom-module> 要素と Polymer({ ... }) 関数でカスタム要素を定義する。