Polymer（ポリマー）は、polymer Web Componentsを使用してウェブアプリケーションを作成するためのオープンソースのJavaScriptライブラリである。ライブラリは、Googleの開発者とコントリビューターたちによって、GitHub上で開発が行われている。また、GoogleのMaterial Designを利用したモダンなデザイン原則が、独立したプロジェクトとして実装されている。
Polymerは、Googleの多数のサービスとウェブサイトで利用されている。Polymerを利用しているものとしては、新デザインのYouTube、YouTube Gaming、新デザインの[8]Google Earth、Google I/Oのウェブサイト、Google Play Music、新デザインのGoogleサイト、ウェブ版のAlloが挙げられる[9]。
その他の有名なユーザーには、Netflix、Electronics Arts、ING、Coca-Cola、McDonald's、BBVA、IBM、General Electricがいる。
歴史
Polymerのパブリックな開発は、2013年11月14日のPromises Polyfillのリリースとともに始まった。その後、Polymerの開発は、Material Designを元にしたビジュアルスタイルガイドラインをカバーするウェブデザインライブラリ、データバインディングの機能、そして、"Core"と"Paper"と呼ばれるWebコンポーネントライブラリへと少しずつ成長していった。
Coreコンポーネントは、もともと多数のウェブサイトに必要とされる汎用的な機能を包括することを意図して作られたものであった。一方、Paperコンポーネントは、よりMaterial Designのコンセプトに特化したコンポーネントを提供するために作られた。主要なマイルストーンがバージョン0.5のリリースで達成されたため、このバージョンが、アーリーアダプターのユーザーがプロジェクトに利用可能な最初のバージョンであるとされた[10]。
Googleは、バージョン0.5以降もPolymerの設計の改良を継続的に行い、特に、多くの開発者が指摘したパフォーマンスの問題を改善していった。2015年のPolymer1.0のリリースにより、問題の多くが解決され、このバージョンをもって、ライブラリ最初の「production ready」なバージョンであるとされた[11]。 バージョン1.0では、Polymerのパフォーマンスは大幅に向上し、ロードタイムは最大7倍高速化した[12]。また、バージョン1.0からは、GoogleはPolymerプロジェクトの要素を明確に分かれた2つのコンポーネントに分離し、エレメントカタログとWebコンポーネントの糖衣化を行う（webcomponents-sugaring）ライブラリに分けた。
2015年9月14-15日、GoogleはアムステルダムでPolymer Summitを開催した。
2016年10月17-18日、GoogleはロンドンでPolymer Summitを開催した。
2017年8月22-23日、GoogleはコペンハーゲンでPolymer Summitを開催した。
2018年5月2日、Polymerチームは、今後、Polymerの双方向バインディングとテンプレートシステムの開発は終了し、LitElement[13]（もともとPolymerに含まれている[14]）および1方向バインディングのみにフォーカスしてゆくことになる、という方針を発表した[15]。
機能
Polymerは、バニラなWebコンポーネントに対して、数多くの機能を提供している。
- カスタムエレメントを簡単な方法で作成する機能
- 1方向及び双方向のデータバインディングの機能
- 計算済み（computed）プロパティ
- 条件付きあるいは繰り返しテンプレート
- ジェスチャーイベント
用途
Polymerは、構造的な設計プロセスに特別な注意が払われており、相互運用性が高い「レゴブロック」構造として活用することができるため、市場で大きな注目を集めつつある[16][いつ?]。
カスタムエレメント
カスタムエレメントは、ESモジュールとクラスを使用して作成することができる。カスタムエレメントの定義には、CSSスタイル、HTMLテンプレートエレメントの内部にローカルに展開されるDOM、エレメントのプロパティ、ライフサイクル・コールバック、そして、JavaScriptのメソッドが含まれる。
import {PolymerElement, html} from '@polymer/polymer/polymer-element.js'
class HelloElement extends PolymerElement {
static get template() { return html`
<style>
/* Local DOM CSS style */
</style>
<!-- Local DOM -->
Hello {{name}}!
`; }
static get is() { return 'hello-element'; }
static get properties() {
return {
name: {
type: String
}
/* Element properties */
}
}
/* Custom methods */
}
window.customElements.define(HelloElement.is, HelloElement);
上記のように定義したエレメントは、HTMLコード内で次のように使用することができる。
<hello-element name="World"></hello-element>
関連項目
参考文献
外部リンク
