Webサイトを構築するにあたり、ヘッダーやフッター、解析タグ等の共通部分を、一括で管理したいですよね。
そんなときは、共通部分を別ファイルに切り分け、別途管理するかと思います。

今回は、HTMLをインクルードするにあたり、**どのような方法があるか？**と、**どう使い分けるか？**をまとめました。

HTMLをインクルードする方法

HTMLをインクルードする方法は、以下の3種類に分けられるかと思います。

それぞれの特徴や、メリット・デメリットを解説考えていきます。

プリプロセッサー（テンプレートエンジン）を使い、開発時は別ファイルとして挿入し、ビルドした本番用ファイルはHTMLベタ書きになる方法です。

このあたりがメジャーですね。

結果として静的なHTMLファイルになるので、パフォーマンスは優れています。
また、フロントエンドの開発環境で完結できるので、出し分け等もしやすいです。

数ページなら気にならないかもしれませんが、数十〜数百ページになると、一個のインクルードファイルの変更が、挿入されているすべての静的HTMLファイルへの変更になってしまうので、Git等で差分がめっちゃでちゃいます。

JavaScriptを使用し、クライアントサイドで動的に要素を生成する方法です。

JavaScriptでかけるので、フロントエンド的な自由度はかなり高いですね。

プリプロセッサーと比べると、ブラウザ側で動的に挿入されるので、修正や更新時の差分は最小限で済みます。
また、こちらはプリプロセッサーと同じですが、フロントエンド側で制御できるので、ハンドリングはしやすいです。

ブラウザ側でレンダリングするので、表示速度等は少し不利になる可能性があります。

サーバーサイドで事前にレンダリングしておき、クライアントサイドでは静的な扱いとする方法です。

クライアントサイドでの動的挿入と同様に、変更・更新時の差分は最小限で済みます。
また、サーバーサイドでレンダリングを済ませておくため、ブラウザへの負担は少ないです。

サーバー環境によっては使えないものもあるので、事前に確認しておく必要があります。
（ここを忘れると、痛い目にあいます。。）
また、当たり前ですが、サーバーサイドでレンダリングすれば、その分サーバーに負荷がかかります。

上記を踏まえて、どういった使い分けが適切なのか、考えてみました。

こんな感じですかね。

それではみなさん、Enjoy HTML Include!!