もう何度も同じコードは書かない!HTMLの共通部分をインクルードする方法を解説

2022.09.01
html インクルード

HTMLのコードを書いている時に、

「何回も同じHTMLを書くのは面倒」

「ヘッダーの一部分だけ修正するのに、何十ページも直さないといけない…」

と思ったことはありませんか?

100種類以上もの要素があるHTMLですが、よく使用するコードは大体似ているものが多いですよね。

そこで今回は、HTMLコードの共通部分をコピペせずに使い回しできるインクルードについて解説します。

この記事を読んでわかることは以下の通りです。

  • インクルードの基礎知識
  • インクルードを使うための4つの方法
  • インクルードの動作を確認する時の注意点

インクルードを使用することで、修正も一部分のみで済みます。

何ページもあるWebサイトを作る際にかなり便利な機能ですので、今回の記事をきっかけに試しに使ってみてくださいね。

インクルードとはなにか?

インクルードとは、「あるファイルの中に別のファイルを組み込みむこと」を意味するIT用語です。

Web制作においては、各ページで共通する部分のソースコードを一つのファイルとし、別ページで読み込むことを「インクルード化」すると表現されています。

HTMLでは、ヘッダーやフッターなどをインクルード化することで、各ページ使いまわすことができるようになります。

共通部分をインクルード化することで得られるメリットは、主に以下の2つ。

  • 何度も同じソースコードをコピペする必要がない
  • 共通部分の修正が楽

ソースコードを使いまわせるようになるので、何度も同じコードをコピペする必要がなくなります。

また、共通部分のソースコードを修正する際は、元となるソースコードの修正のみなのでいくつも同じ修正をしなくて済みます。

共通部分は、ヘッダーとフッター以外にも、サイドバー、headタグ内なども含まれるので様々な部分をインクルード化できますよ。

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

Web制作者にとって、とても魅力的なインクルードですがHTMLのみでは使用できません。

HTMLの共通部分をインクルード化する方法は、以下の4つの中から選択する必要があります。

  1. JavaScriptを使う
  2. PHPを使う
  3. SSI(Server Side Include)を使う
  4. CMSを使う(WordPressでのインクルード)

いずれもHTMLをインクルード化することが可能ですが、ぞれぞれメリットもデメリットもあります。

また、使用したことがない言語や環境でインクルード化するのは逆に手間になってしまうかもしれません。

ただし、慣れてしまえばどの方法でも利用しやすいので自分に合っている方法を見つけくださいね。

今回は、ヘッダーのコードを記述したheader.htmlをインクルードすると仮定して、それぞれの方法を解説します。

1.JavaScriptを使う

今回は、AjaxというJavaScripの機能を使います。

また、コードがシンプルなのでjQueryのJSライブラリを使用しています。

まずはHTMLファイルを作成します。インクルードする方と、される方のファイル合計2つを作りましょう。

ファイル名はなんでも良いですが、今回はインクルードする方をindex.htmlとします。

インクルードされる方を、header.htmlとします。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <title>Document</title>
</head>
<body>
  indexページです。
  <script src="sample.js"></script>
  <script>header();</script>
</body>
</html>

こちらのコードによってjQueryを使用できるようになります。CDNという仕組みでjQueryを読み込んでいます。

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

以下のコードの説明は後で行います。

  <script src="sample.js"></script>
  <script>header();</script>

次に、header.htmlです。同じディレクトリの中に作りましょう。

index.htmlと同じフォルダの中に作ってくださいね。

header.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <header>ヘッダー部分です</header>
</body>
</html>

では、インクルードをさせるために必要なJavaScriptのファイルを作っていきましょう。

sample.jsという名前で作成してください。以下のように記述します。

function header(){
    $.ajax({
        url: "header.html",
        cache: false,
        success: function(html){
            document.write(html);
        }
    });
}

こちらはheader.htmlファイルをhtml内に適用するという処理を、header()関数として定義しています。

