[Polymer]Polymer3.0が公開されたので触ってみた

Polymer3.0が公開されたので、触ってみました。Getting Startedのハマりどころもありましたので解決策も含めて紹介します。
2018.07.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Polymer3.0

PolymerはGoogle社製のJavaScriptフレームワークで「Web Components」「Material Design」などモダンなWEBサービスを作る事ができます。
Developers.IOでは過去にこのような記事を書いていました。

個人的にもPolymer1.0が出た頃にプロダクトで軽く利用した程度だったのですが、 今年に入りPolymer3.0が公開されましたので少し触ってみました。

What's new in Polymer3.0

2.xではBowerを利用していましたが、npmに変わりました。
また、polymer-cliではserveやbuild、testのコマンドが用意されています。

2.xからの変更点

  • HTML Import → ES6
  • Bower → npm
    • デフォルトコンポーネント類も npm で管理

3.0での追加

  • polymer-cli
    • 開発、テスト、および展開をサポートする

公式ページ

Install Polymer 3.0

前提

  • git
  • node
  • npm

が動く環境を用意します。

polymer-cliインストール

$ npm install -g polymer-cli
$ polymer --version

polymer-cliコマンド表です

$ polymer build (for app projects only)
$ polymer init
$ polymer install
$ polymer lint
$ polymer serve
$ polymer test

開発に必要なコマンドは一通りありそうです。   これだけでPolymerで開発を行う環境が用意できました。

サクッと試すサンプル

$ git clone https://github.com/PolymerLabs/start-polymer3.git
$ cd start-polymer3
$ npm install
$ polymer serve

http://127.0.0.1:8081にアクセスする


Polymerが動きました。

流石にこれだけでは寂しいので Getting Started も試します。

Getting Started

公式サイトでは以下の2つを順序立てて解説されていて、非常にわかりやすいです。

  1. Build an element
  2. Build an app

今回は2.Build an appを試しました。  
実際に試したソースコードはこちらです。

githubリンク

ハマりどころ

本ブログ執筆時点ではstarter-kitの不具合で同じコンポーネントが複数バージョン入ってしまい、
コンポーネントの呼び出しでエラーとなりました。
node_modulesの中身を入れ直せば解決します。

$ rm -rf node_modules package-lock.json
$ npm install

参考:
https://www.polymer-project.org/blog/2018-05-25-polymer-elements-3-faq

ビルド

polymer build コマンドで生成されるモジュールは以下の3つです。

  • esm-bundled: ES modules.
  • es6-bundled: AMD modules (ES2015)
  • es5-bundled: AMD modules (ES5)

別途トランスパイラを用意しなくていいのは助かります。

まとめ

今回はPolymer3.0を試しました。
昨今のJSフレームワークはAngular、React、Vue.jsが主流と感じてますが、Materialデザインの枠組みで作れるのであればPolymerも使えそうです。