MENU

【JavaScript】共通パーツをインクルード化！効率よくコーディングする方法

広告
JavaScript
  • URLをコピーしました！

こんにちは。すずきです。

この記事ではHTMLの共通パーツをインクルードする方法について解説します。

このような人にオススメ
  • HTML共通パーツのインクルードが分からない
  • インクルードによるメリット・デメリットが分からない
  • JavaScriptを用いたインクルード方法を知りたい
目次

共通パーツのインクルードとは

共通パーツのインクルードとは、複数のHTMLファイルに共通するパーツを別のファイルにまとめて、そのファイルを各HTMLファイルに取り込むことです。

例えば共通パーツには以下のようなものがあります。

  • ヘッダー
  • フッター
  • ナビゲーションメニュー　など

共通パーツをインクルードするメリット

共通パーツをインクルードすることで、以下のようなメリットがあります。

  • 同じHTMLコード何度も書く必要がなくなる
  • 変更時に一箇所の修正で済むため、コードの保守性が向上する
  • ページの読み込み速度が向上する

このように、共通パーツをインクルードすることで、同じHTMLコード何度も書く必要がなくなります。
変更や修正の際も1箇所の変更だけで済むので、保守性が上がり作業時間の短縮にもつながります。
必要なキャッシュはブラウザの方で保存してくれているので、他ページに遷移した時に読み込み速度も向上します。

インクルードの方法

ここからは実際に共通パーツをインクルードする方法について紹介します。
今回はJavaScriptを使用し、例としてheaderfooterをインクルード化していきます。

ファイルを用意

まずは必要ファイルを作成します。
表示するindex.html、インクルードするファイルをまとめるinclude
includeの中にheader.htmlfooter.html
インクルード処理を記述するmain.jsをjsに作成しています。

├─ include
│ └─ footer.html
│ └─ header.html
├─ js
│ └─ main.js
├─ index.html

各HTMLファイルを記述

次に各HTMLを記述していきます。

    ・
    （省略）
    ・ 
  <body>
    <header id="header"></header>
    ・
    （省略）
    ・
    <footer id="footer"></footer>
    <script src="./js/main.js"></script>
  </body>
</html>

<div class="header__container">
  <h1 class="header__title">サイトタイトル</h1>
  <button class="header__trigger">
    <span></span>
    <span></span>
    <span></span>
  </button>
  <nav class="gnav">
    <ul class="gnav__menu">
      <li class="gnav__item">
        <a class="gnav__link" href="#">リンク</a>
      </li>
      ・
      ・
      ・
    </ul>
  </nav>
</div>
<div class="footer__container">
  <div class="footer__title">サイトタイトル</div>
  <div class="footer__nav">
    <ul class="footer__menu">
      <li class="footer__item">
        <a class="footer__link" href="#">リンク</a>
      </li>
      ・
      ・
      ・
    </ul>
  </div>
</div>
<div class="copyright">
  <p>© サイトタイトル</p>
</div>

ここでポイントは<header>、<footer>タグはindex.htmlに記述されているので、インクルード先のファイルには記述しない事です。
<header>、<footer>タグが重複して表示されてしまいます。

index.htmlに記述しているタグは、インクルード先のファイルには記述しない

JavaScriptの記述

最後にインクルードする為のJavaScriptを記述していきます。

まずはXMLHttpRequestオブジェクトを使用し、インクルードするファイル（ここではheader.html）を取得します。

const includeHeader = new XMLHttpRequest();
includeHeader.open("GET", "include/header.html", true);
includeHeader.onreadystatechange = function () {
  if (includeHeader.readyState === 4 && includeHeader.status === 200) {
    const headerHTML = includeHeader.responseText;
    // header.htmlを処理するためのコードをここに追加します
  }
};
includeHeader.send();
MDN Web Docs
XMLHttpRequest – Web API | MDN XMLHttpRequest (XHR) オブジェクトは、サーバーと対話するために使用されます。ページ全体を更新する必要なしに、データを受け取ることができます。これでユーザーの作業…

