【実践編】Node.js, Express, Pugを使ってWebアプリケーションを開発しよう

2024-06-24

Node.js、Express、Pug で HTML を美しくフォーマットする方法

Pug をインストールするには、次のコマンドを実行します。

npm install pug

Express で Pug を使用するように設定するには、以下の手順を行います。

app.engine() メソッドを使用して、Pug エンジンを Express に登録します。

app.engine('pug', require('pug').__express);

app.set() メソッドを使用して、Pug をデフォルトのテンプレートエンジンとして設定します。

app.set('view engine', 'pug');

Pug テンプレートは .pug 拡張子を持つファイルです。Pug テンプレートの構文は HTML に似ていますが、より簡潔で記述しやすくなっています。

たとえば、次の Pug テンプレートは、<h1> タグと <p> タグを含むシンプルな HTML ページを作成します。

doctype html
html
  head
    title My Website
  body
    h1 My Website
    p This is my website.

Express で Pug テンプレートをレンダリングするには、res.render() メソッドを使用します。

このメソッドには、テンプレートファイルの名前と、テンプレートに渡すオプションのデータオブジェクトを渡します。

たとえば、次のコードは、index.pug テンプレートをレンダリングして、res オブジェクトに送信します。

app.get('/', function (req, res) {
  res.render('index', { title: 'My Website' });
});

このコードは、index.pug テンプレートをレンダリングし、title 変数に My Website という値を設定して、res オブジェクトに送信します。

HTML を整形する

Pug には、HTML を整形するためのいくつかの組み込み機能が用意されています。

たとえば、次のコードは、p タグ内のすべてのテキストを自動的に折り返します。

p This is a long paragraph of text that will be automatically wrapped.

Pug には、他にも多くの機能があります。詳細については、Pug のドキュメント https://pugjs.org/ を参照してください。

補足

Express と Pug を組み合わせて使用すると、動的かつ見やすい Web アプリケーションを簡単に作成できます。
Pug は、HTML をより簡潔で記述しやすくする優れたテンプレートエンジンです。

プロジェクトのセットアップ

まず、新しい Node.js プロジェクトを作成する必要があります。これを行うには、次のコマンドを実行します。

npm init -y
npm install express pug

ルート

次に、app.js という名前のファイルを作成し、以下のコードを追加します。

const express = require('express');
const app = express();
const pug = require('pug');

// Pug テンプレートを views ディレクトリに設定する
app.set('views', './views');
app.set('view engine', 'pug');

// データ
const posts = [
  {
    title: 'My First Post',
    content: 'This is my first blog post.'
  },
  {
    title: 'My Second Post',
    content: 'This is my second blog post.'
  }
];

// ルートパス
app.get('/', function (req, res) {
  res.render('index', { posts: posts });
});

// ポート 3000 でサーバーを起動する
app.listen(3000, function () {
  console.log('Server listening on port 3000');
});

このコードは、以下のことを行います。

Express と Pug をインストールします。
Pug テンプレートを views ディレクトリに設定します。
posts という名前の配列を作成し、ブログ記事のデータを含めます。
/ パスへの GET リクエストを処理します。
index.pug テンプレートをレンダリングし、posts 配列をテンプレートに渡します。
ポート 3000 でサーバーを起動します。

テンプレート

次に、views ディレクトリに index.pug という名前のファイルを作成し、以下のコードを追加します。

doctype html
html
  head
    title My Blog
  body
    h1 My Blog
    each post in posts
      article
        h2 #{post.title}
        p #{post.content}

My Blog というタイトルの HTML ページを作成します。
posts 配列をループ処理し、各記事を表示します。
各記事には、h2 タグと p タグを使用して、タイトルとコンテンツを表示します。

実行

node app.js

ブラウザで http://localhost:3000 にアクセスすると、以下のようになります。

My Blog

My First Post This is my first blog post.

このサンプルコードは、Node.js、Express、Pug を使用して、シンプルなブログ記事ページを作成する方法を示しています。このコードを基盤にして、独自のブログアプリケーションを作成できます。

Express で Pug を使って HTML を美しくフォーマットするその他の方法

カスタムビューヘルパーを作成して、HTML の整形を処理することができます。これは、テンプレート内で複雑なロジックを使用する必要がある場合に役立ちます。

たとえば、次のカスタムビューヘルパーは、テキストを折り返します。

function wrapText(text, width) {
  return text.replace(/.{width}(?=\b)/g, '$0\n');
}

このヘルパーをテンプレートで使用するには、次のようにします。

p= wrapText(post.content, 50)

このコードは、post.content 変数内のテキストを 50 文字の行で折り返します。

Pug ミックスインを使用して、テンプレートコードを再利用することができます。これは、同じコードを複数のテンプレートで使用する場合に役立ちます。

たとえば、次の Pug ミックスインは、記事カードを作成します。

mixin articleCard(post)
  article
    h2 #{post.title}
    p #{post.content}

each post in posts
  +articleCard(post)

このコードは、posts 配列内の各記事に対して記事カードを生成します。

たとえば、次の Pug フィルターは、テキストを大文字に変換します。

filter uppercase(text)
  = text.toUpperCase()

p #{post.title | uppercase}

Pug テンプレートエンジンオプションを使用して、テンプレートのレンダリング方法を制御することができます。

たとえば、pretty オプションを true に設定すると、Pug は HTML 出力を整形します。

app.render('index', { posts: posts }, { pretty: true });

サードパーティ製ライブラリを使用する

HTML を整形するためのサードパーティ製ライブラリをいくつか使用することができます。

たとえば、HTML Beautifier は、HTML 出力を整形するためのよく知られたライブラリです。

このライブラリを Express で使用するには、次のようにします。

const htmlBeautifier = require('html-beautifier');

app.get('/', function (req, res) {
  const html = pug.render('index', { posts: posts });
  const formattedHtml = htmlBeautifier.beautify(html);
  res.send(formattedHtml);
});

このコードは、index.pug テンプレートをレンダリングし、posts 配列をテンプレートに渡し、html-beautifier ライブラリを使用して HTML 出力を整形し、整形された HTML をレスポンスとして送信します。

これらの方法はほんの一例です。Express で Pug を使って HTML を美しくフォーマットする方法には、他にも多くの方法があります。最良の方法は、特定のニーズに合った方法を見つけることです。

node.js express pug