Web Components

Web Componentsとは？

Web Componentsは、独自のHTMLタグ（Custom Elements）を作成し、スタイルと動作をカプセル化できるブラウザネイティブのコンポーネント仕様です。ReactやVueなどのフレームワークに依存せず、あらゆるWebアプリで再利用できます。

3つの構成技術

技術	説明
Custom Elements	独自のHTMLタグを定義（<my-button>等）
Shadow DOM	コンポーネント内のDOM・CSSを外部から隔離
HTML Templates	<template>タグで再利用可能なHTMLを定義

基本的な実装例

// カスタム要素の定義
class MyButton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <button style="background: #1ebbbd; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">
        ${this.getAttribute('label') || 'クリック'}
      </button>
    `;
  }
}

// ブラウザに登録
customElements.define('my-button', MyButton);

<!-- 使用方法 -->
<my-button label="送信"></my-button>

React・Vueとの違い

項目	Web Components	React / Vue
依存関係	なし（ブラウザ標準）	ランタイムライブラリが必要
状態管理	手動	宣言的・便利
エコシステム	小さい	非常に豊富
再利用範囲	どんな環境でも	同フレームワーク内

まとめ

Web Componentsはデザインシステムの共通UIコンポーネントをフレームワーク横断で配布したい場合に有力な選択肢です。Lit（Googleの軽量ライブラリ）と組み合わせると開発体験が改善されます。