Polymer

開発元|  Google[1]とコントリビューターたち[2]
初版|  2015年5月29日 (10年前) (2015-05-29)[3]
最新版|

3.0.2, 2.5.0, 1.11.3 / 2018年5月9日 (7年前) (2018-05-09)[5], 2018年2月13日 (7年前) (2018-02-13)[6]

最新評価版|

3.0[4] / 2018年1月18日 (7年前) (2018-01-18)

リポジトリ|

* github.com/Polymer/polymer

プログラミング
言語|  JavaScript、HTML
種別|  JavaScriptライブラリ
ライセンス|  3-Clause BSD[7]
公式サイト|  www.polymer-project.org
テンプレートを表示

Polymer（ポリマー）は、polymer Web Componentsを使用してウェブアプリケーションを作成するためのオープンソースのJavaScriptライブラリである。ライブラリは、Googleの開発者とコントリビューターたちによって、GitHub上で開発が行われている。また、GoogleのMaterial Designを利用したモダンなデザイン原則が、独立したプロジェクトとして実装されている。

Polymerは、Googleの多数のサービスとウェブサイトで利用されている。Polymerを利用しているものとしては、YouTube、YouTube Gaming、新デザインのGoogle Earth[8]、Google I/Oのウェブサイト、Google Play Music、新デザインのGoogle Sites、ウェブ版の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[13]を開催した。

2016年10月17-18日、GoogleはロンドンでPolymer Summit[14]を開催した。

2017年8月22-23日、GoogleはコペンハーゲンでPolymer Summit[15]を開催した。

2018年5月2日、Polymerチームは、今後、Polymerの双方向バインディングとテンプレートシステムの開発は終了し、LitElement[16]（もともとPolymerに含まれている[17]）および1方向バインディングのみにフォーカスしてゆくことになる、という方針を発表した[18]。

## 機能

[編集]

Polymerは、バニラなWebコンポーネントに対して、数多くの機能を提供している。

* カスタムエレメントを簡単な方法で作成する機能
* 1方向及び双方向のデータバインディングの機能
* 計算済み（computed）プロパティ
* 条件付きあるいは繰り返しテンプレート
* ジェスチャーイベント

## 用途

[編集]

Polymerは、構造的な設計プロセスに特別な注意が払われており、相互運用性が高い「レゴブロック」構造として活用することができるため、市場で大きな注目を集めつつある[19][いつ?]。

## カスタムエレメント

[編集]

カスタムエレメントは、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>

## 関連項目

[編集]

* Vue.js
* AngularJS
* React

## 参考文献

[編集]

1. ^ “AUTHORS.txt” (英語). 2017年8月18日閲覧。
2. ^ “CONTRIBUTORS.txt” (英語). 2017年8月18日閲覧。
3. ^ “1.0” (英語). Polymer Project. 2017年8月18日閲覧。
4. ^ “Polymer 3.0: New year, new preview” (英語). Polymer Project. 2018年3月19日閲覧。
5. ^ “Releases · Polymer/polymer” (英語). GitHub. 2018年3月19日閲覧。
6. ^ “Releases · Polymer/polymer” (英語). GitHub. 2018年5月5日閲覧。
7. ^ “polymer/LICENSE.txt at master” (英語). GitHub. 2017年4月24日閲覧。
8. ^ Bidelman (2017年4月18日). “Mission accomplished: has been componentized. New @googleearth is built w/ #WebComponents using @polymer.pic.twitter.com/h76ztfynYy”. @ebidel. 2017年7月8日閲覧。
9. ^ “Who's using Polymer?”. GitHub. 2016年6月4日閲覧。
10. ^ “Polymer gives us a closer look at Google's Material Design UI”. Android Authority. 2018年12月9日閲覧。
11. ^ Steven Max Patterson (2015年5月29日). “Google’s Polymer 1.0 brings reuse and better branding to Web development”. CIO. 2018年12月9日閲覧。
12. ^ “Welcome - Polymer 1.0”. 2015年8月14日時点のオリジナルよりアーカイブ。2018年12月9日閲覧。
13. ^ Polymer Summit 2015
14. ^ Polymer Summit 2016
15. ^ Polymer Summit 2017
16. ^ “Roadmap update, part 1: 3.0 and beyond”. 2018年12月9日閲覧。
17. ^ “Justin Fagnani on Twitter” (英語). Twitter. https://twitter.com/justinfagnani/status/994358200538349568 2018年5月14日閲覧。
18. ^ “Roadmap update, part 2: FAQ - Polymer Project” (英語). www.polymer-project.org. 2018年5月14日閲覧。
19. ^ Allie Coyne (2015年8月13日). “Inside ING Direct's new lego block app architecture”. iTnews. 2018年12月9日閲覧。

## 外部リンク

[編集]

* 公式ウェブサイト
* GitHubリポジトリ
* WebComponents.org