Webコンポーネント：ビギナーズガイド

Webコンポーネントを使用する利点、それらの機能、およびそれらの使用を開始する方法について学習します



。Webコンポーネント（以下、コンポーネントと呼びます）を使用すると、開発者は独自のHTML要素を作成できます。このガイドでは、コンポーネントについて知っておくべきことをすべて学びます。まず、コンポーネントとは何か、それらの利点とは何か、そしてそれらは何でできているかから始めます。



その後、最初にHTMLテンプレートとシャドウDOMインターフェイスを使用してコンポーネントの構築を開始し、次にトピックに少し飛び込んで、カスタマイズされた組み込み要素を作成する方法を確認します。

コンポーネントとは何ですか？

開発者はコンポーネントが大好きです（ここでは、「モジュール」設計パターンの実装を意味します）。これは、いつでもどこでも使用できるコードのブロックを定義するための優れた方法です。何年にもわたって、このアイデアを実行するために、多かれ少なかれ成功した試みがいくつか行われてきました。



MozillaのXMLバインディング言語とMicrosoftのInternetExplorer 5のHTMLコンポーネント仕様は、約20年前のものです。残念ながら、両方の実装は非常に複雑で、他のブラウザのメーカーの興味を引くことができなかったため、すぐに忘れられました。それにもかかわらず、今日この分野で私たちが持っているものの基礎を築いたのは彼らでした。



React、Vue、AngularなどのJavaScriptフレームワークも同様のアプローチを取ります。それらが成功した主な理由の1つは、アプリケーションの一般的なロジックを、あるフォームから別のフォームに簡単に移動できるいくつかのテンプレートにカプセル化できることです。



これらのフレームワークは開発エクスペリエンスを向上させますが、すべてに代償が伴います。JSXなどの言語機能をコンパイルする必要があり、ほとんどのフレームワークはJavaScriptエンジンを使用して抽象化を管理します。コードをコンポーネントに分割する問題を解決するための別のアプローチはありますか？答えはWebコンポーネントです。

コンポーネントの4つの柱

コンポーネントは、カスタム要素、HTMLテンプレート、シャドウDOMの3つのAPIと、それらの基盤となるJavaScriptモジュール（ES6モジュール）で構成されています。これらのインターフェイスによって提供されるツールを使用して、ネイティブの対応物のように動作するカスタムHTML要素を作成できます。



コンポーネントは、通常のHTML要素と同じ方法で使用されます。これらは、属性を使用してカスタマイズしたり、JavaScriptを使用して取得したり、CSSを使用してスタイルを設定したりできます。主なことは、それらが存在することをブラウザに通知することです。



これにより、コンポーネントが他のフレームワークやライブラリと相互作用できるようになります。通常の要素と同じ通信メカニズムを使用することにより、既存のフレームワークだけでなく、将来登場するツールでも使用できます。



コンポーネントがWeb標準に準拠していることにも注意してください。ウェブは後方互換性のアイデアに基づいています。これは、今日作成されたコンポーネントが長期間にわたってうまく機能することを意味します。



それぞれの仕様を個別に見ていきましょう。

1.カスタム要素

主な機能：

• 要素の動作の定義
• 属性の変更への対応
• 既存の要素を拡張する

多くの場合、人々がコンポーネントについて話すとき、それらはカスタム要素のインターフェースを意味します。



このAPIを使用すると、追加、更新、および削除されたときの動作を定義することにより、要素を拡張できます。

class ExampleElement extends HTMLElement {
  static get observedAttributes() {
      return [...]
  }
  attributeChangedCallback(name, oldValue, newValue) {}
  connectedCallback() {}
}
customElements.define('example-element', ExampleElement)

各カスタム要素は同様の構造を持っています。これは、既存のHTMLElementsクラスの機能を拡張します。



カスタム要素内には、要素への特定の変更の処理を担当するリアクションと呼ばれるいくつかのメソッドがあります。たとえば、connectedCallbackは、アイテムがページに追加されたときに呼び出されます。これは、フレームワークで使用されるライフサイクルステージ（ReactのcomponentDidMount、Vueにマウント）に似ています。



要素の属性を変更すると、その動作も変更されます。更新が発生すると、変更に関する情報を含むattributeChangedCallbackが呼び出されます。これは、observedAttributesによって返される配列で指定された属性に対してのみ発生します。



