Web Componentsとは?

「再利用可能なオリジナルHTMLタグを自分で作れる仕組み」です。

  • フレームワーク不要
  • ブラウザ標準機能だけで動く
  • カプセル化（CSSやJSが外に漏れない）

👉 つまり、“自作UIパーツをネイティブで作る技術”です。

通常のHTMLはこうですよね：

<button>送信</button>

Web Componentsを使うと、こんなことができます：

<my-button>送信</my-button>

👉 この <my-button> を自分で新たに定義できます。

Web Componentsの3つの要素

Web Componentsは、以下の3つで構成されています。

  1. Custom Elements（カスタムタグ）

独自のHTMLタグを定義

  1. Shadow DOM（カプセル化）

スタイルや構造を外から隔離

  1. HTML Templates

テンプレートとして再利用

まずは最小構成で作ってみる

手順①：JavaScriptでクラスを作る

class MyHello extends HTMLElement {
  connectedCallback() {
    this.innerHTML = "<p>Hello Web Components!</p>";
  }
}

手順②：カスタムタグとして登録

customElements.define("my-hello", MyHello);

手順③：HTMLで使う

<my-hello></my-hello>

👉 これだけで動きます。

Shadow DOMで「ちゃんとしたコンポーネント」にする

普通に書くとCSSがコンポーネントの外側と干渉します。 そこでShadow DOMを使います。

改良版コード

class MyHello extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        p {
          color: red;
        }
      </style>
      <p>Hello Shadow DOM!</p>
    `;
  }
}

customElements.define("my-hello", MyHello);

👉 この p { color: red } は外に影響しません。

よくある実用例

  • ボタンコンポーネント
<my-button label="保存"></my-button>
  • カードUI
<user-card name="山田太郎"></user-card>
  • モーダル
<my-modal></my-modal>

👉 UI部品の「使い回し」に強いです。

メリット

✔ フレームワーク不要

ReactやVueがなくてもOK

✔ 再利用性が高い

一度作ればどこでも使える

✔ カプセル化が強い

CSS地獄から解放される

デメリット（重要）

❌ 学習コストが少し高い

最初は「なぜ動くのか」分かりにくい

❌ 状態管理が弱い

大規模アプリは工夫が必要

❌ 古いブラウザ対応が面倒

（ただし今はほぼ問題なし）

フレームワークとの違い

項目 Web Components React / Vue
依存 なし あり
学習コスト 中 中〜高
柔軟性 高い 非常に高い
保守性 設計次第 比較的楽

👉 小さな部品 → Web Components 👉 大規模アプリ → フレームワーク

実務での使いどころ

かなり重要です👇

向いているケース

  • デザインシステム
  • UIライブラリ
  • 複数プロジェクトで使い回す部品
  • フレームワークをまたぐ開発

向いていないケース

  • 大規模SPA（状態管理が複雑）
  • チームで統一されたフレームワークがある場合

よくある勘違い

❌ 「Reactの代わりになる？」

👉 完全な代替ではない

❌ 「これだけでアプリ作れる？」

👉 作れるが、設計力が必要

まとめ

Web Componentsは：

  • ネイティブで動くUIコンポーネント技術
  • フレームワークに依存しない
  • 再利用性が非常に高い

👉 特に **「軽量・共通部品・長く使うUI」**に最適です。