Nunjucksとは？ Web制作を効率化するテンプレートエンジン
Nunjucks（ナンジャックス）とは、Mozillaが開発したJavaScript製の「テンプレートエンジン」です。Pythonのテンプレートエンジン「Jinja」の影響を受けており、ブロック継承、オートエスケープ、マクロ、非同期制御といった強力な機能を備えています。
Webサイト制作において、ヘッダーやフッターのような共通パーツを管理する場合、これまではPHPのincludeを使って読み込むことが多かったかもしれません。しかしNunjucksを使えば、PHPが動かない環境でも、HTMLをパーツ化・共通化し、効率的にコーディングを進めることができます。
この記事では、Nunjucksの基本的な考え方と、特に便利な「マクロ」や「for文」を使った実践的な記述方法について解説します。
Nunjucksの基本的な使い方（ファイル構成例）
Nunjucksを使った開発では、多くの場合/src/（ソース）ディレクトリ内でファイルを編集し、それがコンパイルされて/dist/（配布）ディレクトリにHTMLファイルとして出力されます。（※GulpやWebpackなどのビルドツールと組み合わせて使うのが一般的です）。
例えば、以下のようなファイル構成で開発を進めるケースが多いです。
- HTMLの元ファイル:
/src/njk/配下に、ページの元となる.njkファイル（例:index.njk,about.njk）を作成し、編集します。 - 共通パーツファイル:
/src/njk/_includes/フォルダ内に、ヘッダー（Header.njk）やフッター（Footer.njk）などの共通パーツを作成し、格納します。 - CSS（Sass）:
/src/scss/内の.scssファイルを編集します。 - JavaScript:
/src/js/内の.jsファイルを編集します。
開発の際は、既存のコアファイル（フレームワークの基本ファイルなど）を直接変更せず、独自のクラス名やファイル・フォルダ構成で完結させるように意識すると、メンテナンス性が高まります。
実践的な記述方法：マクロとfor文
Nunjucksの強力な機能である「マクロ（macro）」と「for文（ループ処理）」を使った実践例を見ていきましょう。ここでは、トップページのスライダーを例に解説します。
1. パーツファイル（マクロ）の定義
まず、/src/njk/_includes/home/Hero.njk のようなパーツファイルで、スライダーのHTML構造を「マクロ」として定義します。マクロとは、再利用可能なHTMLのひな形のようなものです。
{# ▼/src/njk/_includes/home/Hero.njk #}
{# 「Hero」という名前のマクロを定義。propsでデータを受け取る #}
{% macro Hero( props ) %}
<div class="hero-slider">
{# props.list（配列）が渡されたら、for文でループ処理 #}
{% for item in props.list %}
<div class="hero-slider__item">
<picture>
<source media="(max-width: 767px)" srcset="{{ item.imageS }}">
<img src="{{ item.image }}" alt="{{ item.alt }}">
</picture>
</div>
{% endfor %}
</div>
{% endmacro %}このコードでは、propsという引数でデータを受け取り、その中のprops.listという配列をfor文でループさせて、スライド（.hero-slider__item）を必要な数だけ生成しています。
2. 呼び出し元ファイル（本体）での利用
次に、/src/njk/index.njk のようなメインのファイル側で、先ほど定義したマクロを読み込み、データを渡して呼び出します。
{# ▼/src/njk/index.njk #}
{# 1. fromでマクロファイルを読み込み、「Hero」という名前でimportする #}
{% from 'home/Hero.njk' import Hero %}
{# ... (bodyタグなど) ... #}
{# 2. 「Hero」マクロを呼び出し。「list」という名前で配列データを渡す #}
{{ Hero( {
list: [
{
image: '/_dummy-images/hero_01_1280x512.jpg',
imageS: '/_dummy-images/hero_01_700x900.jpg',
alt: 'やさしい、冬支度。'
},
{
image: 'https://img.oyamada.ne.jp/1280x513',
imageS: 'https://img.oyamada.ne.jp/750x900',
alt: ''
},
{
image: 'https://img.oyamada.ne.jp/1280x513',
imageS: 'https://img.oyamada.ne.jp/750x900',
alt: ''
}
{# ... 必要なだけスライドデータを追加 ... #}
]
} ) }}このように、HTML構造（マクロ側）とデータ（呼び出し側）を分離することで、データの追加や修正が格段に楽になります。スライドの枚数を変更したい場合も、このlist配列を編集するだけで済みます。
3. マクロに引数を渡す（応用）
マクロには、より柔軟な引数を渡すことも可能です。例えば、共通のページヘッダー（PageHeader.njk）を使いつつ、トップページだけ見出しを<h1>にしたい場合があります。
{# トップページの場合 #}
{{ PageHeader( { asH1: true, title: 'メインタイトル' } ) }}
{# 下層ページの場合 #}
{{ PageHeader( { title: 'サブページのタイトル' } ) }}パーツファイル（PageHeader.njk）側では、このasH1がtrueかどうかをif文で判定し、出力するタグを変更する、といった制御が可能です。これにより、パーツの共通性を保ちつつ、ページごとに柔軟な出し分けが実現できます。
まとめ：Nunjucksでコーディングを効率化しよう
Nunjucksを導入することで、HTMLコーディングの「繰り返し」作業を大幅に削減し、コンポーネント（パーツ）ベースの効率的な開発が可能になります。特にマクロとfor文は、更新頻度の高いニュース一覧やスライダーなどで絶大な効果を発揮します。
Webサイト制作の効率化に悩んでいる方は、ぜひNunjucksの導入を検討してみてはいかがでしょうか。
参考リンク
よくある質問（FAQ）
Q1. Nunjucksを使うには、他に何が必要ですか？
A1. Nunjucksは、.njkファイルを.htmlファイルに変換（コンパイル）するプロセスが必要です。そのため、Gulp (gulp-nunjucks-render) や Webpack (nunjucks-webpack-plugin) などのタスクランナーやビルドツールと組み合わせて使用するのが一般的です。
Q2. NunjucksとPug（Jade）やEJSとの違いは何ですか？
A2. これらはすべて人気のテンプレートエンジンですが、構文に大きな違いがあります。Pugはインデント（字下げ）で構造を表現する独自の記法を持つのに対し、NunjucksやEJSはHTMLの構文に近いため、HTMLの知識がある人にとっては学習コストが低いのが特徴です。特にNunjucksは、マクロや継承など、大規模な開発にも耐えうる強力な機能が充実しています。
Q3. PHPでincludeするのと、何が違うのですか？
A3. 最大の違いは「いつ実行されるか」です。Nunjucksは開発時（ビルド時）に実行され、**静的なHTMLファイル**を生成します。一方、PHPのincludeは、ユーザーがWebサイトにアクセスした際（リクエスト時）に**サーバー側で実行**され、動的にHTMLを結合します。Nunjucksで生成されたサイトは静的HTMLのため、表示速度が速く、サーバー負荷が低いというメリットがあります。