Javascriptで簡単に更新！ヘッダーやフッターなどの共通部分を簡単に更新する方法！

cms以外のhtmlで作った静的なサイトの共通部分、ヘッダーやフッターサイドバーなどを修正するとき一部分だけ変更する場合でも全ページのソースを修正しなければならないので大変です。
そこで何か一括で変換できるような方法がないかと思い、Javascriptで一括変換できるような方法を紹介します。

別にDreamweaverのtemplate機能やPHPで作成してもいいのですが、そもそもDreamweaverだとAdobeを購入しなければ行けないし、PHPだと「〜.php」になったり、html上でphpを使えるようにする為.accessの設定をしたりとかでサーバーごとの設定があるので今回はJavascriptを選択しました。

Javascriptで共通化していこう

まず、ベースとなるHTMLにJavascriptを読み込めるようにします。

<script src="main.js"></script>

そして共通化する部分に下記を記述。

<script>header();</script>

次に読み込むJavascriptを作ります。
今回はajaxを使用した方法になります。

参考：
jQuery リファレンス jQuery.ajax
※url: "header.html",が読み込むHTMLファイルです。

js

function header(){
	$.ajax({
		url: "header.html",
		cache: false,
		success: function(html){
			document.write(html);
		}
	});
}

パスを指定した作りになるなら

<script>header('../');</script>

function header(rootDir){
    $.ajax({
        url: rootDir + "header.html",  // 読み込むHTMLファイル
        cache: false,
        async: false,
        dataType: 'html',
        success: function(html){
            html = html.replace(/\{\$root\}/g, rootDir); //header.htmlの{$root}を置換
            document.write(html);
        }
    });
}

参考：
更新するのが面倒！サイトの共通部分を簡単に作る様々な方法

共通化ファイルが複数あるならincludeフォルダを作りまとめた方がわかりやすいです。

index.html
style.css
main.js
include
 - header.html
 - footer.html
 - sidebar.html

フォルダをまとめる際はディレクトリーを気をつけてください。

function header(rootDir){
    $.ajax({
        url: rootDir + "include/header.html", // ディレクトリー変更
        cache: false,
        async: false,
        dataType: 'html',
        success: function(html){
            html = html.replace(/\{\$root\}/g, rootDir); 
            document.write(html);
        }
    });
}

リンクがある場合は「{$root}」を追加します。

<a href="{$root}index.html">TOP</a>

出力されると下記のようになります。
デメリットとしてはscript部分が余分なソースになる、ブラウザーのjsを切っている場合表示されないなどがあります。

<script>header('../');</script>
<header>
	<ul>
		<li><a href="{$root}index.html">TOP</a></li>
		<li><a href="{$root}about.html">ABOUT</a></li>
		<li><a href="{$root}service.html">SERVICE</a></li>
		<li><a href="{$root}contact.html">CONTACT</a></li>
	</ul>
</header>

追記

この記事を書いた頃より開発の状況は随分と変化し現在はNuxt.js(Vue-CLI)を仕様しています。

Vue.jsベースで作りたい → Nuxt.js

Vue.jsあんまり使わない → GulpやGrunt

↑が使えないときこの記事のやり方になるのではないかなと思います。