https://d226lax1qjow5r.cloudfront.net/blog/blogposts/creating-a-web-component-with-open-wc/Blog_Open_WC_1200x600.png

Dwane HemmingsJavaScript開発者支援

Open-WCでWebコンポーネントを作成する

最終更新日 November 7, 2020

#javascript

所要時間：1 分

このシリーズでは前回まで Webコンポーネントとは何かそしていくつかのツールについて説明しました。今回は、Webコンポーネントを作成して公開し、Webページで使用します。

何を作るのか？を使ったキーパッドコンポーネントです。マテリアルデザインのウェブコンポーネント.ウェブコンポーネントで構成されたウェブコンポーネントを作る。

このアイデアは、できるだけ手間をかけずにプロジェクトにキーパッドを挿入できるようにすることだ。ほんの2、3行のコードで、ユーザーはアプリケーションに数字を入力する方法を持つことができ、電話をかけたり、温度を設定したり、クイズの答えを選択したり、投票したり、その他多くのアプリケーションに対応することができる。

これから作られるキーパッド・コンポーネントの特徴を挙げてみよう：

すぐに使えるウェブ・コンポーネントは、ディスプレイを表示し、その下に数字の0～9、*、#のボタンを表示します。
ユーザーは、属性やプロパティを設定することで、表示や*,#ボタンを非表示にすることができる。
ユーザーがボタンをクリックすると、ディスプレイに文字が追加されます。同時に、カスタム・イベントが送信され、コンポーネントの外のアプリケーションはボタンが押されたことを知ることができます。
Action'ボタンがあり、押されたすべての数字がカスタム・イベントとして送信され、より大きなアプリケーションで適切な処理が行われます。ボタンのテキストは、プロパティを通してユーザーが設定できます。
もう一つのボタンは、ユーザーがアクションを「終了」するために利用できる。そのテキストもカスタマイズできる。押されると、ディスプレイはクリアされ、さらに別のカスタムイベントがアプリケーションに送られます。
ウェブ・コンポーネントにはパブリック・メソッドが用意され、アプリケーションが「アクティブ」な状態に切り替わり、「終了」ボタンが表示される。
ウェブコンポーネントにスタイルを追加するには、マテリアルデザインのボタンとテキストフィールドのコンポーネントを使用します。

ウェブコンポーネントの動作を見る

以下はCodePenでの動作例である。

ペンを見るなんでもキーパッドby conshus de OUR show (コンシャス)でコードペン.

数字を入力してエンターキーを押す。アラートでOKをクリックし、キャンセルをクリックする。

オープンWebコンポーネントでコンポーネントを構築する

このキーパッド・コンポーネントをどのように構築するのか？私たちはOpen Web Components (Open-WC)によってlit-htmlを使用します。彼らのウェブサイト:

Open Web Componentsの目標は、オープンソースのWebコンポーネントを共有するための、強力で実績のあるセットアップをすべての人に提供することです。私たちは、あなたのウェブコンポーネントプロジェクトを促進するための推奨事項やデフォルトを提供することで、これを達成しようとしています。推奨事項には、開発、リンティング、テスト、ツール化、デモ、公開、自動化などがあります。

Open-WCから始めることで、チームの全員が同じ出発点からウェブコンポーネントを構築することができます。多くの物事がそうであるように、一貫性が成功の要因です。

Open-WCはウェブ・コンポーネントとプロジェクトの構築方法について非常に慎重なので、ウェブ・コンポーネントを生成するための実に徹底したCLIツールが用意されている。すべてをセットアップしてみよう。

ターミナルで、ウェブ・コンポーネント・プロジェクトがある場所に移動します。

次に npm init @open-wc.これでOpen-WCのセットアップ・プロセスが起動します。

このブログ記事のプロジェクトで使用したオプションは以下の通り：

今日は何をしたい？新しいプロジェクトの足場
何を足場にしますか？ウェブコンポーネント
何を追加しますか？リンティング（eslint & prettier）
タイプスクリプトを使いたいですか？いいえ
アプリケーション／ウェブ・コンポーネントのタグ名は何ですか？ whatever-you-like-keypad (少なくとも2つの単語を'-'で区切っていれば、ウェブ・コンポーネントの名前は何でもかまいません)
このファイル構造をディスクに書き込みますか？はい
依存関係をインストールしますか？はい、npmを使用します（yarnがお好みであれば、そちらを選択できます）。

Open-WC cli tool setup process

マテリアルデザインのボタンとテキストフィールドをインストールするには、以下の手順に従います。Open-WCのセットアッププロセスで作成された新しいフォルダに入り、次のように入力します：

npm i @material/mwc-button

npm i @material/mwc-textfield

Installing Material Design button and text field

コンポーネント・コード

