はじめに
Web Componentsとは
Web Componentsは、ブラウザの標準仕様を使って自分だけのHTML要素を作る仕組みです。代表的な要素にカスタム要素、Shadow DOM、HTMLテンプレートがあります。たとえば〈my-button〉という独自のボタン要素を作れば、見た目や動作をその要素内に閉じ込めて、何度でも使えます。
なぜ重要か
- 再利用性が高まります。共通のUIを一度作っておけば、複数ページやプロジェクトで使えます。
- カプセル化によりスタイルやスクリプトの干渉を防げます。外側のCSSで崩れにくくなります。
- フレームワークに依存しません。ReactやVueを使わない環境でも同じコンポーネントを動かせます。
この章の目的
この章では、Web Componentsの全体像と利点をやさしく紹介しました。次章では、各機能（カスタム要素・Shadow DOM・テンプレート）を具体例を交えて詳しく見ていきます。
Web Components の構成要素
カスタム要素 (Custom Elements)
カスタム要素は、HTMLElementを継承したクラスで作る独自のタグです。ブラウザはそのタグを通常の要素と同じように扱います。例えば、<my-button>のようなタグを定義して、内部に表示や振る舞いを組み込めます。ライフサイクルメソッド（connectedCallbackなど）で初期化や破棄処理を行います。
例:
class MyButton extends HTMLElement {
connectedCallback() { this.textContent = '押してください'; }
}
customElements.define('my-button', MyButton);
この仕組みで再利用しやすいUI部品を作れます。
Shadow DOM（シャドウ DOM）
Shadow DOMは要素内部に閉じた小さな DOM を作り、スタイルや構造を外から隔離します。これにより外側の CSS が内部に影響しにくく、逆もまた同様です。コンポーネントごとに意図した見た目を保てます。
使い方の例:
const root = this.attachShadow({mode: 'open'});
root.innerHTML = `<style>button{color:white;background:blue}</style><button>押す</button>`;
HTMLテンプレートとスロット
<template>は事前に用意したマークアップを再利用できます。レンダリング時まで内容を実体化しません。<slot>はコンポーネントの差し込み位置を決め、親から渡した内容を表示します。これで柔軟なレイアウトとコンテンツ差替えが可能です。
例:
<template id="card"><div class="box"><slot></slot></div></template>
コンポーネントはこれらを組み合わせて、見た目と振る舞いが一体となった部品を作ります。
実用的なポイント
- 小さな部品に分けると管理しやすいです。
- 標準仕様なのでフレームワークに依存しません。
- 互換性のためにポリフィルを使う場合があります。
特徴とメリット
概要
Web Components は「再利用できるパーツ」を標準的に作れる仕組みです。ここでは代表的な特徴と、それがもたらす具体的なメリットを分かりやすく説明します。
再利用性・モジュール性
HTML・CSS・JavaScriptを一つのコンポーネントにまとめて配布できます。例えばカスタムボタンを作れば、別のプロジェクトでも同じタグを使うだけで同じ見た目と振る舞いを得られます。属性やイベントで挙動を切り替えられるため、共通部品として保守しやすくなります。
カプセル化（Shadow DOM）
Shadow DOM により内部の構造やスタイルを外側から分離します。クラス名やCSSの競合を気にせず開発できるため、大規模な画面でも安心して使えます。外部から内容を差し込むには slot を使い、必要な柔軟性も確保できます。
標準ベース・フレームワーク非依存
ブラウザの標準APIで動作するため、特定のフレームワークに縛られません。ReactやVueと併用しても問題なく動き、ライブラリを増やしたくない場面では素のまま使えます。既存アプリに段階的に導入しやすい点も便利です。
開発・運用上の利点
テストやバージョン管理がしやすく、必要なときに遅延読み込みしてパフォーマンスを改善できます。結果としてチームでの共通部品管理や長期的な保守が楽になります。
他のコンポーネント方式との違い
定義と記述の違い
Web ComponentsはHTMLElementを継承したクラスで独自要素を定義します。例：document.createElement(‘my-button’)やのように使います。一方、Reactは関数やクラスがJSXを返す構造で、と書きます。実際の記述は直感的ですが、書き方が根本的に違います。
スタイリングとスコープ
Web ComponentsはShadow DOMでスタイルを隔離します。コンポーネント内のCSSが外に漏れず、外部の影響も受けにくいです。ReactやVueはCSS Modulesやscoped styles、styled-componentsなどで同様の効果を工夫して実現しますが、仕組みは異なります。
再利用性と互換性
Web Componentsはブラウザ標準なので、フレームワークに依存せずどこでも使えます。ReactやVueのコンポーネントは基本的にそのフレームワーク内で最適に動作します。たとえば同じUIを複数のプロジェクトやフレームワークで共有したい時、Web Componentsは有利です。
ツールとビルド
Web Componentsは基本的にブラウザだけで動きますが、互換性のためのpolyfillやビルドを使う場合もあります。Reactは通常、JSXを変換するビルドツールやバンドラーが必要です。CDN配布や小さなウィジェットならWeb Componentsが手軽です。
ライフサイクルと状態管理
Web ComponentsはconnectedCallbackなどのライフサイクルメソッドを持ちます。ReactはuseEffectなどのフックで宣言的に副作用を扱います。状態管理はReactが得意で再レンダリングの仕組みが充実しています。Web Componentsは自前で更新ロジックを書くか、litのようなライブラリを使うと開発が楽になります。
どんなときに使うか
デザインシステムや社内UIパーツを配布したいとき
Web Componentsはフレームワークに依存せず配布できます。例えば、社内ライブラリとしてボタンやカードを作り、ReactやVue、既存の静的ページでも同じ見た目と振る舞いを提供したい場合に向いています。バージョン管理と互換性テストを用意すると導入がスムーズです。
他プロジェクトや他言語から同じ部品を使いたいとき
CMSのテンプレートや別言語（例: PHPで生成するページ）からも同一のUIを呼び出せます。テンプレート側でカスタム要素を読み込むだけで動くので、複数の技術栈で共通デザインを保ちやすいです。
既存ページに小さなウィジェットを埋め込みたいとき
チャットウィジェットや日付ピッカーなど、小さく独立した機能を既存サイトへ追加するときに有効です。影DOMでスタイル衝突を避けられるため、既存CSSに影響を与えにくい利点があります。ただし、重い依存や複雑なアプリ状態が必要な部品には向きません。
運用上の注意と実践的なコツ
- 名前空間（prefix）を付けてカスタム要素名を衝突させない
- スタイルと振る舞いを明確に分け、API（プロパティやイベント）を文書化する
- 小さな部品から始めて互換性テストを自動化する
- パフォーマンスが重要な場面は事前に計測する
これらを踏まえて、目的が「枯れたUIを広く・安全に配布すること」であればWeb Componentsは有力な選択肢です。
