Prompt
JavaScriptを使用せずに、ヘッダ, フッタなどの固定のHTMLを埋め込む方法は？
よう！👍 JavaScriptを使わずにヘッダーやフッターみたいな固定のHTMLを埋め込む方法だね。いくつか方法があるから、それぞれの特徴をみていこう！
サーバーサイドインクルード (SSI)
サーバーサイドインクルード（SSI）は、サーバーがHTMLファイルをクライアントに送信する前に、別のファイルの内容を埋め込む技術だよ。これを使うと、ヘッダーやフッターを別の.htmlや.incファイルとして用意して、それを各ページに読み込むことができる。
使い方はとってもシンプル！
HTML
<main>
<h1>コンテンツ</h1>
<p>ページのメインコンテンツだよ。</p>
</main>
-
メリット:
-
クライアント側での処理が不要だから、速くてシンプル！
-
SEOにも強いよ。検索エンジンが完全なHTMLを受け取れるからね。
-
Webサーバー（ApacheやNginx）が対応していることが多い。
-
-
デメリット:
-
Webサーバーの設定が必要な場合がある。
-
ローカル環境では動かない。必ずサーバーにアップロードする必要がある。
-
PHPインクルード
PHPインクルードは、PHPが動くサーバーでのみ使える方法だよ。PHPのincludeやrequire関数を使って、別のファイルの内容を読み込むんだ。PHPを少しでも知ってる君にはお手の物かもね！
PHP
<?php include 'header.html'; ?>
<main>
<h1>コンテンツ</h1>
<p>ページのメインコンテンツだよ。</p>
</main>
<?php include 'footer.html'; ?>
-
メリット:
-
サーバー側で処理されるから、JSが無効な環境でも問題なし！
-
SSIよりも柔軟で、動的なコンテンツも埋め込める。
-
多くのレンタルサーバーで標準的に使える。
-
-
デメリット:
-
ファイル拡張子を
.htmlから.phpに変える必要があることが多い。 -
当然だけど、PHPが動作する環境じゃないと使えない。
-
HTML5 <template> タグ
これは少し変わった方法だけど、JavaScriptを実行せずにHTMLに要素を配置する方法として使われることがあるよ。JavaScriptは必要だけど、DOMを動的に操作するわけじゃない。
<template>タグの中身は、ページの読み込み時にはレンダリングされない。JavaScriptを使って中身のコンテンツをクローンして、必要な場所に挿入するんだけど、今回はJavaScriptを使わない方法だから、少し例外的な話として聞いてね。
HTML
<template id="header-template">
<header>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
</ul>
</nav>
</header>
</template>
これはJavaScriptでコンテンツを読み込むための「テンプレート」として使うことが多いから、今回の要件である「JavaScriptを使わない」っていう厳密な意味ではちょっと違うかも。でも、こういう方法もあるって知っておくと、将来の引き出しが増えるかもね！
まとめ
結論として、最もポピュラーで確実なのはサーバーサイドインクルード（SSI）かPHPインクルードだよ。どっちもサーバー側で処理が完結するから、クライアントサイドのJSに依存しないのが強み。
君は情報工学を学んでるし、JavaとかPHPも経験済みだから、PHPインクルードはすぐに理解できるはず！Webサーバーを自分で設定するならSSIも面白い選択肢になるかもね。
自分に合った方法を選んで、楽しく開発を進めていこう！😊