ウェブコンポーネントのコードは、この GitHub リポジトリ.フォルダにある唯一のファイルのコードを見てみましょう。 srcフォルダにある唯一のファイルのコードを見てみましょう。

まずはインポートです。Open-WCでは lit-htmlとの使用を推奨します。基底クラスを使用することを推奨しています。また、Web Component で使用する Material Design のボタンとテキストフィールドもインポートします。

import { html, css, LitElement } from 'lit-element';
import '@material/mwc-button/mwc-button';
import '@material/mwc-textfield/mwc-textfield';

新しいウェブ・コンポーネントはLitElementをベースにしています。

export class WhateverYouLikeKeypad extends LitElement {

ウェブコンポーネントのスタイリング

static get styles() {
    return css`
      :host {
        display: block;
        padding: 25px;
        color: var(--vwc-dialer-text-color, #000);
      }

      #container {
        width: 75vw;
        max-width: 300px;
      }

      .button-row {
        display: flex;
        justify-content: space-evenly;
      }

      .full-width {
        width: 100%;
      }

      mwc-button {
          margin: 10px;
      }

      mwc-textfield {
        --mdc-notched-outline-leading-width: 28px;
        --mdc-notched-outline-leading-border-radius: 28px 0 0 28px;
        --mdc-notched-outline-trailing-border-radius: 0 28px 28px 0;
        width: 100%;
      }
    `;
  }

ここでは、Web コンポーネントが受け入れる属性とプロパティが、それらのタイプと共に設定されます。こうすることで、lit-html は渡された値をどのように扱うかを知ることができます。

static get properties() {
    return {
      noAsterisk: { attribute: 'no-asterisk', type: Boolean },
      noHash: { attribute: 'no-hash', type: Boolean },
      noDisplay: { attribute: 'no-display', type: Boolean },
      actionText: { type: String },
      cancelText: { type: String },
      actionStarted: { type: Boolean },
      digits: { type: String }
    };
  }

Webコンポーネントは、LitElementのすべての「スーパー」パワーを継承し、デフォルト値を定義します。

constructor() {
    super();
    this.noAsterisk = false;
    this.noHash = false;
    this.noDisplay = false;
    this.digits = "";
    this.actionText = "Enter";
    this.cancelText = "Cancel"
    this.actionStarted = false;
  }

次はウェブコンポーネントの様々なメソッドです。例えば、桁数の追加や送信時のカスタムイベントのディスパッチ、アクションの終了などです。アクションの開始を知らせるメソッドもあります。

__addDigit(digit){
    this.digits += digit;
    const digitAdded = new CustomEvent('digit-added', {
      detail: { digit },
      bubbles: true,
      composed: true });
    this.dispatchEvent(digitAdded);
  }

  __sendDigits(){
    const digitsSent = new CustomEvent('digits-sent', {
      detail: { digits: this.digits },
      bubbles: true,
      composed: true });
    this.dispatchEvent(digitsSent);
  }

  createAction(){
    this.actionStarted = true;
  }

  __endAction(){
    const actionEnded = new CustomEvent('action-ended', {
      detail: { },
      bubbles: true,
      composed: true });
    this.dispatchEvent(actionEnded);
    this.digits = "";
    this.actionStarted = false;
  }

お気づきかもしれないが __addDigit関数は、桁を末尾に追加するだけです。ユーザーがカーソルを桁の途中まで移動させると、新しい桁は最後に追加されるだけです。

addDigit function only adding digits to the end

さて、練習として、カーソルがどこにあっても新しい数字を追加できるようにしてみよう。ここにヒントである。 start.

Web Component をレンダリングするためのマークアップ。状態や設定されている属性/プロパティに応じて、Web コンポーネントは異なる要素をレンダリングまたは非表示にします。

