Swig とは

JavaScript から使えるテンプレートエンジン。

今回の環境

OS: Mac OS X Yosemite 10.10.2

Node.js はインストール済み。


$ node --version
v0.10.29

Swig モジュールをインストールする

npm でインストールできる。


$ npm install swig
swig@1.4.2 node_modules/swig
├── optimist@0.6.1 (wordwrap@0.0.2, minimist@0.0.10)
└── uglify-js@2.4.19 (uglify-to-browserify@1.0.2, async@0.2.10, source-map@0.1.34, yargs@3.5.4)

サンプルその1

JavaScript オブジェクトを、HTML テンプレートファイルに流し込む。

JavaScript によるプログラム。


$ cat sample.js 
var swig = require('swig');

var tpl = swig.compileFile('./template.html');

var data = {
  title: 'awesome people',
  authors: ['Paul', 'Jim', 'Jane']
};

var output = tpl(data);
console.log(output);

テンプレートファイル。変数出力、ループ処理、最初の要素かどうかの判定。


$ cat ./template.html 
<h1>{{ title }}</h1>
<ul>
{% for author in authors %}
  <li{% if loop.first %} class="first"{% endif %}>
    {{ author }}
  </li>
{% endfor %}
</ul>

実行結果。


$ node ./sample.js 
<h1>awesome people</h1>
<ul>

  <li class="first">
    Paul
  </li>

  <li>
    Jim
  </li>

  <li>
    Jane
  </li>

</ul>

サンプルその2

JavaScript によるプログラム。


$ cat sample.js 
var swig = require('swig');

var tpl = swig.compileFile('./template.html');

var data = {
  title: 'sample members',
  members: [
    { name: 'Alice', age:  8, note: 'in mirror world' },
    { name: 'Bob',   age: 30, note: '<macho-man>' },
    { name: 'Carol', age: 88 }
  ]
};

var output = tpl(data);
console.log(output);

テンプレートファイル。数値比較条件、変数存在判定。


$ cat ./template.html 
<h1>{{ title }}</h1>
<p>
{% for member in members %}
  <p>
    name: {{ member.name }}<br />

    age: {{ member.age }}
    {% if member.age < 20 -%}
      (child)
    {%- endif %}
    <br />

    {% if member.note -%}
      note: {{ member.note }}<br />
    {%- endif %}
    {% if !member.note -%}
      no note<br />
    {%- endif %}
  </p>
{% endfor %}
</p>

実行結果。


$ node ./sample.js 
<h1>sample members</h1>
<p>

  <p>
    name: Alice<br />

    age: 8
    (child)
    
    <br />

    note: in mirror world<br />
    
    
  </p>

  <p>
    name: Bob<br />

    age: 30
    
    <br />

    note: &lt;macho-man&gt;<br />
    
    
  </p>

  <p>
    name: Carol<br />

    age: 88
    
    <br />

    
    no note<br />
    
  </p>

</p>

サンプルその3

JavaScript によるプログラム。


$ cat ./sample.js 
var swig = require('swig');

var data = { numbers: [ 1, 2, 3, 4, 5 ] };

console.log('template1');
console.log(swig.renderFile('./template1.html', data));

console.log('template2');
console.log(swig.renderFile('./template2.html', data));

テンプレートファイル1つめ。


$ cat template1.html 
{% for number in numbers %}
{{ number }}
{% endfor %}

テンプレートファイル2つめ。不要な空白文字や改行を出力させないため、-% や %- を使用。


$ cat template2.html 
{% for number in numbers -%}
{{ number }}
{%- endfor %}

実行結果。


$ node ./sample.js 
template1

1

2

3

4

5


template2
12345

参考資料

tags: template_engine node.js javascript

Posted by NI-Lab. (@nilab)