Nunjucksテンプレート内でjavascriptの関数を使用する

javascript web制作

テンプレートエンジンnunjucksでテンプレートファイルにjavascript関数を使用することはできません。

例えば次のようなコードはコンパイラエラーになります。

{%- set currentTime = new Date() -%}

nunjucks使用の際はテンプレート内で関数を使うことはできません。

目次
  1. Nunjucksとは何なのか
  2. Nunjucksで良い機能
  3. npmでNunjucksを使うまで

Nunjucksとは何なのか

Nunjucksはjavascript製テンプレートエンジンの一つです。

Firefoxで有名なMozillaによって開発されています。

Nunjucksで良い機能

  • 他のテンプレートエンジンpugやPHPのtwigのようにblock機能がついている。
  • pugもよいが普通のタグ構造がわからなくなる。
  • gulpを使わずともnpm-scriptで処理を記入することができる。

npmでNunjucksを使うまで

下記のようにコマンドを実行します。

mkdir projects

cd projects

npm init -y

npm i nunjucks-cli -D

npm init で生成されたpackage.jsonに下記コードを追加します

"scripts": {
    "build:html": "nunjucks ./src/templates/**/*.njk -p ./src/templates/ -o ./dist/" 
}

ここまで描いてsrcコードからdistコードに正しい書き方で保存されます