どうも！かけちまるです！
いきなりですが、HTMLで制作した静的なWebサイトのheaderのような全ページで共通な部分をどのようにしているでしょうか？
HTMLごとにheaderを書いていると変更があったときにページ数が多いほど変更箇所が多くなってきますよね。
WordPressのようなCMSでは共通化する機能がありますし、HTMLではなくPHPで制作すれば共通化できるのですが、ファイル名が「~.php」になったり、サーバーによっては設定が必要になったりするのでJavaScriptのAjaxという技術を使って共通化を実装できればと思います。
この記事では、
がわかります。
Ajax通信とかは難しいよという方はjQueryのload()メソッドでも同じようなことができるのでこちらの記事がおすすめです。
簡単に説明すると定義した関数内に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.htmlにheader.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.htmlがindex.htmlに表示されたかと思います。
Ajaxで共通ファイルを取得してみたけどなんだかうまくいかないという人は次の対処法を試してみてください。
この記事のAjaxの書き方だとjQueryを読み込まないと動作しないのでその辺をチェックしてみてください。
jQueryダウンロード：https://jquery.com/download/
jQuery CDN：https://releases.jquery.com/
当然ですが、JavaScriptの処理の順番が間違っているとエラーが出てしまいます。
上記のAjaxでheaderを共通化する方法での処理の流れとしては、
定義した関数の中でAjaxによりheader.htmlを取得する
↓
index.htmlで関数を実行する事によってheader.htmlが表示される
という仕組みでこの順番で処理が走らなければいけない訳です。
なのでチェックポイントとしては、
/js/main.jsを関数を実行した後に読み込んでいないか。/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以外のテキストエディタのことはよくわからないのです。すみません…
headerやfooterが共通化できることは便利なのですが読み込むHTMLの階層が変わってしまうと画像やリンクのパスが切れてしまいます。
例えば、階層構造が次のような場合を想定します。
header.htmlで相対パスである./image/header_logo.svgで画像を読み込むとします。header.htmlをindex.htmlで読み込むと画像は正常に読み込まれますが、階層が違うabout.htmlでheader.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()メソッドでも同じようなことができるのでこちらの記事がおすすめです。
おわり
フィードバックを送信
記事についてのフィードバックはTwitterかお問い合わせフォームから受け付けております。
