Web Components
ブラウザネイティブの技術でカプセル化された再利用可能なUIコンポーネントを作成する仕様。Custom Elements・Shadow DOM・HTML Templatesの3つの技術で構成され、フレームワーク非依存で動作する。
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の軽量ライブラリ）と組み合わせると開発体験が改善されます。
関連する用語 (プログラミング)
全33件を見るSSR（サーバーサイドレンダリング）
Webページをサーバー側でHTMLとして生成してからクライアントに送信する手法。SPAのSEO問題を解決し、初期表示を高速化できる。Next.js・Nuxt.jsで実装されることが多い。
モノレポ（Monorepo）
複数のプロジェクトやパッケージを1つのGitリポジトリで管理する手法。コードの共有・一貫したCI/CD・依存関係の統一が容易になる。Turborepo・Nx・Yarnワークスペースで実装される。
Go / Golang (ゴー言語)
Google社が開発した、処理速度が超絶爆速で、大量のアクセスに強い現代的なプログラミング言語。
Rust (ラスト)
「処理の速さ」と「メモリの安全性（バグの出にくさ）」を両立させた、世界で最もプログラマーに愛されている次世代言語。
SPA（シングルページアプリケーション）
ページ遷移時にブラウザをリロードせず、JavaScriptで動的にコンテンツを更新するWebアプリのアーキテクチャ。React・Vue・Angularで実装されることが多い。
SSG（静的サイトジェネレーター）
ビルド時にすべてのページをHTMLとして事前生成する手法。サーバーが不要なため高速・安全・低コストで、ブログ・ドキュメントサイト・ランディングページに最適。