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