取得したHTMLコードを<header id="header">タグに挿入します。
<header id="header">タグに追加するにはinsertAdjacentHTML()メソッドを使用します。

const header = document.querySelector("#header");
header.insertAdjacentHTML("afterbegin", headerHTML);
MDN Web Docs
Element: insertAdjacentHTML() メソッド – Web API | MDN insertAdjacentHTML() は Element インターフェイスのメソッドで、指定されたテキストを HTML または XML として解釈し、結果のノードを DOM ツリーの指定された位置に挿入…

id="header"の取得にはdocument.querySelector()メソッドを使用しています。

MDN Web Docs
Document: querySelector() メソッド – Web API | MDN Document の querySelector() メソッドは、指定されたセレクターまたはセレクター群に一致する、文書内の最初の Element を返します。一致するものが見つからない場合は nu…

完全なJavaScriptコードは以下のようになります。

const includeHeader = new XMLHttpRequest();
includeHeader.open("GET", "include/header.html", true);
includeHeader.onreadystatechange = function () {
  if (includeHeader.readyState === 4 && includeHeader.status === 200) {
    const headerHTML = includeHeader.responseText;
    const header = document.querySelector("#header");
    header.insertAdjacentHTML("afterbegin", headerHTML);
  }
};
includeHeader.send();

こちらのコードで<header id="header">タグ内にheader.htmlのコンテンツを取得して挿入できます。

JavaScriptでインクルードしたファイルは、ローカルサーバーでは確認できません。
ローカル環境を用意するか、サーバーにアップして確認する必要があります。

他のインクルード方法

今回はJavaScriptを使用したインクルード方法を紹介しましたが、他にもインクルードする方法があります。
他のインクルード方法には以下のようなものがあります。

サーバーサイドインクルード (SSI)

SSIは、Webサーバーで処理される方法であり、HTMLファイル内に指定した共通パーツのパスを記述することで、別ファイルをインクルードすることができます。サーバーサイドの言語としては、PHPやRubyなどが使われます。

HTMLのimport機能

HTMLのimport機能を使用することで、HTMLファイル内に別ファイルをインクルードすることができます。

それぞれの方法にはメリットやデメリットがありますので、目的や環境に応じて適切な方法を選択する必要があります。

JavaScriptを用いた方法にはどんなメリットやデメリットがあるのか、以下で解説していきます。

JavaScriptを使用することのメリット・デメリット

インクルード化にJavaScriptを使用することのメリット・デメリットは以下のようなものがあります。

メリット
  1. クライアント側で処理されるため、サーバー側での処理を必要とせず、負荷が少なくなります。
  2. クライアント側で共通パーツをキャッシュすることができ、パフォーマンスの向上が見込めます。
デメリット
  1. JavaScriptが無効になっている場合、正常に共通パーツが表示されない場合があります。
  2. 初回のページ表示時に、共通パーツの読み込みが必要となるため、表示速度が遅くなる場合があります。
  3. 画像などのリソースが含まれる場合、リソースの読み込みに時間がかかる場合があります。

JavaScriptを使用してHTML共通パーツをインクルードすることには、クライアント側での処理や動的な操作が可能となるメリットがありますが、JavaScriptが無効になっている場合や初回のページ表示時の表示速度が遅くなるといったデメリットがあります。

終わりに

HTML共通パーツのインクルードは、重複コードを減らして保守性や修正性の向上につながるメリットがあります。

今回紹介したJavaScriptを使用したインクルードは、サーバー側での負荷が少なくなるというメリットがありますが、初回のページ表示時に表示速度が遅くなるといったデメリットがあります。
また、JavaScriptが無効になっている場合には正常に共通パーツが表示されない場合があります。

それぞれのインクルード方法にはメリットとデメリットがあるため、使用目的や環境に合わせて適切な方法を選択する必要があります。

HTML共通パーツのインクルードを活用すれば、重複コードを減らし、保守性や修正性を向上できます。是非、活用して効率化を図りましょう！

Web制作に使えるおすすめの書籍

私が実際に購入して役に立った書籍を紹介します。
気になる本があればぜひ読んでみてください！

JavaScript
  • URLをコピーしました！
目次