https://shiroyuki2020.hatenablog.com/entry/introduction_to_mustache

以前、mustacheの記事を書きましたが、勉強し直したので改めて記事にします。今回は、HTMLとJavaScriptの分離に焦点を当てて書きます。

HTMLを挿入する例

id属性がresultである要素の子要素に、<h1>Hello JavaScript</h1>を挿入します。

<div id="result"></div>

const result = document.getElementById('result');
result.innerHTML = '<h1>Hello JavaScript</h1>';

表示結果は、以下です。

HTMLのテンプレート化

HTMLをJavaScriptのコード内に沢山記述するようになるとコードの見通しが悪くなります。HTMLとJavaScriptの分離の観点からもよろしくありません。そこでmustache.jsを使って、HTMLをテンプレート化します。

<div id="result"></div>
<!-- mustache.jsの読み込み -->
<script src="https://unpkg.com/mustache@latest"></script>

// テンプレート
const template = `
  <h1>Hello {{lang}}</h1>
`;

const result = document.getElementById('result');
result.innerHTML = Mustache.render(template, { lang: "HTML" });

Mustache.render()に、HTMLのテンプレートとオブジェクト(テンプレートに埋め込むデータ)を渡します。テンプレートの中では、{{キー名}}でプロパティが展開されて、値が参照されます。

HTMLコードの分離

さらに、HTMLのtemplateタグを使用して、JavaScriptからHTMLコードを分離します。templateタグ内に、HTMLのテンプレートを記述します。templateタグで記述したものは、ブラウザに表示されません。

<div id="result"></div>

<!-- テンプレート -->
<template id="template">
  <h1>Hello {{lang}}</h1>
</template>

<!-- templateタグが利用できない場合、以下のように記述する。 -->
<!--
<script id="template" type="x-tmpl-mustache">
  <h1>Hello {{lang}}!!</h1>
</script>
-->

<script src="https://unpkg.com/mustache@latest"></script>

const data = {
  lang: "JavaScript"
};

const result = document.getElementById('result');
// テンプレートの取得
const template = document.getElementById('template').innerHTML;
result.innerHTML = Mustache.render(template, data);

これで、JavaScriptのコードからHTMLのコードを分離することができました。

まとめ

mustache.jsを使用して、JavaScriptからHTMLのコードを分離することができました。今回、テンプレートに渡すデータをJavaScript内で用意しました。今後は、Web APIからのデータ取得に挑戦したいです。

mustache:JS版|mustache.jsの再入門

HTMLを挿入する例

HTMLのテンプレート化

HTMLコードの分離

まとめ

参考