  render() {
    return html`
        <div id="container">
            ${this.noDisplay ? "" : html`<mwc-textfield outlined label="" .value=${this.digits}></mwc-textfield>`}
            <div class="button-row">
                  <mwc-button unelevated @click=${()=>this.__addDigit('1')}>1</mwc-button>
                  <mwc-button unelevated @click=${()=>this.__addDigit('2')}>2</mwc-button>
                  <mwc-button unelevated @click=${()=>this.__addDigit('3')}>3</mwc-button>
            </div>
            <div class="button-row">
                  <mwc-button unelevated @click=${()=>this.__addDigit('4')}>4</mwc-button>
                  <mwc-button unelevated @click=${()=>this.__addDigit('5')}>5</mwc-button>
                  <mwc-button unelevated @click=${()=>this.__addDigit('6')}>6</mwc-button>
            </div>
            <div class="button-row">
                  <mwc-button unelevated @click=${()=>this.__addDigit('7')}>7</mwc-button>
                  <mwc-button unelevated @click=${()=>this.__addDigit('8')}>8</mwc-button>
                  <mwc-button unelevated @click=${()=>this.__addDigit('9')}>9</mwc-button>
            </div>
            <div class="button-row">
                  ${this.noAsterisk ?
      ""
      : html`<mwc-button unelevated @click=${()=>this.__addDigit('*')}>*</mwc-button>`
    }
                  <mwc-button unelevated @click=${()=>this.__addDigit('0')}>0</mwc-button>
                  ${this.noHash ?
      ""
      :html`<mwc-button unelevated @click=${()=>this.__addDigit('#')}>#</mwc-button>`
    }
            </div>
            <div class="button-row">
                ${this.actionStarted ?
      html`<mwc-button unelevated fullwidth @click=${this.__endAction}>${this.cancelText}</mwc-button>`
      :html`<mwc-button unelevated fullwidth @click=${this.__sendDigits}>${this.actionText}</mwc-button>`
    }
            </div>
        </div>
    `;
  }

新しいウェブコンポーネントの公開

ウェブ・コンポーネントがビルドできたので、私たちや他の人がプロジェクトで使えるように公開しましょう。

そのためには、次のようなレジストリを使う。 npm.まだアカウントを持っていない場合は、サインアップしてください。以下に情報.アカウント登録の方法だけでなく、端末を使用してアカウントにログインし、Web Componentを公開する方法も説明します。

これが設定されると、Web Component は public scoped package として公開されます。これにより、万が一同じ名前の Web コンポーネントやパッケージがあった場合に、コンフリクトを防ぐことができます。スコープについての詳細はこちら.

プロジェクト・ディレクトリのターミナルで、（your-npm-usernameをnpmのユーザー名に置き換えて）入力する：

npm init --scope=@your-npm-username

デフォルトの選択肢をすべて受け入れるか、各ステップで適切と思われるように変更してください。

Using the command line to set the scope of the project

ウェブ・コンポーネントはスコープの後ろにあるので、Open-WCによって生成された ReadmeOpen-WC によって生成されたものを修正してみましょう。ここでもプレースホルダ (your-npm-username と whatever-you-like-keypad) を自分のものに置き換えます。

インストールするコマンドは次のようになる：

npm i @your-npm-username/whatever-you-like-keypad

これをプロジェクトで使用するには、次のようにします。 import構文を使う：

import '@your-npm-username/whatever-you-like-keypad/whatever-you-like-keypad.js';

変更を保存します。

それでは、ウェブ・コンポーネントを公開しましょう。ターミナルに入力する：

npm publish --access public

Publishing the project to npm

成功すれば、ウェブ・コンポーネントはnpmのウェブサイト https://www.npmjs.com/package/@your-npm-username/whatever-you-like-keypad.

もちろん your-npm-usernameと whatever-you-like-keypadを自分の価値観に置き換える。

おめでとうございます！これで、あなたや他の人がプロジェクトで使用できるWebコンポーネントが公開されました。

ウェブコンポーネントの使用

コピーをローカルにインストールするには、ターミナルでプロジェクトのディレクトリを入力し、もう一度自分の値に置き換える：

npm i @your-npm-username/whatever-you-like-keypad

しかし、パッケージをインストールしたくない場合はどうしたらいいでしょうか？常に最新版を読み込むようにしたいとか、インストールできない環境でウェブコンポーネントを表示したいとか。 CodePen.

そこでコンテンツ・デリバリー・ネットワーク（CDN）の出番だ。CDNはあなたのパッケージをホストし、あなたはファイルに直接リンクすることができます。この記事では unpkg.com.彼らはあなたのファイルを自動的にコピーしてくれるので、あなたがすることは何もありません。

Webコンポーネントをテストするために使用できるCodePenのサンプルです：

再度、ユーザー名とコンポーネント名のプレースホルダを HTMLと JSタブの

ペンを見るなんでもキーパッドby conshus de OUR show (コンシャス)でコードペン.

作成したWeb Componentの属性とプロパティを追加し（no-asterisk no-hash no-display）、ボタンのテキストに値を設定してみてください（actionText="Something" cancelText="Something else"）。

注：no-displayを使用する場合、数字を表示するには、inputまたはtextarea HTML要素が必要になります。この例のように：

ペンを見るなんでもキーパッド（全オプション）by conshus de OUR show (コンシャス) のコードペン.

次はどうする？

さて、ピカピカの新しいウェブコンポーネントを手に入れたところで、他に何を追加できるでしょうか？例えば、文字を削除するバックスペースボタンを追加したり、ユーザーが独自のボタンを設定できるようにしたり。あるいは、まったく新しいものを作ることもできます。

ウェブコンポーネントへのリンク、質問、フィードバックはコミュニティSlackチャンネル.あなたが作るものを見るのを楽しみにしています。