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

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

 メニュー

【mustache入門:JS版】コードの整理

前回は、公式サイトのサンプルコードをそのまま利用してmustacheの動作確認をしました。今回は、気になる部分のコードを整理していきたいと思います。

作成するファイル

  • HTMLファイル:index.html
  • JavaScriptファイル:render.js

テンプレートをJavaScriptに記述するように変更する

前回までのコードはこちらです↓

前回、作成したファイルで気になるところがあるので変更していきます。HTMLの中にスクリプトタグでテンプレートを記述している部分がありますが、違和感があるのでJavaScriptに移動します。つまり、テンプレート部分をJavaScriptに記述するように変更します。

変更前

以下に変更前のHTMLを抜粋します。

<!-- 表示部分 -->
<div id="target">Loading...</div>

<!-- テンプレート -->
<script id="template" type="x-tmpl-mustache">
Hello {{ name }}!
</script>

変更後

変更後のコードは以下の通りです。

<!-- 表示部分 -->
<div id="target">Loading...</div>

<!-- テンプレート -->
<!--<script id="template" type="x-tmpl-mustache">
Hello {{ name }}!
</script> -->
/* render.js */
/* 追記:テンプレート */
var template = `Hello {{ name }}!`;

/* レンダリングとデータの指定 */
function renderHello() {
  var rendered = Mustache.render(template,  { name: 'hoge' });
  document.getElementById('target').innerHTML = rendered;
}

HTMLにあったテンプレートを無効にして、JavaScriptに定義しました。ブラウザで表示を確認すると「Hello hoge!」と表示されるのが確認できると思います。

まとめ

HTMLの記述が少し気になったので、コードを整理しました。HTMLのコードがすっきりしたのではないでしょうか。今後も読みやすいコードになるように心がけたいです。