I/O 2019 でのウェブ コンポーネント
Google I/O 2019 では、Polymer プロジェクトの Kevin Schaaf と Salesforce の Caridy Patiño が、ウェブ コンポーネントの状況について語りました。
ウェブ コンポーネントはどれほど人気がありますか？
今日ウェブを使ったことがあれば、ウェブ コンポーネントを使ったことがあるでしょう。現在のページ読み込みの 5 ～ 8% で、1 つ以上のウェブ コンポーネントが使用されています。そのため、ウェブ コンポーネントは、過去 5 年間にリリースされたウェブ プラットフォームの新機能の中で最も大きな成功を収めています。
ウェブ コンポーネントは、YouTube や GitHub など、普段使用しているサイトで見つけることができます。AMP で作成された多くのニュースサイトや出版サイトでも使用されます。AMP コンポーネントはウェブ コンポーネントでもあります。多くの企業がウェブ コンポーネントも導入しています。
ウェブ コンポーネントとは
ウェブコンポーネントとは何でしょうかウェブ コンポーネント仕様には、ブラウザの組み込み HTML タグを拡張できる低レベルの API セットが用意されています。ウェブ コンポーネントは以下を提供します。
- コンポーネントを作成する一般的な方法（標準の DOM API を使用）。
- データを送受信するための一般的な方法（プロパティ/イベントを使用）。
この標準インターフェースの外部では、コンポーネントの実際の実装方法については何も示されていません。
- DOM の作成に使用するレンダリング エンジン。
- プロパティや属性の変更に基づいて自身を更新する方法。
つまり、ウェブ コンポーネントはコンポーネントを作成するタイミングと場所をブラウザに伝えるもので、どのように作成するかは伝えません。
作成者は、React と同様に機能レンダリング パターンを選択して、ウェブ コンポーネントを構築できます。また、Angular や Vue にあるような宣言型テンプレートを使用することもできます。作成者は、相互運用性を維持しながら、コンポーネント内で使用するテクノロジーを自由に選択できます。
ウェブ コンポーネントのメリット
ウェブ コンポーネントと独自コンポーネント システムの主な違いは、相互運用性です。ウェブ コンポーネントは標準インターフェースであるため、組み込み要素（<input> や <video> など）を使用する場所であればどこでもウェブ コンポーネントを使用できます。
実際の HTML として表現できるため、一般的なフレームワークのすべてでレンダリングできます。そのため、ユーザーが 1 つのフレームワークに縛られることなく、より幅広いアプリケーションでコンポーネントをより広範に消費できます。
コンポーネント インターフェースが標準であるため、異なるライブラリを使用して実装されたウェブ コンポーネントを同じページに混在させることができます。この事実は、技術スタックを更新したときにアプリケーションを将来にわたって保証するのに役立ちます。すべてのコンポーネントを置き換えるような、フレームワーク間の大幅な大幅な変更ではなく、一度に 1 つずつコンポーネントを更新できます。
ウェブ コンポーネントを使用するユーザー
以上の理由から、Web Components はさまざまなユースケースで大きな成功を収めています。コンテンツ サイト、デザイン システム、エンタープライズ アプリケーションの 3 つのユースケースが特に人気があります。
コンテンツ サイト
ウェブ コンポーネントは、コンテンツを徐々に改良していくための理想的なテクノロジーです。すでに膨大な数の CMS システムで標準 HTML として出力できるためです。
AMP は、コンテンツ配信用のコンテンツ配信業界のインフラストラクチャに Web Components をすばやく簡単に実装できる良い例です。
デザイン システム
ますます多くの企業が、デザイン システムを使用して自己表現方法を統合するようになってきています。デザイン システムとは、組織のサイトとアプリケーションの共通のデザインを定義する一連のコンポーネントとガイドラインです。この場合も、ウェブ コンポーネントが適しています。
多くの場合、デザイナーは、正規のコンポーネントを 1 つにセットするのではなく、React、Angular、その他のすべてのフレームワークを基盤として、独自のバージョンのデザイン システム コンポーネントを構築する多くのチームと協議する必要があります。
その答えとなるのがウェブ コンポーネントです。「一度書けば、どこでも実行できる」コンポーネント システムで、アプリチームは任意のフレームワークを自由に使用できます。
ING、EA、Google などの企業は、自社のデザイン言語をウェブ コンポーネントに実装しています。
Enterprise: Salesforce のウェブ コンポーネント
企業内でも、安全で将来を見据えた標準化のためのテクノロジーとして、ウェブ コンポーネントは目覚ましい進歩を遂げています。Salesforce の UI プラットフォームの設計者である Caridy Patiño 氏が、UI プラットフォームをウェブ コンポーネントを使って構築した理由を説明してくれました。
Salesforce はアプリケーションのコレクションであり、その多くは買収によってもたらされたものです。これらは、それぞれ独自の技術スタックで実行される場合があります。それらは異なるスタック上に構築されているため、すべてを同じ外観にすることは困難です。さらに、Salesforce では、お客様が Salesforce プラットフォームを使用して独自のカスタム アプリケーションを構築できます。そのため、外部のデベロッパーもコンポーネントを使用できるようにするのが理想的です。
Salesforce は、自社プラットフォームの顧客から次のようなニーズを特定しました。
- 独自のソリューションではなく標準的なソリューションを採用しているため、経験豊富なデベロッパーを見つけやすくなり、新しいデベロッパーを素早く立ち上げることができます。
- 共通のコンポーネント モデルであるため、Salesforce アプリケーションをカスタマイズしても、同じように機能します。
また、お客様が望まないものも特定しました。
- コンポーネントとアプリに互換性を破る変更。つまり、下位互換性が必須でした。
- 古いテクノロジーにとらわれ、進化できない。
- 壁に囲まれた庭に閉じ込められている。
新しい UI プラットフォームのベースとしてウェブ コンポーネントを使用することで、これらのニーズがすべて満たされ、新しい Lightning Web Components が開発されました。
ウェブ コンポーネントを使ってみる
ウェブ コンポーネントの使用を開始する方法は多数あります。
ウェブアプリを構築する場合、多くの既製のウェブ コンポーネントの使用を検討してください。以下、その一部をご紹介したいと思います。
- Google は、独自のマテリアル デザイン システムをウェブ コンポーネント（Material Web Components）として提供しています。
- Wired Elements は、手描きのスケッチなデザインの優れたウェブ コンポーネントのセットです。
<model-viewer>のような特別な用途のウェブ コンポーネントがあります。これを任意のアプリにドロップして 3D コンテンツを追加できます。
会社のデザイン システムを開発する場合や、単一のコンポーネントまたはライブラリを販売してあらゆる環境で使用できるようにする場合は、ウェブ コンポーネントを使用してコンポーネントを作成することを検討します。組み込みのウェブ コンポーネント API を使用することもできますが、これらはかなりローレベルであるため、処理を容易にする各種のライブラリが用意されています。
独自のコンポーネントの作成を開始するには、Google が開発したウェブ コンポーネントの基本クラスである LitElement をご確認ください。LitElement は、React と同様の優れたレンダリング エクスペリエンスを備えています。
検討すべきその他のツールとライブラリ:
- Stencil は、ウェブ コンポーネント主体のフレームワークです。JSX や TypeScript など、一般的なフレームワーク機能がいくつか含まれている
- Angular 要素を使用すると、Angular コンポーネントをウェブ コンポーネントとしてラップできます。
- Vue.js のウェブ コンポーネント ラッパーは、Vue コンポーネントをウェブ コンポーネントとしてパッケージ化する方法を提供します。
その他のリソース:
- open-wc.org では、便利なスタートガイドのほか、ビルドツールや開発ツールに関するヒントやデフォルト構成を紹介しています。
- ウェブの基礎では、ウェブ コンポーネントの基本的な API の基礎知識と、ウェブ コンポーネントを設計する際のおすすめの方法を紹介します。
- MDN は、ウェブ コンポーネント API のリファレンス ドキュメントとチュートリアルを提供します。\
ヒーロー画像（作成者: Jason Tuinstra）：Unsplash より
編集者注: カスタム要素の使用状況グラフが更新され、chromestatus.com で報告されている月間使用状況データ全体が表示されるようになりました。この投稿の以前のバージョンには、直近の月を含まず、6 か月単位のグラフが含まれていました。元のグラフでは、V0 と V1 の系列は積み上げられていました。曖昧さをなくすため、合計線とともに積み上げられていません。2017 年後半の急激な増加は、chromestatus.com のデータ収集システムの変更によるものです。この変更により、すべてのウェブ プラットフォーム機能の統計情報に影響し、今後の測定の精度が向上しました。