Posted at

クライアントサイドから考えた、HTMLをインクルードする3つの方法

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!!