初めに

最近WebアプリのUIのコンポーネント化をよく聞きます。
調べてみるとWeb ComponentsとPolymerという単語がHOTワードなそうで。
この2つについて、何回かに分けて解説から導入、実装まで書いていきたいと思います。

今回は解説編です。

Web Components

Web CoponentsとはWebアプリ、サイトを部品を組み合わせたり再利用することで簡単に効率よく構築する考え方です。

例えば消費税を計算する処理を下記のように考えたとします。

sum = x * 1.08;

この消費税の計算処理をいろんな箇所で使うとき、それぞれの場所でこの計算式を書くのではなく、基本的にはメソッドにして、消費税計算メソッドを使うときに呼ぶようになると思います。

このメソッドは部品とみなすことができ、一度作った部品(メソッド)は再利用することができます。
また、部品(メソッド)をいくつも作り、組み合わせることは今までしてきたことがあると思うので馴染みがあると思います。
この考え方をWebサイトの構築でも利用するのがWeb Componentsです。

例えばボタンを作成するときは下記のようなHTMLとCSSを記述します。

<a href=”index.html” class=”hoge-button”>
    hoge-button
</a>

.hoge-button {
    display: inline-block;
    width: 260px;
    padding: 20px;
    border-radius: 4px;
    background-color: #afa58d;
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px;
}

このボタンを他の箇所で利用したい場合、このHTMLとCSSをコピペする必要がありますが、これでは、ボタンの修正をしたい場合、コピペした箇所全てを修正することになります。

また、cssが他の箇所に影響する恐れもあります。

そこでHTMLとCSSを部品とみなして再利用する仕組みをWeb Componentsは提供します。
上記の様はボタンは下記のように独自タグを一つ記述するだけになります。

<hoge-button></hoge-button>

このようにWeb Componentsはコンポーネント化を提供します。
このコンポーネント化は下記の4つの技術の組み合わせによって実現されています。

Custom Elements → 要素をユーザーが独自に定義することができる
Shadow DOM → HTMLやCSSに隠されたスコープを形成し、外部から隠す
Templates → 独自の要素内にHTML、CSSを記述する
HTML Imports → 作成したHTMLファイルを取り込む

なんと便利なんだ！と自分は感動していましたが、この独自タグを作成するのは結構めんどくさかったりします。
しかし、めんどくさいことは誰かが楽にしてくれるのが世の常で、ここでPolymerが登場します。

Polymer

PolymerとはWeb Componentsをより強力に、簡単に扱うJavaScriptのライブラリです。

上記のhoge-buttonタグは下記のように書くことで、実装できます。

<dom-module id="hoge-button">
    <style>
    :host a {
        display: inline-block;
        width: 260px;
        padding: 20px;
        border-radius: 4px;
        background-color: #afa58d;
        color: #fff;
        text-decoration: none;
        letter-spacing: 1px;
    }
    </style>
    <template>
        <a href=”javascript:(0)”>
            hoge
        </a>
    </template>
</dom-module>
<script>
Polymer({
    is: 'hoge-button',
});
</script>

dom-muduleとPolymerメソッドのisに独自タグ名を記載します。
:hostと書くことで、独自タグに対してcssを記述することができます。
実際のcssは下記のようになります。
このように独自タグでcssを記載することで他に影響を及ぼさないようにできます。

hoge-button a {
    display: inline-block;
    width: 260px;
    padding: 20px;
    border-radius: 4px;
    background-color: #afa58d;
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px;
}

この作成した部品は内部で完結するので再利用、配布などができます。
特にGoogleが力を入れており、いろんな部品を公開しています。
マテリアルデザインのボタンから、GoogleMapなどが提供されており、
基本的にタグを記述することで簡単に利用することができます。

Polymer Catalog

終わりに

今回は解説編ということで簡単にWeb ComponentsとPolymerについて解説しました。
次回は導入して実際に利用していきたいと思います。