Nunjucksとは？

Nunjucksは2014年ごろ、MozillaのエンジニアであるJames Long氏によって開発された、JavaScript向けテンプレートエンジンです。Jinja2の影響を受けています。

👉 HTMLを「効率よく・使い回して」作るための仕組み（テンプレートエンジン）です。

特にEleventyでは、

  • レイアウト用のテンプレート（共通デザイン）
  • データの差し込み
  • パーツの使い回し

をするために使われます。

Nunjucksの標準仕様は？

Nunjucks（公式サイト）で公開されています。

Nunjucksの作者の方、関係者の方々に、これらの便利な技術を公開していただいたこと、この場をお借りして感謝とお礼を申し上げます。

※　Nunjucksの詳細や、正確な仕様については、公式サイトを参照してください。

基本的なの書き方（これだけ覚えればOK）

① 変数を表示する

name 変数の値を表示する。

{{ name }}

② 条件分岐（if）

isLoginが undefined / null / 空文字でなければ　ログイン中　を表示する。

{% if isLogin %}
  ログイン中
{% endif %}

③ 繰り返し（for）

listから１つずつitemに取り出し、箇条書きで表示する。

{% for item in list %}
  <li>{{ item }}</li>
{% endfor %}

④ コメント

{# これは表示されません #}

便利な機能（フィルター）

Nunjucksには、値を加工する為のフィルターと呼ばれる便利な機能が備わっています。

■ フィルターの書き方は？

書き方はとてもシンプル👇

{{ 値 | フィルター }}

■ よく使うフィルター（実用重視）

① 文字を加工

{{ "hello world" | upper }}

👉 結果：HELLO WORLD

{{ "HELLO" | lower }}

👉 結果：hello

② 文字を置き換え

{{ "こんにちは太郎" | replace("太郎", "花子") }}

👉 結果：こんにちは花子

③ 配列を結合

{{ ["りんご", "みかん", "バナナ"] | join(", ") }}

👉 結果：りんご, みかん, バナナ

④ HTMLをそのまま表示（重要）

{{ "<strong>重要</strong>" | safe }}

👉 HTMLとして表示される

※これを使わないとエスケープされる

⑤ 配列の要素数を取得

{{ ["A", "B", "C"] | length }}

👉 結果：3

⑥ 並び替え

{{ [3,1,2] | sort }}

👉 結果：1,2,3

{{ [3,1,2] | reverse }}

👉 結果：2,1,3

■ フィルターの組み合わせ（重要）

フィルターは連続して使えます👇

{{ "hello world" | upper | replace("WORLD", "NUNJUCKS") }}

👉 結果：HELLO NUNJUCKS

■ Eleventyでよくある実例

① 日付フォーマット

{{ page.date | date("YYYY/MM/DD") }}

👉 ブログの日付表示

② タグ一覧表示

{{ tags | join(", ") }}

👉 タグをカンマ区切りで表示

③ 抜粋テキスト

{{ content | striptags | truncate(100) }}

👉 HTMLタグを除去＋100文字に制限

Eleventyでの具体的な使い方（ここが重要）

① レイアウト用のテンプレート（共通デザイン）

レイアウト用のテンプレートを下記のように定義する

<!-- layout.njk -->
<html>
  <body>
    {{ content }}
  </body>
</html>

Markdown側で、設定（フロントマター）に”layout.njk”を定義する。👇

---
title: Nunjucksの便利さ
layout: layout.njk
---

# {{ title }}

👉 Eleventyを実行すると、Markdownの内容が {{ content }} に入り、下記のようなHTMLが出力される

<!-- layout.njk -->
<html>
  <body>
    <h1>Nunjucksの便利さ</h1>
  </body>
</html>

② パーツの使い回し（include）

ヘッダー用のテンプレートを下記のように定義する。

<!-- header.njk -->
<head>
  <title>ヘッダーの共通化</title>
</head>

レイアウト用のテンプレートを下記のように定義する。

<!-- layout.njk -->
<html>
  {% include "header.njk" %}
  <body>
    <h1>Nunjucksの便利さ</h1>
  </body>
</html>

👉 Eleventyを実行すると、ヘッダーが差し込まれ、下記のような1つのテンプレートとして認識されます。

<!-- layout.njk -->
<html>
  <!-- header.njk -->
  <head>
    <title>ヘッダーの共通化</title>
  </head>
  <body>
    <h1>Nunjucksの便利さ</h1>
  </body>
</html>

👉 ヘッダーやフッターを共通化できる。

③ データの表示

Markdownで、設定（フロントマター）に下記のように定義する。👇

---
title: Nunjucksの便利さ
description: Nunjucksの便利さについて説明しています。
---

Markdownの本文もしくは、レイアウト用のテンプレートで、下記のように指定すると

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

下記のように、記事ごとの設定（フロントマター）の情報が差し込まれる

<h1>Nunjucksの便利さ</h1>
<p>Nunjucksの便利さについて説明しています。</p>

👉 記事ごとの情報を自動で表示できる。

よくある使い方（実例）

記事をMarkdownで、”nunjucks.md”として、下記のように定義する。👇

---
title: Nunjucksの便利さ
date: 2026-04-23
description: Nunjucksの便利さについて説明しています。
layout: layout.njk
tags: post
---

# Nunjucksとは？

Nunjucksは、便利な構文です。

記事ページのレイアウト用テンプレート

<!-- layout.njk -->
<html>
  <body>
    <h1>{{ title }}</h1>
    <p>{{ date }}</p>
    <div>
      {{ content }}
    </div>
  </body>
</html>

記事一覧ページのレイアウト用テンプレート

<!-- index.njk -->
<html>
  <body>
    <ul>
      {% for post in collections.post %}
        <li>
          <a href="{{ post.url }}">{{ post.data.title }}</a>
        </li>
      {% endfor %}
    </ul>
  </body>
</html>

👉 Eleventyを実行すると、下記の２つのHTMLが作成される

記事ページ( _site/nunjucks/index.html)

<html>
  <body>
    <h1>Nunjucksの便利さ</h1>
    <p>2026-04-23</p>
    <div>
      <h1>Nunjucksとは？</h1>

      Nunjucksは、便利な構文です。
    </div>
  </body>
</html>

記事一覧ページ (_site/index.html)

<html>
  <body>
    <ul>
        <li>
          <a href="/nunjucks/index.html">Nunjucksの便利さ</a>
        </li>
    </ul>
  </body>
</html>

👉 自動で記事一覧が作られる。

初心者がつまずきやすいポイント

{{ }} と {% %} の違い

書き方 役割
{{ }} 値を表示する
{% %} 処理を書く（if / for など）

ファイルの拡張子

  • .njk → Nunjucksテンプレート
  • .md → Markdown

👉 両方を組み合わせて使うのがEleventyの基本

まとめ

Nunjucksは、HTMLを自動化して、使い回しを簡単にするツールです。

強みは：

  • シンプルで覚えやすい
  • JavaScriptに近い感覚で書ける
  • Eleventyと相性が抜群

Eleventyと組み合わせることで、

  • コードの重複を減らす
  • 管理しやすいサイトを作る
  • 更新作業を楽にする

といったメリットがあります。