Web コンポーネント、始めましょう！Web コンポーネントの世界を探検しましょう！

Webコンポーネントは、W3Cによって定義された一連の仕様であり、開発者がDOM内で通常のHTML要素と同様に使用できる再利用可能なカスタム要素を作成できるようにします。これらのカスタム要素は、構造、スタイル、スクリプトをカプセル化し、他のWebアプリケーションで使用できる明確なインターフェースを備えています。

Web コンポーネントには主に次の部分が含まれます。

カスタム要素：開発者は、カプセル化された構造、スタイル、スクリプトを持つ独自のHTML要素を定義できます。カスタム要素インターフェースにより、開発者はカスタム要素に属性やメソッドを追加して、HTMLの機能を拡張できます。
Shadow DOM: カスタム要素に独立したDOM環境を提供し、カスタム要素のスタイルやスクリプトが他の要素に影響を与えないようにします。Shadow DOMにより、開発者はスタイルの競合やスクリプトの干渉を心配することなく、カスタム要素内でCSSやJavaScriptを使用できます。
HTMLテンプレート：カスタム要素の構造をテンプレートで定義する方法を提供します。HTMLテンプレートを使用すると、開発者はスロットを含むテンプレートを作成し、カスタム要素がインスタンス化されたときに、対応するスロットにコンテンツを挿入することができます。

この記事では、使用して学習する価値のある 9 つのオープンソース Web コンポーネントプロジェクトを紹介し、Web コンポーネントの世界をご紹介します。

点灯

Litは、Webコンポーネント標準に基づいたJavaScriptライブラリです。高性能で動的、かつ再利用可能なWebコンポーネントを容易に作成できるツールとAPIスイートを提供します。Litの機能は以下のとおりです。

軽量: Lit のコードベースは非常に小さく、圧縮後も 10 KB 未満なので、使いやすく、読み込みも非常に速くなります。
シンプルなプログラミング: Lit はシンプルな API セットを提供し、JavaScript テンプレート文字列を使用した HTML の迅速な構築をサポートしているため、コンポーネントの記述の難しさが軽減されます。
高いスケーラビリティ: Lit はネイティブ Web コンポーネント標準 API をサポートするだけでなく、高度な機能をより簡単に実装できるカスタムコンポーネント API もいくつか提供します。
豊富なエコシステム: Lit コミュニティはアクティブであり、開発者が複雑なアプリケーションを迅速に構築するのに役立つ、一般的に使用される多くの外部ライブラリとコンポーネントを提供しています。

Github: https://github.com/lit/lit。

高速要素

Fast Elementは、Microsoftが開発したWebコンポーネント標準に基づくオープンソースのUIライブラリです。Fast Elementは、最新のWebアプリケーションを構築するための、高性能で保守性と拡張性に優れたWebコンポーネントを提供することを目的としています。Fast Elementの機能は以下のとおりです。

シンプルで使いやすい: TypeScript を使用して開発できるシンプルな API セットを提供し、CSS スタイルを使用したパーソナライズをサポートしているため、コンポーネントの開発が容易になります。
高い再利用性: ボタンやテキストボックスなど、直接呼び出したり他のコンポーネントに統合したりできる共通コンポーネントがいくつか用意されているため、開発および保守コストが削減されます。
柔軟なスタイルカスタマイズ：CSS変数を用いたテーマカスタマイズに加え、LESSやSassを用いたスタイルの記述と管理もサポートしています。開発者は自身のニーズに合わせて自由にスタイルをカスタマイズできます。
アクセシビリティをサポート: W3C Web コンテンツアクセシビリティガイドライン (WCAG) 標準に準拠し、アクセス可能な環境で非常にユーザーフレンドリーな、アクセシビリティの高い UI コンポーネントを提供します。

Github: https://github.com/Microsoft/fast。

ステンシル

Stencilは、TypeScript、JSX、CSSを用いて標準準拠のWebコンポーネントを作成するためのオープンソースコンパイラです。主要なフレームワークの優れたコンセプトを融合し、便利なAPIと、プリレンダリングやオブジェクトのプロパティ化といった主要機能を提供することで、高速で強力なコンポーネントの開発を容易にします。また、Stencilはフレームワーク固有のラッパーを生成し、主要なフレームワークと直接統合することも可能です。さらに、ライブリロードや小型開発サーバーといった最適化された開発エクスペリエンスも提供します。

Github: https://github.com/ionic-team/stencil。

オミ

Omiは、Tencentが開発したWebコンポーネントフレームワークで、JSXとsignal/signal機能が組み込まれています。以下の機能を備えています。

