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