Nunjucks

概要

Nunjucksは、Mozilla が開発した強力なJavaScriptテンプレートエンジンです。Jinja2に触発された構文を持ち、豊富な機能と柔軟性を提供します。

インストールと設定

Node.jsでのインストール

npm install nunjucks

基本的なセットアップ

const nunjucks = require('nunjucks');
nunjucks.configure('views', {
    autoescape: true,
    noCache: false,
    watch: true
});

基本構文

変数の表示

変数を表示するには二重中括弧({{}})を使用します：

<h1>{{ title }}</h1>
<p>{{ description }}</p>

フィルタ

フィルタを使用して値を変換できます：

{{ name | title }}
{{ date | date('YYYY-MM-DD') }}
{{ text | truncate(100) }}

制御構文

条件分岐

if文による条件分岐：

{% if user %}
  <h1>{{ user.name }}さん、こんにちは！</h1>
{% elif guest %}
  <h1>ゲストさん、こんにちは！</h1>
{% else %}
  <h1>こんにちは！</h1>
{% endif %}

ループ処理

for文によるループ処理：

{% for item in items %}
  <div class="item">
    <h2>{{ item.title }}</h2>
    <p>{{ item.description }}</p>
  </div>
{% endfor %}

テンプレート継承

基本レイアウト

layout.njkファイル：

layout.njk

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

子テンプレート

page.njkファイル：

{% extends "layout.njk" %}

{% block title %}ページタイトル{% endblock %}

{% block content %}
<h1>ページ内容</h1>
{% endblock %}

マクロ

マクロの定義と使用

{% macro input(name, value='', type='text') %}
    <input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{% endmacro %}

{{ input('username') }}
{{ input('password', '', 'password') }}

インクルード

パーシャルの使用

{% include "header.njk" %}
{% include "sidebar.njk" ignore missing %}

カスタムフィルタとエクステンション

カスタムフィルタの作成

env.addFilter('shorten', function(str, count) {
    return str.slice(0, count || 5);
});

カスタムタグの作成

env.addExtension('CustomTag', new function() {
    this.tags = ['customtag'];
    this.parse = function(parser, nodes, lexer) {
        // パース処理
    };
});

非同期処理

非同期フィルタ

env.addFilter('async', function(str) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(str.toUpperCase());
        }, 1000);
    });
}, true);

セキュリティ

エスケープ処理

autoescapeオプション
safe フィルタの使用
XSS対策

パフォーマンス最適化

キャッシュ設定

テンプレートのキャッシュ
プリコンパイル
最適化オプション

デバッグとトラブルシューティング

デバッグ方法

debugステートメント
エラー処理
トレース情報

環境設定

プロダクション設定

nunjucks.configure('views', {
    autoescape: true,
    noCache: false,
    watch: false,
    throwOnUndefined: false
});

ベストプラクティス

コード整理

ファイル構成
命名規則
モジュール化

エラー処理

try/catchブロック
エラーページ
ログ記録

統合とツール

フレームワーク統合

Express.js
Next.js
その他のフレームワーク

ビルドツール

Webpack
Gulp
Grunt

テスト

テンプレートのテスト

ユニットテスト
統合テスト
スナップショットテスト

APIリファレンス

主要なAPI

configure()
render()
renderString()
compile()

コミュニティリソース

ドキュメント

公式ガイド
チュートリアル
サンプルプロジェクト

サポート

GitHubイシュー
Stack Overflow
コミュニティフォーラム