jQueryでheaderとfooterを共通化する【load()メソッド】

2022.02.26

2022.07.09

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

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

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

なので、headerを共通化して変更があっても変更箇所を1か所にしましょう。

この記事では、

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

がわかります。

Ajax通信を利用して共通化する方法もあります。
少し難易度は上がりますが、保守性はこちらの方が高いのでおすすめです。

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

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

headerを共通化する方法

簡単に説明すると外部HTMLをJavaScriptのload()メソッドで読み込むことで共通化します。

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

階層構造
コピー
index.html（共通ヘッダーを読み込むHTML）
header.html（共通用のヘッダー）
css/
  -style.css
  -reset.css
images/

JavaScriptはindex.htmlに記述するとします。
header.htmlには各HTMLで読み込ませたい共通ヘッダーを記述します。

そして、index.htmlに

・header.htmlを読み込む場所
・load()メソッドを記述し、header.htmlを読み込む

この2つを記述することで共通化することができます。

具体的なコードは次の通りです。

HTML
コピー
<body>
    <div id="header"><!-- ここにheader.htmlが読み込まれる --></div>
 
    <script>
        $(function(){
            $('#header').load('./header.html'); // #headerにheader.htmlを読み込む
        });
    </script>
</body>

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

load()メソッドで指定したファイルが読み込まれない時はどうすればいいのでしょうか？

jQueryを読み込んでいるか？

load()メソッドはjQueryを読み込まないと動作しません。

なので、jQueryを読み込みましょう。

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

jQuery CDN：https://releases.jquery.com/

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

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

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

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

【Live Server】VS Codeの拡張機能で自動でブラウザを更新しよう

VSCodeの拡張機能である「Live Server」のライブリロード機能で効率的にコーディングを進めよう。インストール方法はVSCodeの左メニューから拡張機能をクリックします。検索窓に「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.htmlをindex.htmlで読み込むと画像は正常に読み込まれますが、階層が違うabout.htmlでheader.htmlを読み込むと画像が表示されなくなってしまいます。

階層構造
コピー
index.html（共通ヘッダーを読み込むHTML）
header.html（共通用のヘッダー）
about/
  -about.html（共通ヘッダーを読み込むHTML）
css/
  -style.css
  -reset.css
images/
  -header_logo.svg

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

絶対パスで記述する

header.htmlの画像やリンクのパスをすべて絶対パスで指定することでheader.htmlの読み込む先のHTMLの階層が変わってもリンク切れが防げるようになります。

この方法のメリットとしては、対応が簡単というものです。

デメリットもあります。

デメリット

・画像は先に本番環境に上げておかなければならない
→自分で本番環境を操作できない場合に不便
・新規案件では、リンク先設定が正常か確認できない
→新規案件では本番環境にファイルが上がっていない

JavaScriptでURLを取得し処理を分岐する

次の階層だった時の場合を考えます。

階層構造
コピー
index.html（共通ヘッダーを読み込むHTML）
header.html（共通用のヘッダー）
about/
  -about.html（共通ヘッダーを読み込むHTML）
css/
  -style.css
  -reset.css
images/
  -header_logo.svg

header.htmlで./images/header_logo.svgを読み込みたいとします。
inde.htmlでは、./images/header_logo.svgで画像が正常に読み込まれます。
about.htmlでは、../images/header_logo.svgで画像が正常に読み込まれます。

なので、次のJavaScriptでURLを取得し処理を分岐する事でリンク切れを防ぐことができます。

JavaScript
コピー
let path = location.pathname.split("/")[1];
 
switch(path){
    case 'index.html':
        $('img').attr('href', './images/header_logo.svg');
        break;
    case 'about':
        $('img').attr('href', '../images/header_logo.svg');
        break;
    default:
        $('img').attr('href', './images/header_logo.svg');
}

URLを取得する方法の詳細はこちらの記事で解説しております。