【実践編】Node.js, Express, Pugを使ってWebアプリケーションを開発しよう
Node.js、Express、Pug で HTML を美しくフォーマットする方法
Pug をインストールする
Pug をインストールするには、次のコマンドを実行します。
npm install pug
Express で Pug を設定する
Express で Pug を使用するように設定するには、以下の手順を行います。
app.engine()メソッドを使用して、Pug エンジンを Express に登録します。
app.engine('pug', require('pug').__express);
app.set()メソッドを使用して、Pug をデフォルトのテンプレート エンジンとして設定します。
app.set('view engine', 'pug');
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 テンプレートをレンダリングする
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 のドキュメント を参照してください。
- Pug は、HTML をより簡潔で記述しやすくする優れたテンプレート エンジンです。
- Express と Pug を組み合わせて使用すると、動的かつ見やすい Web アプリケーションを簡単に作成できます。
まず、新しい 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');
});
このコードは、以下のことを行います。
- ポート 3000 でサーバーを起動します。
index.pugテンプレートをレンダリングし、posts配列をテンプレートに渡します。/パスへの GET リクエストを処理します。postsという名前の配列を作成し、ブログ記事のデータを含めます。- Pug テンプレートを
viewsディレクトリに設定します。 - Express と Pug をインストールします。
テンプレート
次に、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}
- 各記事には、
h2タグとpタグを使用して、タイトルとコンテンツを表示します。 posts配列をループ処理し、各記事を表示します。My Blogというタイトルの HTML ページを作成します。
実行
このコードを実行するには、次のコマンドを実行します。
node app.js
ブラウザで http://localhost:3000 にアクセスすると、以下のようになります。
My Blog
- My Second Post This is my second blog post.
カスタム ビュー ヘルパーを作成して、HTML の整形を処理することができます。これは、テンプレート内で複雑なロジックを使用する必要がある場合に役立ちます。
たとえば、次のカスタム ビュー ヘルパーは、テキストを折り返します。
function wrapText(text, width) {
return text.replace(/.{width}(?=\b)/g, '$0\n');
}
このヘルパーをテンプレートで使用するには、次のようにします。
p= wrapText(post.content, 50)
このコードは、post.content 変数内のテキストを 50 文字の行で折り返します。
Pug ミックスインを使用する
Pug ミックスインを使用して、テンプレート コードを再利用することができます。これは、同じコードを複数のテンプレートで使用する場合に役立ちます。
たとえば、次の Pug ミックスインは、記事カードを作成します。
mixin articleCard(post)
article
h2 #{post.title}
p #{post.content}
each post in posts
+articleCard(post)
このコードは、posts 配列内の各記事に対して記事カードを生成します。
Pug フィルターを使用する
Pug フィルターを使用して、HTML 出力を処理することができます。これは、テンプレート内で出力をフォーマットする必要がある場合に役立ちます。
たとえば、次の Pug フィルターは、テキストを大文字に変換します。
filter uppercase(text)
= text.toUpperCase()
p #{post.title | uppercase}
このコードは、post.title 変数内のテキストを大文字に変換します。
Pug テンプレート エンジンオプションを使用する
Pug テンプレート エンジンオプションを使用して、テンプレートのレンダリング方法を制御することができます。
たとえば、pretty オプションを true に設定すると、Pug は HTML 出力を整形します。
app.render('index', { posts: posts }, { pretty: true });
サードパーティ製ライブラリを使用する
HTML を整形するためのサードパーティ製ライブラリをいくつか使用することができます。
たとえば、 は、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 をレスポンスとして送信します。
node.js express pug
