最終更新日: 2020年10月29日

    HTMLで共通部分をインクルードして使い回す方法は？

    HTMLでヘッダー・フッターなど全ページで共通のパーツをインクルード（include）する方法についてその選択肢を解説していきます。ぜひ適切なインクルード方法を選択して下さい！

    コンテンツ [表示]

    1. 1HTMLで共通部分をインクルードして使い回したい
    2. 1.1保守性が低い
    3. 1.2インクルード（include）とは？
    4. 2HTMLで共通部分をインクルードして使い回す方法の選択肢は？
    5. 2.1iframeを利用する
    6. 2.2JavaScriptでAjaxを利用する
    7. 2.3PHPなどプログラミング言語を利用する
    8. 2.4gulpなどフロントエンドの開発ツールを利用する
    9. 2.5SSI
    10. 3まとめ

    HTMLで共通部分をインクルードして使い回したい

    HTMLで複数ページを開発していると、共通部分を使いまわしできないかなと思うことはないでしょうか？

    例えばヘッダーや、フッターなど特定のパーツは全ページで共通で真ん中のメインのコンテンツだけがページごとに違うといった場合です。

    ヘッダーやフッターなどの共通部分を10ページある

    もしもサイトが10ページあれば、ヘッダーやフッターなどの共通部分を10ページ分コピペする必要が出てきます。

    このコピペするやり方には以下の問題があります。

    保守性が低い

    例えばヘッダーや、フッターなどで一部分の文言が変わった。フッターにある西暦の2020年が2021年にかわったなどといった場合、もしもHTMLタグ自体をコピペした場合はその修正作業を10回繰り返す必要があり、非効率です。

    また10回同じ作業を繰り返さないといけないため、1回だけの作業に比べ途中で抜け漏れが発生しやすいです。

    9ページは問題がないが、1ページだけ更新しなかった。。。というように抜け漏れが発生します。

    インクルード（include）とは？

    そこで共通部分は別で切り出して、インクルードして使いまわそうという発想が出てくるかと思います

    インクルードとは「別で切り出された内容を取り込む」という意味で、例えば共通のヘッダーを別のファイルに切り出しそれをインクルードすることで、共通ヘッダーを全ページで利用できるようになります。

    PHPやRubyなどの言語のフレームワークでは名前は違えどその概念や仕組みとして用意されています。
    ※PHPではまさにincludeという名前で用意されています。

    HTMLで共通部分をインクルードして使い回す方法の選択肢は？

    HTMLで共通部分をインクルードして使い回す方法はかなりの選択肢があります。

    iframeを利用する

    HTMLに別のコンテンツを挿入できるiframeを使うことでも実現出来ます。実装自体は一番低コストで実現できる方法ではないでしょうか。

    ただしこのやり方の場合はiframe部分の読み込みが期待どおりに行かなかったり、高さの調整が効かなかったりなどデメリットも存在します。

    JavaScriptでAjaxを利用する

    iframeの方法と近いですが、コンテンツを非同期で読み込めるAjaxをJavaScriptを使って利用することでも実現できます。

    index.js

    fetch("header.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
    document.querySelector("header").innerHTML = data;
  });

fetch("footer.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
    document.querySelector("footer").innerHTML = data;
  });

    もしやりにくいという方はjQueryなどJSのライブラリを使ってもいいですが、ここではFetch APIを使って別ファイルに切り出したheader.htmlとfooter.htmlを読み込み、コールバックでheader、footerそれぞれのタグの内部に適用しています。

    PHPなどプログラミング言語を利用する

    PHPなどプログラミング言語をHTMLと組み合わせると簡単に実装できます。例えば共通ヘッダーをheader.html共通フッターをfooter.htmlというファイルに切り出し下記のようにします。

    phpとの組み合わせ

    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
   <?php include "header.html" ?>

   メインコンテンツ

   <?php include "footer.html" ?>
</body>
</html>

    gulpなどフロントエンドの開発ツールを利用する

    gulpやGruntなどフロントエンドの開発ツールを利用することでも、共通ヘッダー・共通フッターを切り出して、インクルードすることが出来ます。

    PHPなどのプログラミング言語を利用しなくても実現が可能です。

    gulpなどフロントエンド開発ツールを利用

    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  @@include('header.html')
  
  メインコンテンツ
  
  @@include('header.html')
</body>
</html>

    SSI

    ApacheなどのWEBサーバーでは「SSI（Server Side Include）」という機能があります。これはWEBサーバー側でHTML中に指定した目印を、WEBサーバー側で書き換える仕組みです。

    例えばヘッダー、フッター用の目印を用意しておいてそれをSSIを使って書き換える事をすれば目的を達成することが出来ます。

    SSI

    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <!--#include file="header.html" -->  
  
  メインコンテンツ
  
  <!--#include file="footer.html" -->
</body>
</html>

    ただしWEBサーバー側で一つ処理が入るため、そのままHTMLを返すよりも仕事が増えレスポンスが遅くなるといったデメリットも存在します。

    まとめ

    HTMLで共通的に使える部品をインクルードさせる方法とその主だった選択肢について解説してきました。

    WEB開発の仕組みの選択肢が増えてきた現在ではフロントエンド、サーバーサイドでもインクルードする方法の選択肢が増えてきました。今回紹介した数以上に、更に選択肢があります。

    どの選択肢を選ぶかは、ぜひ一度試して頂いた上で、やりやすいもので実装してみて下さい！

    GeekHive採用サイト

    関連記事