Webサイトを構築するにあたり、ヘッダーやフッター、解析タグ等の共通部分を、一括で管理したいですよね。
そんなときは、共通部分を別ファイルに切り分け、別途管理するかと思います。
今回は、HTMLをインクルードするにあたり、**どのような方法があるか？**と、**どう使い分けるか？**をまとめました。
HTMLをインクルードする方法
HTMLをインクルードする方法は、以下の3種類に分けられるかと思います。
- プリプロセッサーでの静的挿入
- クライアントサイドでの動的挿入
- サーバーサイドでの動的挿入
それぞれの特徴や、メリット・デメリットを解説考えていきます。
プリプロセッサーでの静的挿入
プリプロセッサー（テンプレートエンジン）を使い、開発時は別ファイルとして挿入し、ビルドした本番用ファイルはHTMLベタ書きになる方法です。
- EJS
- Pug
このあたりがメジャーですね。
メリット
- 静的なため高速
- ハンドリングしやすい
結果として静的なHTMLファイルになるので、パフォーマンスは優れています。
また、フロントエンドの開発環境で完結できるので、出し分け等もしやすいです。
デメリット
- 修正時、差分が大量に出る
数ページなら気にならないかもしれませんが、数十〜数百ページになると、一個のインクルードファイルの変更が、挿入されているすべての静的HTMLファイルへの変更になってしまうので、Git等で差分がめっちゃでちゃいます。
クライアントサイドでの動的挿入
JavaScriptを使用し、クライアントサイドで動的に要素を生成する方法です。
- document.createElement & element.appendChild
- jQuery .html()
- Vue.js コンポーネント
- React JSX
- HTML Modules for Web components
JavaScriptでかけるので、フロントエンド的な自由度はかなり高いですね。
メリット
- 修正時の差分は、インクルードするファイルだけでOK
- ハンドリングしやすい
プリプロセッサーと比べると、ブラウザ側で動的に挿入されるので、修正や更新時の差分は最小限で済みます。
また、こちらはプリプロセッサーと同じですが、フロントエンド側で制御できるので、ハンドリングはしやすいです。
デメリット
- ブラウザへの負担が大きい
ブラウザ側でレンダリングするので、表示速度等は少し不利になる可能性があります。
サーバーサイドでの動的挿入
サーバーサイドで事前にレンダリングしておき、クライアントサイドでは静的な扱いとする方法です。
- SSI
- PHP include
- ユニバーサルJavaScript SSR
メリット
- 修正時の差分は、インクルードするファイルだけでOK
- ブラウザへの負担が少ない
クライアントサイドでの動的挿入と同様に、変更・更新時の差分は最小限で済みます。
また、サーバーサイドでレンダリングを済ませておくため、ブラウザへの負担は少ないです。
デメリット
- サーバーの対応状況により、使いないことがある
- サーバー側に負担がかかる
サーバー環境によっては使えないものもあるので、事前に確認しておく必要があります。
（ここを忘れると、痛い目にあいます。。）
また、当たり前ですが、サーバーサイドでレンダリングすれば、その分サーバーに負荷がかかります。
使い所
上記を踏まえて、どういった使い分けが適切なのか、考えてみました。
プリプロセッサーでの静的挿入
- 少しでも速く！
- ページ数が少ない
- 本番サーバーを握っている（お客さんやシステム担当者にファイル納品する場合は、差分が多いとちょっと嫌ですよね）
クライアントサイドでの動的挿入
- ページ数が多い（コミット時の差分を減らしたい）
- サーバーの仕様が不明
- サーバーサイドでレンダリングすることができない
- クライアントサイドで動的に変化させたい
サーバーサイドでの動的挿入
- ページ数が多い（コミット時の差分を減らしたい）
- サーバーサイドでレンダリングすることができる
- サーバーが強力
こんな感じですかね。
それではみなさん、Enjoy HTML Include!!