ポリマー入門

投稿日: 2022-04-20 2022-04-20

Webコンポーネントは、Webのカスタムコンポーネントを作成、使用、および共有するための優れた方法を提供します。 Polymer は、これらの要素を今すぐ利用できる軽量のライブラリです。 Polymerは、Webコンポーネントの実装を簡素化し、いくつかの便利な機能を追加します。

ポリマーは2つの主要部分で構成されています。

Polymer Library は、Webコンポーネントの作成、使用、共有を容易にする一連の機能を提供します
Polymer Toolkit は、ツール、コンポーネント、およびテンプレートの追加コレクションを提供し、Webコンポーネントを使用して完全なアプリケーションを簡単に構築できるようにします。

この記事では、 PolymerLibraryとPolymerCLIを使用して簡単なカスタムWebコンポーネントを作成する方法について説明します。

このカスタム要素の概要で作成された<my-title>要素を再作成することから始めます。

この記事では、Polymer2ライブラリを使用します。いくつかの変更を加えて、これらの手順は、リリースされた後、Polymer3に適用できます。

前提条件

Polymerをインストールして使用するには、次の設定が必要です。

npm–ポリマーCLIをインストールするために必要なノードおよびノードパッケージマネージャー
bower-フロントエンドの依存関係を管理するために必要

ポリマーCLI

Polymer CLIは、Polymerベースのアプリ開発の複数の側面を支援するコマンドラインツールです。提供されるコマンドの一部は次のとおりです。

Polymerinit-アプリと要素のボイラープレート生成
ポリマーサーブ-ライブ開発用の開発サーバー
ポリマーリント-ポリマー固有のリンティング
ポリマーテスト-テストランナー
ポリマービルド-本番環境に対応したアプリをビルドします

この記事では、定型的な生成および開発サーバーを使用します。

CLIのインストール

Polymer CLIは、次のコマンドを使用してインストールできます。

$ npm install -g polymer-cli

ツールが正常にインストールされたことを確認し、使用可能なすべてのコマンドのリストを表示するには、次を使用します。

$ polymer --help

ポリマーエレメントプロジェクトを開始

新しいディレクトリを作成し、そこに移動します。

$ mkdir my-title
$ cd my-title

Polymer CLI を使用して、要素プロジェクトを初期化します。これにより、ポリマー要素の生成プロセスが開始されます。

$ polymer init

このコマンドは、いくつかの構成を要求します。次の設定を使用します。

最初のオプションpolymer-2-elementを選択して、カスタム要素を生成します
要素にはデフォルト名のmy-titleを使用できます
説明を空のままにします
Polymer CLIは、プロジェクトのバウアー依存関係を自動的にインストールします

生成されたフォルダ構造

これにより、次のようなフォルダ構造が生成されます。

/bower.json         // List of front-end dependencies
/bower_components/  // The bower dependencies are saved here
/demo/              // Demo folder containing a working example of our component
/index.html         // Starting point (re-directs to demo/index.html)
/my-title.html      // Web component definition
/polymer.json       // Polymer settings
/README.md          // Automatically generated Readme
/test/              // Tests for the component

Polymer CLIは、カスタムコンポーネントを作成するための手間のかかる作業のほとんどを実行します。後でわかるように、このファイル構造には、Webコンポーネントに必要な基本設定と、必要なポリフィルがすでに含まれています。

生成された要素

./my-title.htmlを開くと、生成されたポリマー要素を確認できます。

my-title.html

<link rel="import" href="../polymer/polymer-element.html">

<dom-module id="my-title">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <h2>Hello [[prop1]]!</h2>
  </template>

  <script>
    class MyTitle extends Polymer.Element {
      static get is() { return 'my-title'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'my-title'
          }
        };
      }
    }

    window.customElements.define(MyTitle.is, MyTitle);
  </script>
</dom-module>

この生成されたコンポーネントは、ネイティブWebコンポーネントとして構築するものと多少似ています。ただし、ここにはいくつかの重要な違いがあります。

ES6インポートの代わりにHTMLインポートを使用しています。（ポリマー3.0では、ES6インポートがHTMLインポートに置き換わります）
Polymerは、提供された<template>のShadowDOMを自動的に作成します。これは、要素を分離するのに役立ちます。
クラスは、HTMLElementではなくPolymer.Elementから拡張されます。 Polymer.Elementは、データバインディングなどの新しい機能をWebコンポーネントに追加します。

動作中の要素を表示

カスタムコンポーネントをデモするには、次のコマンドを使用できます。

$ polymer serve --open

このコマンドは、ローカル開発サーバーのデモページを提供します。

要素のカスタマイズ

最後に、Webコンポーネントのカスタム要素の記事で作成されたものと同じように要素をカスタマイズできます。

このために、最初にスタイルを追加する必要があります。

<style>
  :host {
    display: block;
  }

  h1 {
    font-size: 2.5rem;
    color: hotpink;
    font-family: monospace;
    text-align: center;
    text-decoration: pink solid underline;
    text-decoration-skip: ink;
  }
</style>

次に、テキスト値を設定できます。

<h1>Hello Alligator!</h1>

それでおしまい！これで、ほぼ同じ要素ができました。この要素は、htmlインポートを使用するPolymerアプリケーションで使用できます。

結論

ご覧のとおり、Polymerを使用すると、Webコンポーネントを生成するプロセスが他の方法よりもはるかに簡単になります。それに加えて、Polymerはすでに非常に便利なWebコンポーネントに加えて機能を追加します。

最後に、 Polymer CLI がビルドプロセスを処理するため、アプリケーションの配布に関して、ポリフィルやその他のブラウザーサポートの問題を手動で処理する必要はありません。

getdocs

13036