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