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: <macho-man><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
参考資料
-
ref.
- [ヅ] Node.js + Express 4 + テンプレートエンジン Swig を試す (2015-04-03)
- Swig - A Node.js and Browser JavaScript Template Engine
- Swig » Documentation
- Swig » Documentation » Tags
tags: template_engine node.js javascript
Posted by NI-Lab. (@nilab)