テンプレートエンジン
初めに
以下、記事で実行するサンプルコードは以下の Git Hub で確認できます。
https://github.com/asakura-sakura/Express
テンプレートエンジンとは
あるデータモデルで表現される入力データをドキュメントに出力するための、ソフトウェアコンポーネントのことです。
Express.js のデータをそのまま HTML に出力する際に、API リクエストを行いレスポンスデータを加工する必要ありますが、テンプレートエンジンを利用することで諸々の煩雑な処理を省き、データを HTML として出力することが出可能です。
Express.js のテンプレートエンジン
Express.js のテンプレートエンジンを使うといっても、沢山種類があります。
| name | Git Hub | Recommended | level |
| EJS | https://github.com/mde/ejs | 〇 | easy |
| Jade/Pug | https://github.com/pugjs/pug | 〇 | easy |
| handlebars | https://github.com/handlebars-lang/handlebars.js | normal | |
| hogan.js | https://github.com/twitter/hogan.js/ | normal |
テンプレートエンジンを使うには、それぞれの npm パッケージをインストールし app.set で宣言をします。
EJS の使用方法
npm install --save ejs
app.set("view engine", "ejs");
app.set を使用して、テンプレートエンジンを登録します。
app.set("views", "./views");
次にテンプレートファイルを保存する場所をしてします。今回は views というディレクトリを作成し、そこに hello.ejs という名前で保存します。
// /テンプレートエンジン/ejs/index.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(8080, () => console.log("listening on http://localhost:8080"));
次に EJS ファイルを作成します。
EJS は HTML 要素をインデントで分けて追加していきます。
// /テンプレートエンジン/ejs/views/index.js
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p><%= message %></p>
</body>
</html>
それぞれファイルの作成ができたら、実行し localhost:8080 で確認してみましょう
以下が表示されるはずです。
pug の使用方法
npm install --save pug
app.set("view engine", "pug");
app.set を使用して、テンプレートエンジンを登録します。
app.set("views", "./views");
次にテンプレートファイルを保存する場所をしてします。今回は views というディレクトリを作成し、そこに hello.pug という名前で保存します。
// /テンプレートエンジン/pug/index.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(8080, () => console.log("listening on http://localhost:8080"));
次に pug ファイルを作成します。
基本的に HTML 要素をインデントで分けて追加していきます。
// /テンプレートエンジン/pug/views/index.pug
doctype html
html
head
title Hello Pug
body
p #{ message }
上の pug ファイルと下のコードは同値です。
<!DOCTYPE html>
<html>
<head>
<title>Hello Pug</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
それぞれファイルの作成ができたら、実行し localhost:8080 で確認してみましょう
以下が表示されるはずです。
handlebars の使用方法
express-handlebars をインストール
npm install --save express-handlebars
// /テンプレートエンジン/handlebars/index.js
var express = require("express");
var exphbs = require("express-handlebars");
var app = express();
app.engine("handlebars", exphbs());
app.set("view engine", "handlebars");
app.get("/", function(req, res) {
const message = "Hello World";
res.render("./hello", { message: message });
});
app.listen(8080, () => console.log("listening on http://localhost:8080"));
// /テンプレートエンジン/handlebars/views/layouts/main.handlebars
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example App</title>
</head>
<body>
{{{body}}}
</body>
</html>
// /テンプレートエンジン/handlebars/views/layouts/index.handlebars
<h1>{{message}}</h1>
それぞれファイルの作成ができたら、実行し localhost:8080 で確認してみましょう
以下が表示されるはずです。
まとめ
以上のように様々なテンプレートエンジンがあり、エクスプレスで web アプリケーションを作成するうえでとても重宝します。
様々なテンプレートエンジンが存在するのでお好みで使用しましょう