mustache.js入門・Node.jsのテンプレートエンジンmustache.jsの使い方

Node.jsで使用できるテンプレートエンジンライブラリ、mustache.jsの使い方について説明します。このライブラリは、ウェブアプリケーションのMVCにおけるビューの生成や、テキストデータの操作に幅広く活用されます。

インストール

npm install mustache --save

require

var fs = require('fs');
var path = require('path');

var Mustache = require('mustache');

基本的な使用例

var view = {
  title: "Joe",
  calc: function () {
    return 2 + 4;
  }
};

var template = `
basic usage: {{title}} spends {{calc}}
`;

var output = Mustache.render(template, view);

console.log(output);

出力:

basic usage: Joe spends 6

条件分岐（if）

{{#NOTEFILE}}
  note file found.
    {{NOTEFILE}}
{{/NOTEFILE}}

条件が偽の場合（unless）

{{^NOTEFILE}}
    no note file found.
{{/NOTEFILE}}

<header class='split-view-inspector-header'>
    <div class="view-title">Source Assets</div>
    {{!  <div class="actions"> commented
        <span class="label">Actions</span>
        <span class="gear"></span>
    </div> }}
</header>

出力:

<header class='split-view-inspector-header'>
    <div class="view-title">Source Assets</div>
</header>

カスタムデリミタ

var customTags = ['<%', '%>'];
Mustache.tags = customTags;

var template = `
Custom Delimiters: <% title %>
`;

var output = Mustache.render(template, view, {}, customTags);

console.log(output);

出力:

Custom Delimiters: Joe

テンプレート内でのカスタムデリミタの変更

var template = `
Custom delimiter inside template:

* {{ title }}
* <% title %>
{{=<% %>=}}
* {{ title }}
* <% title %>
<%={{ }}=%>
* {{ title }}
* <% title %>
`;

var output = Mustache.render(template, view);

console.log(output);

出力:

Custom delimiter inside template:

* {{ title }}
* Joe
* Joe
* Joe

詳細については、janl/mustache.jsのGitHubページを参照してください。

JP Coders

mustache.js入門・Node.jsのテンプレートエンジンmustache.jsの使い方

mustache.js入門・Node.jsのテンプレートエンジンmustache.jsの使い方

インストール

require

基本的な使用例

条件分岐（if）

コメント

カスタムデリミタ

テンプレート内でのカスタムデリミタの変更

お手伝いできますか？ 🤝