【Polymer 1.0】Polymer入門

目次

今後この目次に徐々にPolymerの使い方に関するコンテンツを追加していく予定です。

デベロッパーガイド

• Polymerとは？
• インストールしてPolymerをはじめよう
• クイックツアー
• カスタムエレメントの登録とライフサイクル
• 宣言型プロパティ(Declared properties)
• DOMの基本とAPI
• スタイリング
• イベント
• データバインディング
• テンプレートエレメント
• Behaviors

Polymer記事一覧

• フレキシブルレイアウト
• Polymer Starter Kit
  • プロジェクトを作成してみよう
  • BrowsersyncでWEBサーバー環境を整える
  • ベンダープレフィックスを意識せずに開発するための環境を整える
  • Sassの環境を整える
  • 画像ファイルの圧縮を自動化する
  • プロジェクトのビルドを行う (開発環境構築まとめ)
• Polymer + TypeScript
  • PolymerTSを使ってみる

Polymerとは？

Polymerは、開発者が再利用可能で使いやすいWebベースのコンポーネントを、簡単に素早く作成するためのライブラリです。

カスタムエレメントはWebを拡張する

HTMLはビルトインで<button>、<form>、<table>のようなエレメントを提供します。それぞれのエレメントは自身のAPIとして、プロパティ、メソッド、イベントを持ちます。またそれぞれのエレメントはスタイルプロパティを持ち、ユーザーはCSSでこれらをオーバーライドできます。

ユーザーは自身のWebページでこれらのエレメントを簡単に使用できますが、現在の複雑なWebコンテンツの作成において、これらのエレメントを組み合わせるだけでは限界が見えてきました。例えば、タブでページを切り替えるようなWebページで構築するには、HTMLに加えてCSSとスクリプトを複雑に組み合わせて作成しなければならないことが想像できるでしょう。

カスタムエレメントは、HTMLのボキャブラリを自身が作成するエレメントに対して拡張することができます。拡張されたエレメントは目的に合った優れたUIとAPIを持ち、簡単に利用することができます。先ほどの例にでたタブをカスタムエレメントで実装したと仮定し、それをコードで表すと次のようにスッキリと記述することができます:

<my-tabstrip>
  <my-tab>
    ホーム
  </my-tab>
  <my-tab>
    サービス
  </my-tab>
  <my-tab>
    コントタクト
  </my-tab>
<my-tabstrip>

PolymerはWeb Componentsなの？それともエレメントなの？

PolymerはWeb Componentsかエレメントかというように、どちらか一方に決められるものではありません。PolymerはWeb Componentsの上に構築され、新しいカスタムエレメントを作成することを支援します。

• Web Components: Web Componentsは新しいコンポーネントを作成するのに必要なプリミティブ(基本的)な機能を提供します。このプリミティブな機能を利用して、新しいカスタムエレメントを作成することができます

• Polymerライブラリ: Polymerライブラリはカスタムエレメントをよりシンプルに定義できるシンタックスを提供します。また、ライブラリにはテンプレート、two-wayデータバインディング、プロパティ監視などの機能があり、これらによって再利用可能なカスタムエレメントの作成を強力にサポートし、さらにコーディング量も減らしてくれるでしょう。

• カスタムエレメント: もしカスタムエレメントを作成しない場合でも、Polymerで構築された様々なエレメントを、今あなたがもつWebページで使用することができます。これらのエレメントはPolymerに依存してはいますが、Polymerライブラリを利用せずとも直接それらのエレメントを使用することができます。

本文章はPolymer Authorsによる｢What is Polymer?｣を翻訳・改変したものです。原作品のライセンスはCC BY 3.0です。