Pugを使用してNode.jsとExpressでビューテンプレートを作成する方法

以下に、Pugを使用してNode.jsとExpressでビューテンプレートを作成する手順を示します。

ステップ1: プロジェクトのセットアップ まず、Node.jsとExpressをインストールし、新しいプロジェクトを作成します。

$ mkdir myproject
$ cd myproject
$ npm init -y
$ npm install express pug

ステップ2: Expressアプリケーションの構築 次に、Expressアプリケーションを作成し、Pugをビューテンプレートエンジンとして設定します。

// app.jsファイル
const express = require('express');
const app = express();
app.set('view engine', 'pug');
app.set('views', './views');
// ルートハンドラー
app.get('/', (req, res) => {
  res.render('index', { title: 'My Express App' });
});
app.listen(3000, () => {
  console.log('アプリケーションがポート3000で実行されています。');
});

ステップ3: Pugテンプレートの作成 viewsディレクトリ内にPugテンプレートファイルを作成します。例として、index.pugを作成します。

// views/index.pugファイル
doctype html
html
  head
    title= title
  body
    h1= title
    p ようこそ、Pugを使用したExpressアプリケーションへ！

ステップ4: アプリケーションの実行 以下のコマンドを使用して、アプリケーションを実行します。

$ node app.js

ブラウザで http://localhost:3000 を開くと、Pugテンプレートが表示されます。

以上が、Pugを使用してNode.jsとExpressでビューテンプレートを作成する方法です。この方法を使えば、動的なコンテンツを効果的に生成できます。