Home
HTML
Ajaxを使用したheaderとfooterの共通化【JavaScript】

Ajaxを使用したheaderとfooterの共通化【JavaScript】

公開日
2022.03.05
更新日
2022.04.02
Ajaxを使用したheaderとfooterの共通化【JavaScript】

どうも!かけちまるです!

いきなりですが、HTMLで制作した静的なWebサイトのheaderのような全ページで共通な部分をどのようにしているでしょうか?

HTMLごとにheaderを書いていると変更があったときにページ数が多いほど変更箇所が多くなってきますよね。

WordPressのようなCMSでは共通化する機能がありますし、HTMLではなくPHPで制作すれば共通化できるのですが、ファイル名が「~.php」になったり、サーバーによっては設定が必要になったりするのでJavaScriptのAjaxという技術を使って共通化を実装できればと思います。

この記事では、

  • ・Ajaxでheaderを共通化する方法
  • ・共通ファイルが読み込まれないときの対処法
  • ・階層が違うHTMLへの対応方法

がわかります。

Ajax通信とかは難しいよという方はjQueryのload()メソッドでも同じようなことができるのでこちらの記事がおすすめです。

Ajaxでheaderを共通化する方法

簡単に説明すると定義した関数内にAjaxで共通HTMLを読み込む処理を書き、表示用HTML内で関数を実行することで共通化します。

まずは、階層構造から説明します。
この記事では仮に次のような階層構造を想定して解説します。

階層構造
コピー
index.html(共通ヘッダーを読み込むHTML) header.html(共通用のヘッダー) js/ -main.js(Ajax処理を書く)

Ajaxの処理は/js/main.jsに記述するとします。

/js/main.js
コピー
function include_header(){ $.ajax({ url: 'header.html', // リクエストを送信するURLを指定 async: false, // 非同期リクエストを無効にする }).done(function(header_html){ // 通信が成功したら document.write(header_html); // herder.htmlを表示する }); }

header.htmlには各HTMLで読み込ませたい共通ヘッダーを記述します。
適当にこんな感じで…

header.html
コピー
<header> <h1>ヘッダー</h1> <a href="./index.html">リンク</a> </header>

そして、index.htmlheader.htmlを表示させたい場所に次のように記述します。
あと、jQueryと/js/main.jsを読み込むのを忘れないようにしてください。

index.html
コピー
<head> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="../js/main.js"></script> </head> <body> <script>include_header(); // 関数を実行しheader.htmlを読み込む</script> </body>

これでheader.htmlindex.htmlに表示されたかと思います。

共通ファイルが読み込まれない時の対処法

Ajaxで共通ファイルを取得してみたけどなんだかうまくいかないという人は次の対処法を試してみてください。

jQueryを読み込んでいるか?

この記事のAjaxの書き方だとjQueryを読み込まないと動作しないのでその辺をチェックしてみてください。

jQueryダウンロード:https://jquery.com/download/
jQuery CDN:https://releases.jquery.com/

JavaScriptの読み込み順を考える

当然ですが、JavaScriptの処理の順番が間違っているとエラーが出てしまいます。

上記のAjaxでheaderを共通化する方法での処理の流れとしては、

定義した関数の中でAjaxによりheader.htmlを取得する

index.htmlで関数を実行する事によってheader.htmlが表示される

という仕組みでこの順番で処理が走らなければいけない訳です。

なのでチェックポイントとしては、

  • /js/main.jsを関数を実行した後に読み込んでいないか。
    (bodyの閉じタグ直前とかで読み込んでいないか)
  • /js/main.jsでjQueryでお決まりの$(function(){});を記述している。

とかだと思います。

ちなみにの$(function(){});はHTMLが読み込み終わってから実行するという意味です。

ローカルサーバを立ち上げる

load()メソッドはローカル環境では動作しないので、サーバーに上げて確認しないといけないのです。

でも、ローカルでも動作を確認したいと思います。
そんな時はVisual Studio Codeの拡張機能である「Live Server」というのを使うと簡単にローカルサーバーを立ち上げることができます。

Live Server」の使い方はこちらの記事で解説しています。

Visual Studio Code以外のテキストエディタを使っている方はローカルサーバを立ち上げる拡張機能がないか調べるか、MAMPやXAMPPを使うことで解決すると思います。

※筆者はVisual Studio Codeしか使ったことがないのでVisual Studio Code以外のテキストエディタのことはよくわからないのです。すみません…

階層が違うHTMLへの対応方法

headerやfooterが共通化できることは便利なのですが読み込むHTMLの階層が変わってしまうと画像やリンクのパスが切れてしまいます。

例えば、階層構造が次のような場合を想定します。

header.htmlで相対パスである./image/header_logo.svgで画像を読み込むとします。
header.htmlindex.htmlで読み込むと画像は正常に読み込まれますが、階層が違うabout.htmlheader.htmlを読み込むと画像が表示されなくなってしまいます。

階層構造
コピー
index.html(共通ヘッダーを読み込むHTML) header.html(共通用のヘッダー) js/ -main.js(Ajax処理を書く) about/ -index.html(共通ヘッダーを読み込むHTML) images/ -header_logo.svg

そんな状態を解決する方法をご紹介します。

関数にパスを引数として渡す方法

/js/main.jsに次のように記述します。

/js/main.js
コピー
function include_header(rootDir){ $.ajax({ url: rootDir + 'header.html', // リクエストを送信するURLを指定 async: false, // 非同期リクエストを無効にする }).done(function(header_html){ // 通信が成功したら header_html = header_html.replace(/\{root\}/g, rootDir); // header.htmlの文字列を置き換え document.write(header_html); // herder.htmlを表示する }); }

header.htmlは次のように記述しましょう。
{root}の部分が関数に渡された文字列に置き換わります。

header.html
コピー
<header> <h1>ヘッダー</h1> <a href="{root}index.html">リンク</a> </header>

例えば、about.htmlでは次のように記述することで画像が正常に読み込まれるのではないでしょうか?

/about/index.html
コピー
<script>include_header("../"); // 関数を実行しheader.htmlを読み込む</script>

まとめ

サイトの各ページに記述する部分を共通化することで保守性がグンッと上がります。
全ページに変更しに行かなければいけなかったのが共通化することで1か所を修正するだけでよくなります。

headerやfooterだけでなくサイドバーやバナーなどにも使えそうなので活用していただければと思います。

Ajax通信とかは難しいよという方はjQueryのload()メソッドでも同じようなことができるのでこちらの記事がおすすめです。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

Underscore.jsについて学ぶ

Underscore.jsについて学ぶ

フォントサイズを可変にする方法【CSSのclamp関数で実現】

フォントサイズを可変にする方法【CSSのclamp関数で実現】

clamp関数がSafariで効かない時の対処法

clamp関数がSafariで効かない時の対処法

floatで雑誌のようなテキストの回り込みを表現する

floatで雑誌のようなテキストの回り込みを表現する

【CSS】mix-blend-modeで乗算などを表現する方法

【CSS】mix-blend-modeで乗算などを表現する方法

【レスポンシブ対応】Facebook・Twitterのタイムライン埋め込み方法

【レスポンシブ対応】Facebook・Twitterのタイムライン埋め込み方法