要素は、ブラウザが使用する前に定義する必要があります。「define」メソッドは、タグの名前とそのクラスの2つの引数を取ります。既存および将来のネイティブ要素との競合を避けるために、すべてのタグには「-」文字を含める必要があります。

<example-element>Content</example-element>

この要素は、通常のHTMLタグと同じように使用できます。そのような要素が見つかると、ブラウザはその動作を指定されたクラスに関連付けます。このプロセスは「アップグレード」と呼ばれます。



アイテムには、「自律型」と「カスタマイズされた組み込み型」の2種類があります。これまで、スタンドアロンアイテムについて見てきました。これらは、既存のHTML要素に関連しない要素です。divタグやspanタグのように、特定の意味はありません。



カスタムインライン要素は、その名前が示すように、既存のHTML要素の機能を拡張します。それらはこれらの要素のセマンティック動作を継承し、それを変更することができます。たとえば、「input」要素がカスタマイズされている場合でも、送信時に入力フィールドとフォームの一部のままになります。

class CustomInput extends HTMLInputElement {}
customElements.define('custom-input', CustomInput, { extends: 'input' })

カスタムインライン要素クラスは、カスタム要素クラスを拡張します。インライン要素を定義する場合、展開可能な要素は3番目の引数として渡されます。

<input is="custom-input" />

タグの使い方も少し異なります。新しいタグの代わりに、既存のタグが使用され、特別な「is」拡張属性が指定されます。ブラウザがこの属性を検出すると、カスタム要素を処理していることを認識し、それに応じて更新します。



スタンドアロン要素はほとんどの最新のブラウザでサポートされていますが、カスタムインライン要素はChromeとFirefoxでのみサポートされています。それらをサポートしていないブラウザで使用すると、後者は通常のHTML要素のように扱われるため、概して、それらのブラウザでも安全に使用できます。

2.HTMLテンプレート

• 既製の構造の作成
• 通話前のページには表示されません
• HTML、CSS、JSが含まれています

これまで、クライアント側のテンプレート作成では、JavaScriptで文字列を連結するか、ハンドルバーなどのライブラリを使用してカスタムマークアップのブロックを解析していました。最近、仕様には、使用したいものを何でも含めることができる「テンプレート」タグがあります。

<template id="tweet">
  <div class="tweet">
    <span class="message"></span>
      Written by @
    <span class="username"></span>
  </div>
</template>

それ自体では、ページに影響を与えることはありません。エンジンによって解析されず、リソース（オーディオ、ビデオ）の要求は送信されません。JavaScriptはそれにアクセスできず、ブラウザーの場合は空の要素です。

const template = document.getElementById('tweet')
const node = document.importNode(template.content, true)
document.body.append(node)

まず、「テンプレート」要素を取得します。importNodeメソッドはそのコンテンツのコピーを作成します。2番目の引数（true）はディープコピーを意味します。最後に、他の要素と同じようにページに追加します。



テンプレートには、CSSやJavaScriptなど、通常のHTMLに含めることができるすべてのものを含めることができます。要素がページに追加されると、スタイルがそのページに適用され、スクリプトが起動されます。スタイルとスクリプトはグローバルであることに注意してください。つまり、スクリプトで使用される他のスタイルと値を上書きする可能性があります。



テンプレートはこれに限定されません。コンポーネントの他の部分、特にシャドウDOMで使用すると、すべての栄光が現れます。

3.シャドウDOM

• スタイルの競合を回避します
• （クラスなどの）名前を思い付くのが簡単になります
• 実装ロジックのカプセル化

ドキュメントオブジェクトモデル（DOM）は、ブラウザがページの構造を解釈する方法です。マークアップを読み取ることにより、ブラウザはどの要素にどのコンテンツが含まれているかを判断し、これに基づいて、ページに何を表示するかを決定します。たとえば、document.getElemetById（）を使用する場合、ブラウザはDOMにアクセスして必要な要素を見つけます。



ページレイアウトの場合、これは問題ありませんが、要素内に隠されている詳細についてはどうでしょうか。たとえば、ページは「video」要素に含まれるインターフェイスを気にする必要はありません。ここでシャドウDOMが役に立ちます。

