jQueryで簡単インクルード!!

0
885

コーディングする際にヘッダーなどの共通部分を
インクルードすることはよくあります。

PHPやSSI、javascriptなど方法は色々あると思うのですが、
今回は、こんな方向けのインクルード方法です。

・静的なページのコーディング(あるいはプロトなど簡易なもの)
・HTMLテンプレートエンジン使いたくないです。
・webpackなどのバンドラーも使いたくないです。
・PHPインクルードしたくないです。
・とりあえず、簡単なコーディングなのでささっとインクルードしたいです。
・だけど、ページ固有値(ページタイトルなど)は渡せると良いなぁ。

上記に当てはまる案件があるのかどうか怪しいところですが、
jQueryのみで実装してみます。

[前提]
・<header>タグの中身をインクルード
・jQuery使用
・ページ固有値として「ページタイトル」、「パンくずリストの情報」を渡したい

index.html

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./style.css">
</head>
<body>
	<!-- インクルードしたい位置にidを指定しておきましょう。 -->
	<header id="header"></header>
	<main>
		<p>サンプルHTMLです。</p>
	</main>
	<footer></footer>
	<!-- jQuery読み込む -->
	<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
	<!-- js読み込む -->
	<script src="./main.js"></script>
	<!-- ページ固有の情報を渡してあげる -->
	<script>
		$(function(){
			// パンくずリストの情報を設定します。
			const breadcrumbArray = [
				{
					name: 'パンくず1',
					href: 'index.html'
				},
				{
					name: 'パンくず2',
					href: 'hogehoge.html'
				},
				{
					name: 'パンくず3',
					href: 'fugafuga.html'
				}
			];
			// functionを呼び出す時に、ページタイトルと上で設定したパンくず情報を渡します
			headerInclude('タイトル', breadcrumbArray);
		})
	</script>
</body>
</html>

header.html

インクルードしたい部分は別ファイルとして切り出しておきます。

<div>
	<p>ヘッダーです。</p>
	<!-- タイトルを入れる場所に{$title}を記述 -->
	<h1>{$title}</h1>
	<div>
	<!-- パンくずリストを入れる場所に{$breadcrumb}を記述 -->
	<ul>{$breadcrumb}</ul>
	</div>
</div>

main.js

// 共通ヘッダーの呼び出し
function headerInclude(title, breadcrumbArray){
	// ajaxでheader.htmlの取得
	$.ajax({
		type: 'get',
		// urlで指定したいファイルのパスを指定
		url: 'header.html',
		dataType: 'html',
		success: function(data) {
			// タイトルの置き換え
			data = data.replace(/\{\$title\}/g, title);

			// パンくずリストの置き換え
			const breadcrumbList = [];
			$(breadcrumbArray).each(function(index, item){
				// テキストとhrefの値をセット
				const breadcrumbItem = '<li><a href="' + item.href + '">' + item.name + '</a></li>';
				// 配列に格納
				breadcrumbList.push(breadcrumbItem);
			});
			// 配列に格納されたbreadcrumbItemたちを文字列として連結
			const insertEle = breadcrumbList.join('');
			console.log(insertEle);
			//下記が出力されます
			// <li><a href="index.html">パンくず1</a></li><li><a href="hogehoge.html">パンくず2</a></li><li><a href="fugafuga.html">パンくず3</a></li>
			data = data.replace(/\{\$breadcrumb\}/g, insertEle);

			// header要素にappendする
			$('#header').append(data);
		}
	});
}

※※const動かない環境はvarに書き換えていただけますよう。。。🙇‍♂️

表示結果

グレーの部分がインクルードされたheaderです。

基本的にはheader.htmlのなかで、個別に値を変更したい箇所だけ
{$hogehoge}でマーキングしておき、
jQueryでreplaceしていくだけなので、必要があれば他にも渡してあげてください。

Ajaxと聞くと、APIでのデータ取得というイメージが強かったのですが、
色々使えるのだな、と学びました。(ツールを使いこなす柔軟な頭がほしい)

あくまで簡易的なものですが、何かの参考になれば嬉しいです。