Web Components

Web Componentsとは

Web Components は、ブラウザ標準の仕組みだけで再利用可能なUI部品(独自タグ)を作る技術の総称です。[[React]] や [[Vue.js]] のようなフレームワークを使わずに、<my-button> のような自分だけのタグを [[HTML]] に追加できます。

フレームワーク製のコンポーネントは、そのフレームワークの中でしか使えません。Web Components は標準技術なので、どのフレームワークとも(あるいは素のHTMLとも)組み合わせて使えるのが最大の特徴です。

3つの柱

技術役割
Custom Elements独自タグを定義し、[[JavaScript]] のクラスと結びつける
Shadow DOM部品の内部の [[DOM]] とCSSを外部から隔離する
HTML Templates<template> タグで、表示されない雛形マークアップを用意する
class MyButton extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>button { color: white; background: navy; }</style>
      <button><slot></slot></button>
    `;
  }
}
customElements.define('my-button', MyButton);

これで <my-button>送信</my-button> と書くだけで、スタイル付きのボタンとして表示されます。

Shadow DOMの隔離効果

Shadow DOM の中の CSS は外に漏れず、外の CSS の影響も受けません。ページ側にどんなスタイルがあっても部品の見た目が壊れないため、「どこに置いても同じ見た目」を保証できます。カプセル化されたスタイルは、大規模開発でのCSS衝突問題への標準的な答えの一つです。

初学者向けポイント

  • 独自タグの名前にはハイフンが必須です(my-button は可、mybutton は不可)。標準タグとの衝突を防ぐためのルールです
  • ブラウザの標準機能なので、追加のライブラリを読み込まなくても動きます
  • 実務では「デザインシステムの部品を複数フレームワークのプロジェクトで共有したい」という場面で採用されることが多い技術です

関連技術とのつながり

  • [[HTML]] — 独自タグはHTMLの語彙を拡張するもの
  • [[JavaScript]] — Custom Elements はJSのクラスとして定義する
  • [[DOM]] — Shadow DOM は通常のDOMツリーから隔離された小さなツリー
  • [[React]] — フレームワーク製コンポーネントとの違いを比べると理解が深まる
Q: Web Componentsの最大の特徴はどれ?
- [x] ブラウザ標準の仕組みだけで、フレームワークに依存しない部品を作れる
- [ ] Reactの内部でのみ動作する
- [ ] サーバーサイドでHTMLを生成する
解説: Web Componentsは標準技術なので、特定のフレームワークに依存せず、素のHTMLとも組み合わせて使えます。

Q: Shadow DOMの効果として正しいのはどれ?
- [ ] 通信内容を暗号化する
- [x] 部品内部のDOMとCSSを外部から隔離する
- [ ] ページの読み込みを並列化する
解説: Shadow DOMの中のCSSは外に漏れず、外のCSSの影響も受けないため、部品の見た目を保証できます。

Q: 独自タグ(Custom Elements)の名前のルールとして正しいのはどれ?
- [ ] 大文字で始めなければならない
- [ ] 数字を含めてはいけない
- [x] ハイフンを含めなければならない
解説: 標準タグとの衝突を防ぐため、my-button のようにハイフンを含む名前が必須です。