シグナル駆動型リアクティブプログラミング：OMIフレームワークは、シグナル駆動型リアクティブプログラミングを採用し、ユーザーインターフェースが必要に応じて正確に更新されることを保証します。このアプローチにより、不要なレンダリングと計算が削減され、アプリケーションのパフォーマンスとユーザーエクスペリエンスが向上します。
包括的なテンプレートとコンポーネント：OMIフレームワークは、OMIU、JSX、Router、Suspense、VChart、VTable（Visactor）など、豊富なテンプレートとコンポーネントを提供します。これらのコンポーネントとテンプレートは設定を必要とせず、すぐに使用できるため、開発プロセスを大幅に簡素化し、開発効率を向上させます。
オブジェクト指向プログラミング（OOP）とデータ駆動型プログラミング（DOP） ：OMIフレームワークは、オブジェクト指向プログラミング（OOP）とデータ駆動型プログラミング（DOP）の両方をサポートしています。これにより、開発者はプロジェクトのニーズに応じて最適なプログラミング手法を選択し、さまざまな開発シナリオに柔軟に対応できます。
構築可能なスタイルシート：OMIフレームワークは構築可能なスタイルシートをサポートしており、これによりスタイルの管理と共有が大幅に容易になります。構築可能なスタイルシートを使用することで、開発者はアプリケーションのスタイルをより効率的に管理・保守できます。
Webコンポーネントのサポート：OMIフレームワークはWebコンポーネントをサポートしているため、開発者は標準に準拠したクロスフレームワークコンポーネントを容易に作成できます。これにより、コンポーネントの再利用性と保守性が向上し、開発コストが削減されます。
小型サイズと超高速パフォーマンス：OMIフレームワークは、あらゆる最新ブラウザをサポートする小型サイズと超高速パフォーマンスを誇ります。これは、フレームワークが高度なテクノロジーと最適化を採用しているためであり、アプリケーションはサイズを抑えながらも高いパフォーマンスを維持できます。

Github: https://github.com/Tencent/omi。

クォークデザイン

Quark Designは、Helloが開発したエンドユーザー（Cエンド）向けの次世代フロントエンドコンポーネントライブラリです。あらゆるフレームワークで使用可能、あるいはフレームワークなしでも使用可能で、取引、決済、二輪車、eコマースなど、HelloのCエンドH5プロジェクトのほぼすべてをサポートしています。軽量で洗練されたエンタープライズグレードのUIコンポーネントライブラリであり、日常的な使用における基本的なコンポーネントニーズをすべて満たします。

Quark Designは、Webコンポーネントをベースにした全く新しいコンポーネントライブラリです。ブラウザ上で多くの事前処理を必要とする従来のコンポーネントフレームワーク（AntdやVantなど）とは異なり、Quark Designはアプリケーションのコンパイル時にこの処理を処理します。コンポーネントデータの更新はブラウザ独自のAPIによって処理されるため、よりシンプルで効率的です。

Github: https://github.com/hellof2e/quark-design。

ライオン

LionはWebコンポーネントをベースとしたコンポーネントライブラリで、高いパフォーマンス、アクセシビリティ、そして柔軟性を提供します。公平かつカスタマイズ可能なホワイトラベルレイヤーとして、Lionは豊富なコンポーネント基盤を提供し、開発者が独自のコンポーネントレイヤーを容易に拡張・構築できるようにします。

パフォーマンスの面では、Lion は、効率的な操作と読み込み速度を確保するために、依存関係を極めて少なくしながら、すべての主要ブラウザで優れたパフォーマンスを実現することに重点を置いています。
アクセシビリティの面では、Lion は WCAG 2.2 AA 標準に準拠することに注力しており、アクセシブルなコンポーネントを作成することで、誰もが簡単に使用してアクセスできるようにします。
柔軟性の面では、Lion は Web コンポーネントと JavaScript クラスに基づくソリューションを提供しており、さまざまなシナリオの要件を満たすために特定のニーズに応じて使用、採用、拡張できます。
Lionは現代的なコード配布アプローチを採用し、純粋なElasticsearchモジュールとして提供されるため、簡単に統合して使用できます。さらに、関数、クラス、Webコンポーネントを最適な形式で公開することで、開発者はニーズに応じて選択して使用できます。

Github: https://github.com/ing-bank/lion。

靴紐

Shoelaceは、Webコンポーネントをベースにした先進的なUIコンポーネントライブラリです。以下の特徴を備えています。

すべてのフレームワークと互換性があります
CDN対応
CSSで完全にカスタマイズ可能
ダークテーマを含む
アクセシビリティをデザインの核に
最高レベルのReactサポートを提供
組み込みのローカリゼーション機能

Github: https://github.com/shoelace-style/shoelace。

UI5 Webコンポーネント

SAP UI5フレームワークの一部であるUI5 Webコンポーネントは、最新のWebアプリケーションを構築するためのオープンソースのWebコンポーネントライブラリです。UI5 Webコンポーネントは、ボタン、入力フィールド、テーブルなど、Web標準とShadow DOMテクノロジーに基づくカスタム要素を使用して実装された、再利用可能なUIコンポーネントスイートを提供します。つまり、これらのコンポーネントは、Angular、React、VueなどのWeb標準をサポートするあらゆる環境で使用できます。

Github: https://github.com/SAP/ui5-webcomponents。

素晴らしいWebコンポーネント

記事、ケーススタディ、フレームワーク、ライブラリ、エコシステム、書籍などを含む、Web コンポーネント学習リソースのコレクション。

Github: https://github.com/web-padawan/awesome-web-components。

DUICUO