Webコンポーネント入門

Webコンポーネントとは？

Webコンポーネントとは、ブラウザ標準だけで使えるUI部品技術です。
フレームワークに依存せず、HTML・CSS・JavaScriptのみで 「再利用できる部品」を作れます。

• どのフレームワークでも使える
• CSSが外部に漏れない
• HTMLタグのように扱える

Webコンポーネントを構成する4要素

1. Custom Elements

独自のHTMLタグを定義します。

2. Shadow DOM

スタイルと構造をカプセル化します。

3. HTML Templates

再利用できるDOM構造を定義します。

4. ES Modules

JavaScriptとして部品を管理します。

最小構成のWebコンポーネント

class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "open" });
    shadow.innerHTML = `
      <style>
        .card {
          padding: 16px;
          border-radius: 10px;
          background: #2b2b5f;
        }
      </style>
      <div class="card">
        <slot></slot>
      </div>
    `;
  }
}
customElements.define("my-card", MyCard);

実際に使ってみる

PHPとWebコンポーネントの関係

PHPはWebコンポーネントを「作る」ためではなく、 次の役割で活躍します。

• データの取得（DB / API）
• HTMLの土台生成
• コンポーネントに渡すデータの整形

<my-card>
  <?= htmlspecialchars($message) ?>
</my-card>

表示や振る舞いはJavaScript、
データと構造はPHP、という分業が非常に相性が良いです。

Webコンポーネントが向いている場面

• デザインパーツを複数ページで使い回す
• PHPサイトを段階的にモダン化したい
• フレームワーク依存を避けたい
• 教育・学習用途

まとめ

Webコンポーネントは、Web 1.0〜4.0 を横断できる標準技術です。
HTML・CSS・JavaScript・PHPという基本構成のまま、 長く使えるUI設計が可能になります。