node.jsのNunjucksっていうjinja風なテンプレートエンジンを使ってみる

2014-12-09

昨日のお話。milkcocoaというライブラリでチャット作って遊んでいました。バックエンドのことを一切気にせずにリアルタイム通信ができるのは確かに素晴らしいのだけれど、でも気になっちゃうんだよね、バックエンドが。もっとこうしたい、ああしたい、つって。

仕方が無いのでsocket.ioを自分で触ろうか。ならnode.jsか。というわけで勉強してみることにしました。

node.jsにはテンプレートエンジンが色々あるそうで、有名所だとEJSやJadeあたりっぽい？ webappなんてflaskくらいしか使ったこと無い私はjinja2の書き方に慣れきってしまって、これで書けないかと思って探してみました。んでもって見つけたのがNunjucksってやつ。

インストール

npmに入っているようなので、普通に

$ npm install nunjucks

で入りました。なんかエラーっぽい出力が出ていたけれど、動いたからとりあえずよしとする。

試してみる

var nunjucks = require('nunjucks');

var template = 'hello, {{ name }}!';

var output = nunjucks.renderString(template, { name: 'world' });

console.log(output);

こんな感じのコードを書いて、実行してみる。

実行すると

$ node [書いたコードのファイル名]
hello, world!

hello worldだけ。

Nunjucksの構文

ほぼ完全にjinja2と同じっぽい。違いについてはQ&Aをご覧ください。英語だけど。

{{ variable }}

で変数にアクセスしたりとか

{{ list.item }}
{{ list[item] }}

で配列とか連想配列にアクセスしたりとか。

{% if variable == 0 %}
    zero!
{% elif variable < 0 %}
    minus!
{% else %}
    plus!
{% endif %}

でif文とか。

{% for x in list %}
    {{ x }}<br>
{% endfor %}

for文もjinjaと一緒。

blockやextends、macroもそのまんまあるみたい。これは素晴らしい。jinja2用のテンプレートをほぼそのまんま流用できんじゃん。

Expressと合わせて使ってみる

単体だとwebサイト作る上では不都合なので、Express.jsと組み合わせて使ってみます。

$ npm install express

インストールして、

app.jsとか適当な名前のファイルに以下のコードを記述。

var express = require('express');
var app = express();

var nunjucks = require('nunjucks');
nunjucks.configure('views', {
    autoscape: true,
    express: app
});

var count = 0;

app.get('/', function(req, res){
    count++;
    res.render('index.html', { counter: count });
});

app.listen(5000, function(){
    console.log('listening start');
});

最後にテンプレートを書く。今回はviews/index.htmlに。

<h1>hello, world!</h1>
access count: {{ counter }}

実行すると

$ node app.js
listening start

こんな感じで止まるはず。

ブラウザを開いて http://localhost:5000/ にアクセスすると、hello worldが表示されるはず。動きがないとちゃんと機能してるか分からないので、アクセスカウンタ的なものがついてます。

参考：