情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

Node.jsでmustache.jsテンプレートエンジンを使う

2016/04/04

mustache.jsテンプレートエンジンはmustache.jsパッケージのmustacheモジュールで提供されています。


mustache.jsテンプレートでは下のような記法を使用することができます。

  • {{ }}・・・任意のキーを埋め込みます。埋め込まれたキーに対応する値が出力されます。ただし、値はHTMLエスケープされます。キーが存在しない場合には空文字列が出力されます。
  • {{{ }}}・・・任意のキーを埋め込みます。埋め込まれたキーに対応する値が出力されます。ただし、値はHTMLエスケープされません。キーが存在しない場合には空文字列が出力されます。
  • {{& }}}・・・{{{ }}}と同じです。
  • {{# }}・・・セクションを開始します。任意のキーを埋め込みます。埋め込まれたキーに対応する値に応じて処理を行います(後述)。
  • {{^ }}・・・反転セクションを開始します。任意のキーを埋め込みます。埋め込まれたキーに対応する値に応じて処理を行います(後述)。
  • {{/ }}・・・セクション又は反転セクションを終了します。任意のキーを埋め込みます。
  • {{.}}・・・セクションのキーに対応する値が文字列のリストである場合にセクションの内容においてそれぞれの文字列を参照するのに使用します。
  • {{! }}・・・コメントを埋め込みます。コメントはレンダリングの際には無視されます。

セクションに埋め込まれたキーに対応する値がnullundefinedfalse0NaN''又は[]である場合にはセクションの内容は出力されません。

空でないリストである場合にはセクションの内容はリストのそれぞれの要素について出力されます。

それ以外の値である場合にはセクションの内容は1回のみ出力されます。

反転セクションに埋め込まれたキーに対応する値がnullundefinedfalse0NaN''又は[]である場合には反転セクションの内容は1回のみ出力されます。

それ以外の値である場合には反転セクションの内容は出力されません。


mustache.jsテンプレートエンジンによるレンダリング結果を取得するにはmustache.render関数を呼び出します。

第1引数にテンプレートを指定します。

第2引数にデータを指定します。

返り値としてレンダリング結果が得られます。

サンプルコード1

コマンドライン引数として与えられたmustache.jsテンプレートファイルを読み込み、コマンドライン引数として与えられたJSON形式のデータファイルを読み込み、レンダリング結果を取得し、コマンドライン引数として与えられたファイルに書き込みます。

なお、文字コードがUTF-8のテキストファイルを読み込むとテキストの先頭にBOMが付加されていることがあるため、stripBom関数でBOMを取り除いています。

stripBom関数の詳細に関しては下の記事を参照してください。

mustache-render.js

var fs = require('fs');
var stripBom = require('strip-bom');
var mustache = require('mustache');

if (process.argv.length < 5) {
    console.error('lack argument.');
    process.exit(1);
}

fs.readFile(process.argv[2], 'utf-8', function (err, template) {
    if (err) {
        console.error(err);
        process.exit(1);
    }
    else {
        fs.readFile(process.argv[3], 'utf-8', function (err, data) {
            if (err) {
                console.error(err);
                process.exit(1);
            }
            else {
                var result = mustache.render(stripBom(template), JSON.parse(stripBom(data)));
                fs.writeFile(process.argv[4], result, 'utf-8', function (err) {
                    if (err) {
                        console.error(err);
                        process.exit(1);
                    }
                    else {
                        console.log('finished!!');
                    }
                });
            }
        });
    }
});

使用パッケージ

  • strip-bom
    npm install strip-bomでインストールします。
  • mustache.js
    npm install mustacheでインストールします。

実行結果

現在のフォルダには下のような内容のtemplate.mstという名称のmustache.jsテンプレートが存在しています。

<h1>{{ name }}</h1>
<p>{{ description }}</p>
<p>単語数:{{ vocabulary.length }}</p>
<ul>
{{# vocabulary }}
<li>{{ level }} {{ word }} {{# meanings }}{{.}}{{/ meanings }}</li>
{{/ vocabulary }}
</ul>

また、下のような内容のvocabulary.jsonという名称のJSON形式のデータが存在しています。

{
    "name": "単語帳", 
    "description": "頑張って覚えましょう。", 
    "vocabulary": [
        {
            "word": "stale", 
            "level": "6", 
            "meanings": ["新鮮でない"]
        }, 
        {
            "word": "stylist", 
            "level": "7", 
            "meanings": ["名文家"]
        }, 
        {
            "word": "substitution", 
            "level": "8", 
            "meanings": ["代用", "代用品", "代入", "置換"]
        }, 
        {
            "word": "ventilate", 
            "level": "9", 
            "meanings": ["~を換気する"]
        }, 
        {
            "word": "ventilation", 
            "level": "10", 
            "meanings": ["換気(装置)"]
        }
    ]
}

これらのmustache.jsテンプレートとデータからレンダリング結果を取得してみます。

C:\work\node>node mustache-render.js template.mst vocabulary.json html.htm
finished!!

レンダリング結果は下のようになりました。

<h1>単語帳</h1>
<p>頑張って覚えましょう。</p>
<p>単語数:5</p>
<ul>
<li>6 stale 新鮮でない</li>
<li>7 stylist 名文家</li>
<li>8 substitution 代用代用品代入置換</li>
<li>9 ventilate ~を換気する</li>
<li>10 ventilation 換気(装置)</li>
</ul>

関連

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-Node.js