Pug

Pug ハンドブック

このハンドブックでは、Node.js におけるテンプレートエンジン Pug を使用して Web アプリケーションを作成する方法を解説します。express-generator を利用して素早くプロジェクトを構築し、Pug を使ったビューの実装までを説明します。

必要条件

以下のツールをインストールしておく必要があります：

• Node.js (バージョン16以上推奨)
• npm または yarn

プロジェクトの初期設定

まず、express-generator をインストールします。

# express-generator をインストール
npm install express-generator

続いて、新しいプロジェクトを作成します。

# プロジェクトを作成 (ビューエンジンに pug を指定)
npx express --view=pug my-pug-app

# プロジェクトディレクトリに移動
cd my-pug-app

# 依存パッケージをインストール
npm install

この手順で以下のようなディレクトリ構成が生成されます：

my-pug-app/
├── app.js
├── bin/
├── public/
├── routes/
├── views/
├── package.json
└── ...

サーバーの起動

以下のコマンドでサーバーを起動します。

npm start

ブラウザで http://localhost:3000 にアクセスすると、初期設定された Express アプリが表示されます。

Pug を使ったビューの作成

views/ フォルダ内に Pug テンプレートが配置されます。デフォルトでは views/index.pug が用意されています。

Pug テンプレートの例

以下は、views/index.pug の基本的な例です：

views/index.pug

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    title #{title}
  body
    h1 #{message}

#{...} を使用すると、サーバー側から渡された変数を埋め込むことができます。

詳細は「Pug記法」を参照

ルートの設定

ルートファイル（routes/index.js）を編集して、ビューにデータを渡します。

routes/index.js

import express from 'express';
const router = express.Router();

/* GET home page. */
router.get('/', function (req, res) {
  res.render('index', { title: 'Pug Example', message: 'Welcome to Pug!' });
});

export default router;

サーバーを再起動し、ブラウザで確認すると、Pug テンプレートに渡されたデータが反映されます。

スタティックファイルの利用

public/ フォルダに CSS や JavaScript、画像ファイルを配置できます。

例

public/stylesheets/style.css

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

Pug テンプレートで以下のように読み込みます：

link(rel="stylesheet", href="/stylesheets/style.css")

Express の中間処理

新しいルートや中間処理を追加するには、app.js を編集します。

例

app.js に API ログ機能を追加

app.js

import logger from 'morgan';

app.use(logger('dev')); // リクエストをログに出力

まとめ

express-generator を使うことで、Pug を利用した Web アプリケーションを素早く構築できます。このハンドブックをもとに、Pug の柔軟なテンプレート機能を活用してください。