Express.jsのテンプレートエンジンの使用する方法
Express.jsにおけるテンプレートエンジンの基本的な使用方法と、EJS、Pug、Handlebarsの例を解説します。
概要
この記事ではExpress.jsのテンプレートエンジンについて説明します。実行サンプルコードは次のGitHubリンクから確認できます。
ここでは、以下バージョンを使用した、ルーティング方法を説明します。
Express v4.18.1
nodejs v19.7.0
また、今回作成するコードは全て、GitHubに掲載しています。
テンプレートエンジンとは？
テンプレートエンジンは、特定のデータモデルに基づいて入力データをドキュメント形式で出力するためのソフトウェアコンポーネントです。Express.jsでデータをHTMLに出力する際、APIリクエストを行いレスポンスデータを加工する必要がありますが、テンプレートエンジンを利用することで、この一連の煩雑な処理を簡素化し、データをHTML形式で簡単に出力することが可能になります。
Express.jsの主要なテンプレートエンジン
Express.jsでは多数のテンプレートエンジンを使用することが可能です。以下にいくつかの主要なテンプレートエンジンを示します。
| 名前 | GitHub | 推奨 | 難易度 |
|---|---|---|---|
| EJS | リポジトリ | 〇 | 初級 |
| Jade/Pug | リポジトリ | 〇 | 初級 |
| Handlebars | リポジトリ | 中級 | |
| Hogan.js | リポジトリ | 中級 |
テンプレートエンジンを利用するためには、各エンジンのnpmパッケージをインストールし、app.setで宣言します。
EJSの使用する方法
EJSを使用するための初期設定は次の通りです。
npm install --save ejs
次に、テンプレートファイルを保存するディレクトリを設定します。この例では、viewsディレクトリを作成し、その中にhello.ejsというファイルを保存します。
EJSのサンプルコードは次の通りです。
ejs.js
var express = require("express");
var app = express();
app.set("view engine", "ejs");
app.set("views", "./views");
app.get("/", function(req, res) {
const message = "hello world";
res.render("./hello", { message: message });
});
app.listen(3000, () => console.log("listening on http://localhost:3000"));
EJSテンプレートはHTML要素をインデントで区切って追加します。
ejs.ejs
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p><%= message %></p>
</body>
</html>
以上の手順を踏んだら、アプリケーションを実行して、http://localhost:3000 にアクセスしてみましょう。
Pugの使用する方法
Pugの初期設定は次の通りです。
npm install --save pug
app.set("view engine", "pug");
app.set("views", "./views");
次に、テンプレートファイルを保存するディレクトリを設定します。今回はviewsディレクトリを作成し、その中にhello.pugというファイルを保存します。
Pugのサンプルコードは次の通りです。
pug.js
var express = require("express");
var app = express();
app.set("view engine", "pug");
app.set("views", "./views");
app.get("/", function(req, res) {
const message = "Hello World";
res.render("./hello", { message: message });
});
app.listen(3000, () => console.log("listening on http://localhost:3000"));
Pugテンプレートは基本的にHTML要素をインデントで区切って追加します。
doctype html
html
head
title Hello Pug
body
p #{ message }
上のpugファイルは次のHTMLと同等です。
<!DOCTYPE html>
<html>
<head>
<title>Hello Pug</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
すべてのファイルを作成したら、アプリケーションを実行して、http://localhost:3000 にアクセスしてみましょう。
Handlebarsの使用する方法
最初にexpress-handlebarsパッケージをインストールします。
npm install --save express-handlebars
次に、ExpressアプリケーションでHandlebarsをテンプレートエンジンとして設定します。
handlebars.js
var express = require("express");
const handlebars = require("express-handlebars");
var app = express();
app.engine("handlebars", handlebars.engine());
app.set("view engine", "handlebars");
app.set("views", "./views");
app.get("/", function (req, res) {
const message = "Hello World";
res.render("./hello", { message: message });
});
app.listen(3000, () => console.log("listening on http://localhost:3000"));
次にHandlebarsテンプレートを作成します。
/layouts/main.handlebars
<html>
<head>
<meta charset="utf-8" />
<title>Example App</title>
</head>
<body>
{{{body}}}
</body>
</html>
hello.handlebars
<p>{{ message }}<p>
すべてのファイルを作成したら、アプリケーションを実行して、http://localhost:3000 にアクセスしてみましょう。
まとめ
Express.jsで利用できるテンプレートエンジンは多数あり、それぞれの特性や状況に合わせて選ぶことが可能です。この記事で紹介したEJS、Pug、Handlebars以外にも多くのオプションが存在しますので、自身の好みや要件に応じて選びましょう。