Polymer 3.0でウェブサイトを作ってみた

Web Components Advent Calendar 2018 24日目の記事です。

Web Components Advent Calendar 2018 - Qiita

Polymer 3.0を使って日本ウェブフォント協会という架空の協会のサイトを作ってみた。

Japan Web Font Association

リポジトリはこれ。

takanorip/Japan-WebFont-Association

今回はその過程をまとめるよ。

Polymer 3.0

Polymer 3.0はWeb Componentsの利用をサポートしてくれるJavaScriptフレームワークです。詳しくはドキュメントを読んでね。

なんでLitElementじゃないのかって言うと、v1.0になってなくて安定してないからとPolymer 3.0出たばっかなのに「お前は用済みだ」みたいな感じになってるのが可愛そうだなと思ったから。

平成も最後だし供養してやろうという気持ち。

Welcome - Polymer Project

あとこの本に詳しい解説が載ってるので買って読むと良いと思います（宣伝）

イヌでもわかるWeb Components 改訂版 - 犬テトラ+ - BOOTH（同人誌通販・ダウンロード）

使用したコンポーネント

@polymer/iron-ajax

PolymerElements/iron-ajax (3.0.1)

その名の通りajax通信するためのコンポーネント。

コンポーネントからAPIにアクセスし、結果を直接他のコンポーネントに渡せる。JavaSriptを書かなくて良いので、詳しくない人にとっては良いかも。

ローディング中とかも判定できる。

polymer-starter-kit

Polymer/polymer-starter-kit

Polymer 3.0でアプリケーションを作るための雛形。

こういうのあるとアプリケーション作りやすくて助かる。

今回app-drawerは使用しなかった。

困ったこと

環境変数の扱い

今回、contentfulでコンテンツの管理をしているのだけど、polymer cli に環境変数を渡すことができずアクセストークンが見えてしまうので困った。

結局環境変数を渡すにはwebpackを使うしかなさそうで、それはちょっとめんどくさかったので、BFFを作りcontentfulへのアクセスはBFFから行うようにした。

BFFはnow.shにデプロイした。無料で使えるなんて素敵。

webpack使うならこいつが参考になりそう。

PolymerX/polymer-skeleton

使わなかったけど使えそうなコンポーネント

今回使わなかったけど使えそうなコンポーネントたちをご紹介。

ally関連

PolymerElements/iron-a11y-announcer (3.0.2)

PolymerElements/iron-a11y-keys-behavior (3.0.1)

webcomponents.org - Discuss & share web components

国際化対応

PolymerElements/app-localize-behavior (3.0.1)

Web Animations

PolymerElements/neon-animation (3.0.1)

marked

PolymerElements/marked-element (3.0.1)

toast

PolymerElements/paper-toast (3.0.1)

リサイズを監視してくれるやつ

PolymerElements/iron-resizable-behavior (3.0.1)

まとめ

まあふつうにアプリケーション作れるなーという感じ。

LitElement v1.0 早く来い。