){kind=small}
Webコンポーネント入門
所要時間：6 分
JavaScriptのフレームワークやライブラリがたくさんあることは、誰もが認めるところだ。Angular、React、Vue、Svelte......リストは年々増えているようだ。しかし、これらの共通点は何だろうか？その答えは、ウェブ上でアプリケーションを構築するために使用され、再利用可能なコンポーネントを作成する機能を提供しているということだ。
もし、既存のウェブ標準をベースにしたコンポーネント、つまり、すべてをアプリケーションに統合するためのフレームワークやライブラリに依存しないコンポーネントを作成できるとしたらどうだろう？そこで登場するのがWebコンポーネントです。
ウェブ・コンポーネントを導入している企業について、いくつかご紹介しましょう：
Logos of companies using Web Components. Google, Salesforce, Electronic Arts, Twitter, YouTube and GitHub
グーグル：AMPウェブ・コンポーネント・フレームワーク (ソース)
セールスフォースLightning Web コンポーネント (ソース)
ツイッター埋め込みツイートソース)
GitHub更新前」(ソース)
YouTube：このサイトはWeb Components (ソース)
エレクトロニック・アーツ（EA）がウェブ・コンポーネントをどのように使っているのか、さらに深く掘り下げてみよう。(ソース)
EAは、世界30カ所に22以上のスタジオと1万人以上の従業員を擁する最大級のゲーム会社である。言うまでもなく、多くのゲーム（NBAライブ、スター・ウォーズ、ザ・シムズ、バトルフィールドなど）をリリースしている。
当初、ウェブチームは各ゲームのウェブサイトを1サイトずつ独立してデザイン・開発するというアプローチをとっていた。ご想像の通り、これはEAが提供するすべてのゲームを閲覧するユーザーにとって、一貫性のない体験につながります。また、サイト制作に携わるデザイナーや開発者にとっても大変なことだった。彼らは、各ゲームタイトルのカスタム体験を構築する代わりに、「コモディティ・ウェブ」（ナビゲーション、フッター、メディアギャラリーなど）に80％の時間を費やしていた。
その比率を逆転させるために、ネットワーク・デザイン・システム（NDS）が作られた。NDSによって、彼らはコモディティ・ウェブのコンポーネントを追加することができた：
テーミング機能
あらゆる言語やフレームワークと統合する能力
マイクロサイト・アーキテクチャのサポート
UIaaS（User Interface as a Service）としての提供
そして、ウェブ・コンポーネントを使ったことのある人が他にいるだろうか？
あなた。に'src'属性を設定するだけでいいなんて、どうしてそんなことが可能なのだろうと不思議に思ったことはありませんか？ <video>または <audio>に'src'属性を設定するだけで、ボタン、音量調節、プログレス・バー、タイマー、その他のオプションを備えた完全に機能的なプレーヤーを作ることができるのはなぜだろう？ウェブ・コンポーネント
同じように使いやすいが、舞台裏でもっと多くのことが起きている例を見てみよう。 モデルビューアWebコンポーネントです。
3Dモデルを表示するために必要なコードは以下の通りです：
<!-- Import the component -->
<a href="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">https://unpkg.com/@google/model-viewer/dist/model-viewer.js</a>
<a href="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js</a>
<!-- Use it like any other HTML element -->
<model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls></model-viewer>シンプルなHTMLタグで、WebGLやWebXR Device APIを知らなくても3Dモデルを埋め込むことができます。
ここでは、フレームワーク/ライブラリの内外で実装されたモデルビューアWebコンポーネントを紹介します：
ウェブ・コンポーネントを使用している人たちや、ウェブ・コンポーネントを使用して作成できるものを見て、自分のウェブ・コンポーネントを作成する方法を知りたくなったことでしょう。
前述したように、Web ComponentsはWeb標準に基づいて構築されています。これらの低レベルAPIは、以下のようなものから構成されています：
カスタム・エレメント
シャドーDOM
HTMLテンプレート
カスタム要素API：ページにカスタム要素を登録できます。
ハイフン/ダッシュ（ケバブ・ケース）を含まなければならない（例：my-custom-element）。名前の衝突を防ぐため、一語の要素は使用できません。
その振る舞いを定義するクラスオブジェクトだ。
また、カスタム要素が拡張する組み込み要素（もしあれば）、例えば、入力（HTMLInputElement）、ボタン（HTMLButtonElement）などを決定します。
Shadow DOM API：要素に別の DOM をアタッチするメソッドを容易にする。
それは、スタイル、構造、動作を外部のコードから分離しておくためのカプセル化を提供する。これは「...グロスを封じ込める」のに役立つ - ポール・ルイス (ソース)
イベントの再マッピングを可能にする。つまり、クリックイベントをより意味のあるものに変えることができる。
HTML テンプレート API：カスタム要素のシャドウDOMに挿入される柔軟なテンプレートを作成します。
その
<template>要素のコンテンツはすぐにはレンダリングされない。HTMLの構造を前もって定義しておき、必要なときにJavaScriptでクローンを作成します。HTMLを効率的にレンダリングし、ユーザーがウェブコンポーネントとインタラクトしたときにそれを更新するために使用します。
より複雑なテンプレートについては、ライブラリやフレームワーク、ツールを使う方が簡単かもしれない。
以下は、私が書いたウェブ・コンポーネントの例で、何が起こっているのかを説明するのに役立つコメントを添えている。
ブラウザのサポートについては、Webコンポーネントは最新のブラウザでサポートされています。
Table showing browser support for Web Components.
古いブラウザでは、ポリフィルを使うことができます： https://www.webcomponents.org/polyfills
Vonageでは、先に述べたエレクトロニック・アーツのようなデザイン・システムを構築するために、ウェブ・コンポーネントを作成しています。私たちの目標は、ユーザーが簡単にコンポーネントを組み立てて、舞台裏で何が起こっているかを気にすることなく、チャットアプリケーションなどを構築できるようにすることです。
ウェブ・コンポーネントの詳細については、以下のリソースをご参照ください：
私が作ったウェブ・コンポーネントの例は単純なものだった。コンポーネントの複雑さが増すにつれて、ツールを使うことで開発が容易になるかもしれません。次回のブログ記事では、Webコンポーネントを作成するさまざまなフレームワークやツールを比較します。