<div id="shadow-root"></div>
<script>
  const host = document.getElementById('shadow-root')
  const shadow = host.attachShadow({ mode: 'open' })
</script>

シャドウDOMは、要素に適用されると作成されます。通常の（「ライト」）DOMと同じように、任意のコンテンツをシャドウDOMに追加できます。シャドウDOMは、外部で発生することの影響を受けません。それの外。プレーンDOMもシャドウに直接アクセスできません。つまり、シャドウDOMでは、任意のクラス名、スタイル、およびスクリプトを使用でき、競合の可能性について心配する必要はありません。



最良の結果は、カスタム要素と組み合わせてシャドウDOMを使用して得られます。シャドウDOMのおかげで、コンポーネントが再利用されるとき、そのスタイルと構造はページ上の他の要素にまったく影響を与えません。

ESおよびHTMLモジュール

• 必要に応じて追加
• 事前生成は必要ありません
• すべてが1か所に保存されます

以前の3つの仕様は開発において長い道のりを歩んできましたが、それらをどのようにパッケージ化して再利用するかについては、依然として激しい議論の対象となっています。



HTML Imports仕様は、HTMLドキュメント、およびCSSとJavaScriptをエクスポートおよびインポートする方法を定義します。これにより、カスタム要素をテンプレートおよびシャドウDOMとともに別の場所に配置し、必要に応じて使用できるようになります。



ただし、Firefoxはこの仕様をブラウザに実装することを拒否し、JavaScriptモジュールに基づいて異なる方法を提供しました。

export class ExampleElement external HTMLElement {}

import { ExampleElement } from 'ExampleElement.js'

モジュールには、デフォルトで独自の名前があります。それらのコンテンツはグローバルではありません。エクスポートされた変数、関数、およびクラスは、いつでもどこでもインポートでき、ローカルリソースとして使用できます。



これはコンポーネントに最適です。テンプレートとシャドウDOMを含むカスタム要素は、あるファイルからエクスポートして別のファイルで使用できます。

import { ExampleElement } from 'ExampleElement.html'

Microsoftは、JavaScriptモジュール仕様をHTMLエクスポート/インポートで拡張する提案を提出しました。これにより、宣言的およびセマンティックHTMLを使用してコンポーネントを作成できます。この機能はまもなくChromeとEdgeに導入されます。

独自のコンポーネントを作成する

コンポーネントについては複雑に感じることがたくさんありますが、単純なコンポーネントを作成して使用するには、数行のコードしか必要ありません。いくつかの例を見てみましょう。





コンポーネントを使用すると、HTMLテンプレートおよびシャドウDOMインターフェイスを使用してユーザーコメントを表示できます。



HTMLテンプレートとシャドウDOMを使用してユーザーコメントを表示するコンポーネントを作成しましょう。

1.テンプレートの作成

コンポーネントには、マークアップを生成する前にコピーするテンプレートが必要です。テンプレートはページのどこにでも配置でき、カスタム要素クラスはIDを介してテンプレートにアクセスできます。



「テンプレート」要素をページに追加します。この要素で定義されたスタイルは、この要素にのみ影響します。

<template id="user-comment-template">
  <style>
      ...
  </style>
</template>

2.マークアップの追加

スタイルに加えて、コンポーネントにはレイアウト（構造）を含めることができます。この目的のために、「div」要素が使用されます。



動的コンテンツはスロットを通過します。適切な「名前」属性を使用して、アバター、名前、およびユーザーメッセージ用のスロットを追加します。

<div class="container">
  <div class="avatar-container">
    <slot name="avatar"></slot>
  </div>
  <div class="comment">
    <slot name="username"></slot>
    <slot name="comment"></slot>
  </div>
</div>

デフォルトのスロットコンテンツ

スロットに渡された情報がない場合、デフォルトのコンテンツが表示されます。スロットに



渡されたデータは、テンプレートのデータを上書きします。スロットに情報が渡されない場合、デフォルトのコンテンツが表示されます。



この場合、ユーザー名が転送されなかった場合は、代わりに「名前なし」というメッセージが表示されます。

<slot name="username">
  <span class="unknown">No name</span>
</slot>

3.クラスの作成

カスタム要素の作成は、HTMLElementクラスを拡張することから始まります。セットアッププロセスの一部は、要素のコンテンツをレンダリングするためのシャドウルートを作成することです。次の段階でアクセスできるように開きます。



