Webサイトを制作していると、ヘッダー・フッター・ナビゲーションなど共通部分をまとめて管理したいと思う場面が多くあります。
ReactやAstro、WordPressのようなフレームワークを使わなくても、実は純粋なHTML（バニラHTML）でもコンポーネント化する手段はいくつか存在します。ここでは代表的な方法と特徴を整理します。
1. サーバーサイドインクルード（SSI）
もっともシンプルで歴史のある方法が サーバーサイドインクルード（SSI） です。
.shtml などの拡張子を使い、サーバーがページを生成する際に共通部分を自動で読み込みます。
メリット：設定が軽量、HTMLだけで完結
デメリット：対応していないサーバーもある
用途：小規模サイトや静的ページの共通化に最適
Xserverなど多くのレンタルサーバーでサポートされているため、HTMLをそのまま使いつつ共通化したい場合に手軽です。
2. PHPの include を利用する
拡張子を .php に変更して、PHPの include 機能を使う方法です。
ヘッダーやフッターなどを別ファイル化し、必要な箇所で呼び出します。
メリット：ほとんどのレンタルサーバーで対応、柔軟性が高い
デメリット：拡張子が.phpに変わる、サーバーがPHP対応である必要
用途：静的HTMLをベースにした中〜大規模サイト
「HTMLサイトだけどヘッダーやフッターを一括管理したい」というケースに最も使われる定番の方法です。
3. JavaScriptでの読み込み（Fetchなど）
ブラウザの JavaScriptで外部HTMLファイルを読み込む方法 もあります。
fetch APIや古い XMLHttpRequest を使って、別ファイルを取得しDOMに差し込みます。
メリット：サーバーの設定不要、ローカルでも動く
デメリット：JavaScript依存、SEOへの配慮が必要
用途：小〜中規模サイト、静的ホスティング
NetlifyやGitHub Pagesのようにサーバー機能が限られている環境でも活用できます。
4. ビルドツールを利用する（EJS/Pugなど）
npmで導入できるテンプレートエンジン（EJSやPugなど）を使い、開発時にHTMLを分割してビルド時に統合する方法です。
最終的には純粋なHTMLとして出力されます。
メリット：開発効率が高く、複雑なレイアウトも管理しやすい
デメリット：npmなどの環境構築が必要、初心者にはややハードルが高い
用途：中〜大規模サイト、長期的な保守が必要なプロジェクト
AstroやNext.jsのようなフレームワークに比べてシンプルですが、HTMLを「部品化」してビルドする点は同じ考え方です。
まとめ
純粋なHTMLであっても、**「共通パーツを一括管理する＝コンポーネント化」**は十分可能です。
レンタルサーバーを使うなら PHPのinclude、静的ホスティングなら JavaScriptのfetch、長期的な拡張を見据えるなら EJSやPug といった選び方がおすすめです。
