articles

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

JavaScript
共通パーツをインクルード化！効率よくコーディングする方法
  • HTMLの共通パーツのインクルード方法がわからない方
  • インクルードのメリットとデメリットを知りたい方
  • JavaScriptを使ったインクルード方法を学びたい方

このような悩みを持つ方にオススメです。

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

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

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

よく使われる共通パーツには、以下のようなものがあります。

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

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

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

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

これにより、作業効率が上がり、コードの保守性が高まります。

また、ブラウザのキャッシュ機能によって、ページ遷移時の読み込み速度も向上します。

インクルードの方法

ここでは、JavaScriptを使った共通パーツのインクルード方法を紹介します。

例として、ヘッダーとフッターをインクルードしてみましょう。

必要なファイルを準備

以下のようにファイルを作成します。

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

HTMLファイルの記述

index.htmlには以下のように、インクルード先のタグを設定します。

<body>
    <header id="header"></header>
    ...
    <footer id="footer"></footer>
    <script src="./js/main.js"></script>
</body>

header.htmlとfooter.htmlにはそれぞれヘッダーとフッターの内容を記述しますが、<header>や<footer>タグ自体は含めません。

JavaScriptの記述

JavaScriptでインクルード処理を行うため、main.jsに以下のコードを記述します。

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.htmlを取得し、<header id="header">タグ内に内容を挿入します。

注意点

JavaScriptでインクルードしたファイルは、ローカルサーバー上でのみ確認できます。ローカル環境を用意するか、サーバーにアップロードして確認してください。

他のインクルード方法

JavaScript以外にも、以下のインクルード方法があります。

  • サーバーサイドインクルード (SSI)：Webサーバーが処理し、PHPやRubyなどのサーバーサイド言語を使って共通パーツをインクルードします。
  • HTMLのimport機能：HTMLのimport機能を使って別ファイルをインクルードできます。

JavaScriptを用いた方法のメリット・デメリット

メリット

  • クライアント側で処理されるため、サーバー側の負荷が少ない
  • クライアント側でキャッシュされるので、パフォーマンスの向上が期待できる

デメリット

  • JavaScriptが無効な場合、共通パーツが表示されない
  • 初回のページ表示時に読み込み時間がかかる

まとめ

共通パーツのインクルードは、HTMLの保守性と効率性を向上させる有用な手法です。

今回紹介したJavaScriptを使った方法はサーバーの負荷を軽減しますが、デメリットもあるため、適切な方法を選びましょう。

共通パーツのインクルードを活用して、作業効率を高めてください！

recommend post

ハンバーガーメニュー展開時に背景をスクロールさせない方法

CSS JavaScript

【ScrollHint】スクロール可能な要素にヒントを表示するプラグインと使い方を紹介

JavaScript

詳しいサービス内容やご相談など、
お気軽にお問い合わせください。

お問い合わせはこちら