Web Componentsは、フレームワークに依存せず再利用可能なUI部品を作るためのブラウザ標準仕様群の総称です。Custom Elementsで独自タグを定義し、Shadow DOMでスタイルとマークアップを内部に閉じ込め、HTML Templatesで初期テンプレートを用意する、という3本柱で構成されています。2011年にGoogleのアレックス・ラッセル氏が原案を発表し、2018年前後にW3CおよびWHATWGの標準として主要ブラウザに揃って実装されました。ReactやVueなどのフレームワーク外でも動く点が最大の特徴です。
この記事の目次
- 三位一体の標準仕様
- 2011年Polymerから標準化まで
- デザインシステムでの真価
- Reactとの位置関係
- まとめ
三位一体の標準仕様
Web Componentsという用語は実際には3つの異なる仕様の集合体を指します。1つ目のCustom Elementsは、JavaScriptクラスをcustomElements.define('my-card', MyCard)のように登録することで
2つ目のShadow DOMは、コンポーネントの内部マークアップと外部ページを完全に隔離する境界を作る仕組みで、「外のCSSが内側に漏れない」「内側のIDが外と衝突しない」という強いカプセル化を提供します。3つ目のHTML Templates（タグ）はパース時には描画されず、JavaScriptから複製して使うひな型を用意する用途に使われます。この3要素を組み合わせることで、純粋なブラウザ標準だけで「import可能なUI部品」が作れるようになります。
2011年Polymerから標準化まで
Web Componentsの初出は2011年で、Chromeチームのアレックス・ラッセル氏らがFronteers Conferenceで原案を発表したのが始まりです。Googleはこの構想を素早く実装に落とし込み、2013年にWeb Componentsの薄いラッパーライブラリ「Polymer」を公開して啓蒙を始めました。初期のV0仕様は提案的色合いが強く、ブラウザ間で挙動が分かれていましたが、2018年前後にCustom Elements V1とShadow DOM V1が安定し、Chrome・Firefox・Safari・Edge（Chromium版）が一斉に標準対応しました。
標準化後はLitElement（Polymerの後継、現在のLit）を中心にGitHub、Adobe、SAP、Salesforce、ING、Bloombergといった企業が大規模採用に踏み切りました。GitHubのヘッダーやプロフィールカードはWeb Components製、SalesforceのLightning Web Components（LWC）も同仕様の上に乗っています。Apple自身もMusic.appのWeb版でWeb Componentsを使うなど、フレームワーク中立を求める大企業を中心に裾野が広がりました。
デザインシステムでの真価
Web Componentsの真価が発揮されるのは、複数のフレームワークや複数のチームが同時に動く大規模組織です。デザインシステムをWeb Componentsで作っておけば、ある部署がReact、別の部署がVue、また別がAngularでも、全て同じ
10年単位で運用される業務システムでも、「ReactのバージョンXまで」「Vueの3系まで」と縛られないことは大きな利点になります。またサードパーティ向けに埋め込みウィジェットを配るときは、ホスト側がどんな技術スタックを使っていても干渉しない必要があり、Shadow DOMによる強い隔離が活躍します。メディアサイトの広告枠やチャットウィジェットなど、「他人のページに行儀よく入る」用途で特に好まれる技術です。
Reactとの位置関係
React・Vue・SvelteといったフロントエンドフレームワークとWeb Componentsは、しばしば対立軸で語られますが実際は補完的な関係です。フレームワークはコンポーネントツリーの再描画・状態管理・ルーティング・サーバーサイドレンダリングまでを面倒見る巨大な仕組みで、アプリケーション全体を書くのに向いています。Web Componentsは単体部品の標準仕様であり、アプリの骨組み（ルーティングや状態管理）までは提供しません。
実務では「アプリ全体はReactで書きつつ、デザインシステムだけWeb Componentsで作る」というハイブリッド構成が増えています。ReactからもShadow DOM内のカスタム要素を普通のタグのように呼べるため、両者の境界は薄くなりつつあります。Reactは2024年のReact 19でカスタム要素のサポートを大幅に改善し、Web Componentsはランタイム不要な「ブラウザ標準として10年単位で生き残る」という強みで存在感を保ち続けています。
まとめ
Web ComponentsはCustom Elements・Shadow DOM・HTML Templatesの3仕様で構成される、ブラウザ標準のUI部品技術です。2011年に提唱され2018年に主要ブラウザで標準化され、Salesforce LWCやGitHubのUIで実運用されています。Reactなどのフレームワークと棲み分けながら、長期運用と組織横断に強い基盤として定着しました。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント