Mozilla製のjavascriptテンプレートエンジン「Nunjucks」



Javascript製のDjangoやTwigライクに書けるテンプレートエンジン「Nunjucks」の紹介です。

node.js + expressでWebページを作成する場合、サーバーからのデータを表示させる為 " EJS "や " jade "、その他様々なテンプレートエンジンを使って開発を行っていくことが多いのではないのでしょうか。

EJSはRubyでよく使われているERBテンプレートに文法がよく似ており、Railsを使っていた人には取っ付き易いテンプレートですが、
Node.js用の "PythonのDjangoテンプレート"や "PHPのTwigに"書き方似ていたり 機能が豊富なテンプレートはないの?」っという人にオススメなのが「Nunjucks」です。

{# Nunjucksのテンプレート構文サンプル #}
{% extends "master.njk" %}

{% block header %}
<h1>{{ title }}</h1>
{% endblock %}

{% block content %}
<ul>
  {% for name, item in items %}
  <li>{{ name }}: {{ item }}</li>
  {% endfor %}
</ul>
{% endblock %}

NunjucksはJavascript上で動くテンプレートエンジンで、Python製のテンプレートエンジン「Jinja2」にインスパイアされており、Firefoxでお馴染みのMozillaが開発しています。

それでは Nunjucksを少し試してみましょう。

Nunjucksの導入 〜 Express上で使えるようにする

Nunjucksの導入はnpmパッケージを使ってコマンドライン上で行ないます。

# nunjucksのインポートコマンド
npm install nunjucks --save


Expressで使えるようにするためには、下記のようにNunjucksの設定を行う必要があります。

// ExpressでNunjucksを導入するサンプル
const
    express = require('express'),
    app = express(),
    // nunjucksをインポート
    nunjucks = require('nunjucks'),

// nunjucksをExpressに組み込む設定
nunjucks.configure('views', {
    autoescape: true,
    express: app
});
// publicフォルダ *この項目はExpressの設定です
app.use(express.static('public'));

//  Nunjucksを指定フォルダから使えるように"/view"フォルダにセット
// *この項目はExpressの設定です
app.set('views', __dirname + '/views');

app.get('/', (req, res) => {
    // 変数titleに割当
    res.render('index.njk', {
        title: 'Hello! nhkテンプレート!'
    });
});

// server
app.listen(3000, function() {
    console.log('Example app listening on port 3000!');
});


上のスニペットでviewsフォルダのindex.njkをレンダリングするようにしたので、下記のようにテンプレートに変数を割り当てられるようになりました。

{# /views/index.njk  #}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
  </head>
  
  <body>
    
    <h1>{{ title }}</h1>
    
  </body>
  
</html>


Nunjucksの基本的な使い方

冒頭でも触れましたが、Nunjucksの使い方はDjangoやTwigのテンプレートとホボ使い方が同じです。
例えば、変数の表示は {{ }} で囲みます。

{# 変数の表示 #}
{{ variable }}

{# 配列の場合 *下の二種類の書き方ができます #}
{{ variable.bar }}
{{ variable['bar'] }}


if elseの条件式、loop等の場合は{% %}で囲みます。EJBの場合、if文の最後は } で囲みますが、Nunjucksの場合は {% endif %}と書くことが出来ます。

{% if elseの条件式 %}

{% if hungry %}
  I am hungry
{% elif tired %}
  I am tired
{% else %}
  I am good!
{% endif %}

Nunjucks面白いところは 配列の値が空の場合もforループでelse文を使うことによって、 if val = 0のような空の場合の処理を書く必要もありせん。

var users = [{ id: 1, name: "name1" }, { id: 1 , name: "name2"}];

<h1>ループのサンプル</h1>
<ul>
{% for user in users %}
  <li>{{ user.name }}</li>
{% else %}
  <li>'user'の値が空の時に表示されます</li>
{% endfor %}
</ul>


DjangoテンプレートやTwigにはお馴染みのフィルター機能も使うことが出来ます。Jinja2をお使いの人であれば、書き換える必要なく、'join'や'sort'などを始め、各種フィルターの機能が沢山用意さています。

{# 文字列を繋げるjoinフィルター #}
<h2>{{ [1, 2, 3] | join('-') }}</h2>
{# output: 1-2-3 #}

{# 文字列の長さを返す lengthフィルター #}
<h3>{{ 'Hello' | length }}</h3>
{# output: 5  #}

Nunjucksドキュメント: filter

テンプレートを親テンプレートを継承するextendsメソッドや部分的に継承するうblockメソッドも用意されています。

{# master.njk *親テンプレート #}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{% block title %} {% endblock %}</title>
  </head>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>
{# masterを継承したテンプレート #}
{% extends "master.njk" %}

{% block title %} Inherited Title {% endblock %}

{% block content %}
  some content here. write something..
{% endblock %}


外部テンプレートを読み込むincludeも用意されています。

includeにignore missingというパラメーターを付けることも可能で、読み込むテンプレートが存在しない場合にエラーメッセージを回避することが出来ます。

{# 外部テンプレートの読み込み #}
{% include "somfile.njk" %}

{# ignoreオプションが付いているで、テンプレートが存在しない場合でもエラーメッセージが表示されません #}
{% include "somfile.njk" ignore missing %}


Summary

以上がjavascript製テンプレートエンジンNunjucksの紹介でした。

PythonでDjangoやPHPでSymfonyやSilacksフレームワークでフロント側を触っていた経験がある人なら、文法もほぼ同じなので簡単に使えると思います。

Expressでも簡単に使うことができ、Node.jsのMVCフレームワーク Adonis.jsにはデフォルトでNunjucksが採用されています。

PythonやPHP使いの人で、次はNode.jsの新規案件が、、っという人には特にオススメできるテンプレートなので、気になった人はゼヒ×2チェックしてみてください!

Nunjucks

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