JavascriptでHTMLをテンプレート化して文字置換する方法
どうもユーキです。
今回は、JavascriptでHTMLをテンプレート化して、特定の文字部分だけを置換する方法を紹介していきます。
実装方法
素のJSだけでやろうと思ったのですが、素晴らしい記事があったので、「mustache.js」というJavascriptのフレームワークを使います。
シンプル故に機能はほとんどないのですが、JS側でやればいい話なのでこれで充分かと思います。
本家サイトだけ見ても使い方がよくわからなかったので、下記のソースを参考にしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- CDNで読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<!-- jQueryも一応読み込み -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</head>
<body>
<!-- 以下ロジックを記載 -->
<script>
$(function () {
// ダミーデータ
var data = {
"items": [
{"name": "テスト１", "price": 200},
{"name": "テスト２", "price": 10000}
]
};
// 出力したいテンプレート
var template = `{{#items}}
<li>
<p>{{name}}</p>
<p>{{price}}円</p>
</li>
{{/items}}`;
// Mustache.js実行
var html = Mustache.render(template, data);
// DOM操作
$('#target').html(html);
});
</script>
<!-- ulタグにhtmlが表示される -->
<ul id="target"></ul>
</body>
</html>
{{element_name}}と中括弧２つを囲むことで値が置換されるようになります。
上記ページにアクセスすると
<ul id="target"><li>
<p>テスト１</p>
<p>200円</p>
</li>
<li>
<p>テスト２</p>
<p>10000円</p>
</li>
</ul>
こんな感じで表示されます。
素のHTMLとJSでやりましたが、PHPやRubyなど様々な言語に簡単に組み込めるのがいいみたいです。
dataのところは、JSONを読み込んで処理するなど、適宜変えてください！
他のJSフレームワークでも同じことができるようなので、また試したときに記事にしたいと思います。
できれば、VueなりReactなりでできればな、といった感じです。
gulpでpug（旧jade）のHTML変換時に組み込みできるとベストなのでそちらも試してみようと思います。