最後に、新しいUserCommentクラスについてブラウザに通知します。

class UserComment extends HTMLElement {
  constructor() {
      super()
      this.attachShadow({ mode: 'open' })
  }
}
customElements.define('user-comment', UserComment)

4.シャドウコンテンツの適用

ブラウザが「user-comment」要素を検出すると、シャドウルートノードを調べてコンテンツを取得します。2番目の引数は、最初のレイヤー（最上位の要素）だけでなく、すべてのコンテンツをコピーするようにブラウザーに指示します。



シャドウルートノードにマークアップを追加すると、コンポーネントの外観がすぐに更新されます。

connectedCallback() {
  const template = document.getElementById('user-comment-template')
  const node = document.importNode(template.content, true)
  this.shadowRoot.append(node)
}

5.コンポーネントの使用

これで、コンポーネントを使用する準備が整いました。「user-comment」タグを追加し、必要な情報を渡します。



すべてのスロットに名前があるため、スロットの外部に渡されたものはすべて無視されます。スタイリングを含め、スロット内のすべてが渡されたとおりに正確にコピーされます。

<user-comment>
  <img alt="" slot="avatar" src="avatar.png" />
  <span slot="username">Matt Crouch</span>
  <div slot="comment">This is an example of a comment</div>
</user-comment>

カスタムインライン要素の作成

前述のように、カスタム要素は既存の要素を拡張できます。これにより、ブローダーによって提供される要素のデフォルトの動作が維持されるため、時間が節約されます。このセクションでは、「time」要素を拡張する方法を見ていきます。

1.クラスの作成

スタンドアロン要素などの組み込み要素は、クラスが拡張されると表示されますが、一般的なクラス「HTMLElement」の代わりに、特定のクラスを拡張します。



この場合、このクラスはHTMLTimeElementです。これは「time」要素によって使用されるクラスです。これには、データ形式など、「datetime」属性に関連する動作が含まれます。

class RelativeTime extends HTMLTimeElement {}

2.要素の定義

要素は、「define」メソッドを使用してブラウザによって登録されます。ただし、スタンドアロン要素とは異なり、インライン要素を登録する場合、「define」メソッドには3番目の引数（設定のあるオブジェクト）を渡す必要があります。



オブジェクトには、カスタム要素の値を持つ1つのキーが含まれます。タグの名前を取ります。そのようなキーがない場合、例外がスローされます。

customElements.define('relative-time', RelativeTime, { extends: 'time' })

3.時間を設定する

1ページに複数のコンポーネントを含めることができるため、コンポーネントは要素の値を設定するためのメソッドを提供する必要があります。このメソッド内で、コンポーネントは時間値を「timeago」ライブラリに渡し、そのライブラリから返された値をアイテム値として設定します（トートロジーで申し訳ありません）。



最後に、ユーザーがホバーで設定された値を確認できるように、title属性を設定します。

setTime() {
  this.innerHTML = timeago().format(this.getAttribute('datetime'))
  this.setAttribute('title', this.getAttribute('datetime'))
}

4.接続の更新

コンポーネントは、ページに表示された直後にメソッドを使用できます。インラインコンポーネントにはシャドウDOMがないため、コンストラクターは必要ありません。

connectedCAllback() {
  this.setTime()
}

5.属性の変更を追跡する

プログラムで時間を更新すると、コンポーネントは応答しません。彼は、「datetime」属性の変更を監視する必要があることを知りません。



監視対象の属性が定義されると、属性が変更されるたびにattributeChangedCallbackが呼び出されます。

static get observedAttributes() {
  return ['datetime']
}
attributeChangedCallback() {
  this.setTime()
}

6.ページに追加する

私たちの要素はネイティブ要素の拡張であるため、その実装は少し異なります。これを使用するには、特別な属性「is」を使用してページにタグ「time」を追加します。この属性の値は、登録時に定義された組み込み要素の名前です。コンポーネントをサポートしていないブラウザは、フォールバックコンテンツをレンダリングします。

<time is="relative-time" datetime="2020-09-20T12:00:00+0000">
  20  2020 . 12:00
</time>

Webコンポーネントとは何か、それらの目的、およびそれらの使用方法についての基本的な理解に役立つことを願っています。