ここで、先程の二行の記述を思い出してみましょう。

  <script src="sample.js"></script>
  <script>header();</script>

こちらが、sample.jsを呼び出して、その中のheader()を実行しています。

この記述により、index.html内でheader.htmlが呼び出されるのです。

JavaScriptは、他の機能やPHPを使用した方法と異なり、サーバーの設定やソフトの購入などをしなくてもインクルード化できることがメリットです。

デメリットはコードが少し長くなるという点ぐらいです。

2.PHPを使う

PHP言語で決まりのコードとinclude、読み込みたいファイル名のみで、簡単にインクルード化できます。

ただし、PHPが使えるように.accessの設定などを行わなければ、ローカル上で確認できないなどの手間もかかります。

共通部分を表示させたい別ファイルに、以下のように記述するだけでPHPによるインクルード化ができます。

<?php include "header.html" ?>

3.SSI(Server Side Include)を使う

HTML中に指定した目印をWebサーバー側で書き換える「SSI(Server Side Include)」という仕組みを利用してインクルード化することも可能です。

この機能はApacheなどのWebサーバーにデフォルトで備わっています。

例えば、共通部分を表示させたい別ファイルに以下のように記述します。

<!--#include file="header.html" --> 

PHPと同様に簡単なコードの記述のみでインクルード化できる点がメリットです。

ただし、Webサーバー側での処理になるため、そのままHTMLを返すよりも処理が増えパフォーマンスが低下するというデメリットもあります。

4.CMSを使う(WordPressでのインクルード)

CMSやDreamweaverなどのソフトを使用する方法もあります。

今回は、世界中で多く利用されているWordPressでのインクルード方法について解説します。

WordPressで使用される言語はHTMLやCSS、PHPがメインですが、一部のPHPは独自の言語を使用しています。

ファイルの構造もWordPressならではで、テーマファイル内で使用するファイル名は「header.php」や「footer.php」などすでに決められています。

そのため、「header.html」で作成したファイルをWordPressの「header.php」に書き換えるという手間が発生します。

また、他にもWordPressのインストールや必要ファイルの作成なども必要です。

しかし、共通部分のheader部分を表示するには、以下一文のみで済みます。

<?php get_header(); ?>

また、htmlタグやbodyタグといった基礎的なコードを記述する必要もありません。

一度インクルード化してしまえば、他の方法よりも簡単に使い回しできると言えるでしょう。

インクルードの動作確認はローカルサーバーで行う

インクルードしたHTMLファイルは、そのまま開いても動作しません。

しかし、サーバーにアップロードするのは面倒ですし、動作確認の段階で公開されてしまうのは避けたいものです。

このような理由から、インクルードの動作確認の際には、PHPなどの動作確認ができるローカルサーバーを使用するのがおすすめです。

ローカルサーバーには、「MAMP」や「XAMPP」などがあります。

ローカルサーバーの使い方や特徴について知りたい方は、以下の記事が参考になります。

【初心者向け】PHPで掲示板を作る手順をわかりやすく解説

【初心者向け】MacでPHPを使う時の開発環境の作り方【MAMP】

静的HTMLの共通部分はインクルードして効率アップ!

会社や飲食店のHP、ブログサイトなどはHTMLページを何ページも用意しなければなりません。

しかし、ヘッダーやフッターなど全ページに共通する部分まで記述していては、いくらコピペでも大変な作業になります。

また、修正する際にすべてのページを書き換えるという手間もかかります。

今回解説したインクルードは、そんな悩みを解決してくれる素晴らしい機能です!

以下はこの記事のまとめです。

  • インクルードはHTMLの共通部分を使い回しできる便利な機能
  • 初心者にはJavaScripでのインクルード化がおすすめ
  • 慣れてくればPHPやSSIでのインクルード化が簡単
  • 必要に応じてWordPressでのインクルード化も

自分に合っている方法でHTMLをインクルード化して、もっと快適にコーディングしましょう!

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5