category

Polymer 3の使い方

WebComponentsを先導してきたPolymerがGoogle I/O 2018でPolymer3.0をリリースし、アーキテクチャを大きく変えました。

実際に検証したところ、npmでパッケージをインストールしwebpackでビルドする、というJavascript開発の標準的なフローでビルドできます。

Polymer3.0で各開発者が実装するLitElement(既存資産を流用する場合はPolymerElement)は、Custom Element標準ベースであるため、完成したコンポーネントはHTMLタグと同じ感覚で利用できます。

LitElementには、描画ライフサイクルに割り込むコールバックも定義されていて、コード構成はReact.jsを意識したものになっています。
React.jsはテンプレートがJSXですが、LitElementではlit-htmlを利用しており、文法的に生のHTML/CSS/Javascriptで書いていくスタイルが分かりやすい印象と言えます。

Polymer特有の使い方をハイライトでまとめると以下のような流れになります。(詳細はLitElement公式サイト参照)

  1. npm i @polymer (何かコンポーネントを追加したい場合にもnpm installで完結)
  2. コードの冒頭でimport {LitElement, html} from '@polymer/lit-element';によりES Modules形式でインポート
  3. LitElementをextendsしたclassを実装。_render()内のlit-htmlテンプレート実装がミニマム構成
  4. webpackなどでビルド。Polymer特有の必須loaderなどはなし
  5. 利用するHTMLから<script>タグでインクルード。BabelでES5向けにバンドル化した形式であれば、ES Module形式である必要もなく20世紀型のインクルードでOK
  6. WebComponentsとしてタグ利用

ただし、旧来からのPaperElementの中にはwebpackでビルドするとCustomElements.define()の重複でエラーになるものがあり、古いものを流用する際にはpolymer-cliを活用した方が良いようです。

まとめ

Polymerにはpolymer-cliというツールがあり、公式ドキュメントにはpolymer-cliベースの解説が載っていますが、実際には@polymerのライブラリを導入するだけでwebpackの一般的なビルドフローにのれます。

なお現状、Polymerについて調べるとv2.0やv1.0の情報が目立ちますが、メジャーバージョンごとに大きく実情異なるので、基本的にはv3.0以降の参考情報にはできないと考えられます。