Polymer サンプルコード (1) Hello, World !

# Hello, World !

<img src="https://www.polymer-project.org/images/logos/p-logo.png" width="37" height="26"> [Polymer](https://www.polymer-project.org/) は <img src="https://qiita-image-store.s3.amazonaws.com/0/90678/9c6269b4-00e0-456b-d208-cb306c4a16ba.png" width="34" height="31"> [マテリアルデザイン](https://material.io/)の <img src="https://web-components-resources.appspot.com/static/logo.svg" width="36" height="26"> [Webコンポーネント](https://www.webcomponents.org/)を簡潔に使えて便利です。
コンポーネント(タグ、カスタム要素)の使用方法やデータバインディング(入力との関連付け)を[Hello World](https://ja.wikipedia.org/wiki/Hello_world)で確認します。


<dl>
  <dt>動作確認</dt>
  <dd>Windows 10 : ○ Chrome60, × Firefox54 Edge40 IE11</dd>
  <dd>Mac 10.3 : ○ Chrome60 Safari10.1</dd>
  <dd>Android 7.1 : ○ Chrome60</dd>
</dl>

## 画面イメージ

![qiita-plnkr-hw1.gif](https://qiita-image-store.s3.amazonaws.com/0/90678/48588160-a048-367f-7aae-eef71533c462.gif)

[:globe_with_meridians: デモサイト (plunker)](https://plnkr.co/edit/nONo6F2b6HozcF7vFRWU)

## サンプルコード

```html:index.html
<base href="https://polygit.org/components/">

<script src="webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-dialog/paper-dialog.html">

<link rel="import" href="polymer/lib/elements/dom-bind.html">

<dom-bind>
  <template>
    
    <paper-input label="Name" value="{{name}}" always-float-label></paper-input>

    <p>Hello {{name}} !</p>

    <paper-button raised onClick="dialog.open()">OPEN</paper-button>
    
    <paper-dialog id="dialog" with-backdrop>
      <h3>Hello {{name}} !</h3>
      <p>This is Polymer Dialog.</p>
    </paper-dialog>
    
  </template>
</dom-bind>
```

## 各行の説明

```html:index.html
<base href="https://polygit.org/components/">
```

ライブラリの読み込みを簡潔にする為、`<base>`タグでエントリポイントを定義します。

> [polygit.org](https://polygit.org/) はCDN経由で気軽に試せてよいのですが、 下記のようなバージョン指定の仕方が難しいです。。。
>
> ```html
> <base href="https://polygit.org/polymer+v2.0.2/shadycss+webcomponents+1.0.3/components/">
> ```

```html:index.html
<script src="webcomponentsjs/webcomponents-loader.js"></script>
```

[Web Components](https://www.webcomponents.org/)のポリフィルを読み込みます(Chromeでは省略可)。
参考: [「Web Componentsとは何か？邦訳」](//qiita.com/jtakgiuchi/items/b1315f53b3726ff11b61)

```html:index.html
<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
```

マテリアルデザインの[Paper Elements](https://www.webcomponents.org/collection/PolymerElements/paper-elements)を使う為に[HTML Imports](https://www.html5rocks.com/ja/tutorials/webcomponents/imports/)で`<paper-input>`、`<paper-button>`、`<paper-dialog>`タグを読み込みます。

```html:index.html
<link rel="import" href="polymer/lib/elements/dom-bind.html">

<dom-bind>
 <template>
   ...
 </template>
</dom-bind>
````

[データバインディング](http://qiita.com/jtakgiuchi/items/60f877d907e3d1fd51af)を使う為に`<dom-bind>`を使用します。(自分でカスタム要素を定義する`<dom-module>`タグでは不要です)。

```html:index.html
<paper-input label="Name" value="{{name}}" always-float-label></paper-input>
```

[入力フィールド(paper-input)](https://www.webcomponents.org/element/PolymerElements/paper-input)を表示。`value="{{name}}"`で入力された値(`value`)と`{{name}}`が紐付いて連動します(バインディング)。

※ `always-flot-label`など見慣れない属性は[ドキュメント](https://www.webcomponents.org/element/PolymerElements/paper-input/elements/paper-input#property-alwaysFloatLabel)に書いてありますが、**名前付けにはキャメルケースの自動変換( always-flot-label ←→ alwaysFlotLabel )** がされているので注意です。

> ちなみに`{{name}}`に初期値を入れたい場合は
> 
> ```html
> <script>
>   document.querySelector('dom-bind').name="World"
> </script>
> ```
> 
> を足します(こちらも自分でカスタム要素を定義する場合には、プロパティを設定するのでこういう書き方はしません)

```html:index.html
<p>Hello {{name}} !</p>
```

バインディングした`{{name}}`をリアルタイムで反映させます。

```html:index.html
<paper-button raised onClick="dialog.open()">OPEN</paper-button>
```

[ボタン(paper-button)](https://www.webcomponents.org/element/PolymerElements/paper-button)を表示します。クリックすると`<paper-dialog id="dialog">`の`open()`関数を呼び出してダイアログが開きます。

```html:index.html
<paper-dialog id="dialog" with-backdrop>
  <h3>Hello {{name}} !</h3>
  <p>This is Polymer Dialog.</p>
</paper-dialog>
```

[ダイアログボックス(paper-dialog)](https://www.webcomponents.org/element/PolymerElements/paper-dialog)を定義します。`open()`で呼ばれるまでは表示されません(`<paper-dialog opened>`と書くとページ読み込み時に開きます)。

## 最後に

**:bow: コメント、編集リクエスト歓迎**
[Polymer サンプルコード (2) FizzBuzz](http://qiita.com/howking/items/ba630eb8b0e4335944ec)へ続きます。

以上