【Nunjucks+Gulp】変数と変数でよく使うフィルタについて

ishida

2018.01.22

前回の記事、JSテンプレートエンジン「Nunjucks」とgulpで快適HTMLコーディングでNunjucksについて、
ざっくりと駆け足でご説明しました。

今回からシリーズで？いろいろな機能を紹介できればと思います。

Nunjucksとは

FireFoxブラウザでおなじみmozilla謹製のJavaScriptテンプレートエンジンです。 Pythonテンプレートエンジン Jinja2 に影響を受けて、誕生しました。

githubでのstar数は、4886（2018/01/25現在）です。

Nunjuck

前準備

インストール

今回必要な、パッケージをインストールしておきます。

$ npm init
$ npm i -D gulp gulp-nunjucks-render

ファイルおよびディレクリ構成

srcからdistへ出力する想定です。

dist  
src  
 └ index.njk  
gulpfile.js  
paclage.json

gulp.file.js

「gulp nunjucks」のコマンドで処理を実行します。

const gulp = require('gulp');
const nunjucksRender = require('gulp-nunjucks-render');

gulp.task('nunjucks', function () {
  gulp.src([
    'src/**/*.njk'
  ])
    .pipe(nunjucksRender({
      path: ['src/']
    }))
    .pipe(gulp.dest('dist'));
});

Nunjucksの変数について

変数の設定

Nunjucksで変数を設定する場合は、以下のように記述します。

{% set title = "ページタイトル" %}

出力時に上記は表示されませんが、テンプレート処理部分のため改行が残ってしまいます。テンプレート行をトルツメしたい場合は、
ハイフン（-）をテンプレートタグの最初と最後に追記しておけばOKです。

{%- set title = "ページタイトル" -%}

変数の出力

変数を出力する場合は、以下となります。

{{ title }}

括弧内は、半角スペースがあってもなくても大丈夫です。

直接文字列をいれることも可能です。

{{ "hogehoge" }}

いろいろなフィルタ処理

変数にはフィルタを使用することができます。
pipe（|）でつなぐことで処理を実行します。

title

文字列の最初の文字を大文字します。

入力

{% set hoge = "i have a pen" %}
{{ hoge | title }}

出力

I Have A Pen

upper

文字列をすべて大文字に変更します。

入力

{% set hoge = "i have a pen" %}
{{ hoge | upper }}

出力

I HAVE A PEN

replace

文字列を置き換えます。

入力

{% set hoge = "I have a pen" %}
{{ hoge | replace ("a pen", "an apple") }}

出力

I have an apple

escape

文字列をエスケープして出力します。

入力

{% set hoge = "Q&A" %}
{{ hoge | escape }}

出力

F&amp;Q

urlencode

URLエンコードされた文字列を出力します。

入力

{% set url = "http://bashalog.c-brains.jp" %}
{{ url | urlencode }}

出力

http%3A%2F%2Fbashalog.c-brains.jp

まとめ

Nunjucksの変数について、よく使うフィルタとともにご紹介しました。
デフォルトで使えるフィルタも多いので、
記事に掲載した gulp で試してみるのも楽しいですよ。

次回は、分岐処理についてご紹介します。