元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

【mustache入門:JS版】mustache.jsの再入門

以前、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からのデータ取得に挑戦したいです。

参考