Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした