ejs（テンプレートエンジン）
- 特徴
- 高速なコンパイルとレンダリング
- テンプレートの静的キャッシュが可能
- 表記
- 表記方法はHTMLとほぼ同じ
- 出力する値は<%= value %>で表現
基本構文
- 開始タグ
- スクリプトタグ : <%
- 出力タグ : <%=
- 出力タグ（アンエスケープ） : <%-
- コメント : <%#
- 終了タグ
- 終端タグ : %>
- 終端タグ（改行削除） : -%>
- その他
- エスケープ : <%%
利用方法
-
npm install ejsする - setメソッドで"view engine"というconfigに対し、テンプレートエンジンを指定
-
renderメソッドでレンダリングを行う
- デフォルトだとviewsディレクトリからの相対パスになることに注意
app.js
var express = require("express");
var app = express();
// テンプレートエンジンの指定
app.set("view engine", "ejs");
app.get("/", function (req, res) {
var data = {
items: [
{name: "<h1>リンゴ</h1>"},
{name: "<h2>バナナ</h2>"},
{name: "<h3>スイカ</h3>"}
]
};
// レンダリングを行う
res.render("./index.ejs", data);
});
app.listen(3000);
index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<%- include("./item.ejs", items) %>
</body>
</html>
item.ejs
<ul>
<% for (let item of items) { %>
<li><%- item.name %></li>
<% } %>
</ul>
静的ファイルを読み込んだ利用例
- staticメソッドを利用する
/app.js
var express = require("express");
var app = express();
// staticメソッドを利用し、指定ディレクトリ以下の静的ファイルを読み込む
app.use("/public", express.static(__dirname + "/public"));
// routeの設定
app.use("/", require("./routes/index.js"));
app.listen(3000);
/routes/index.js
var router = require("express").Router();
router.get("/", (req, res) => {
// index.ejsをレンダリング
res.render("./index.ejs");
});
module.exports = router;
index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/public/bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h1>Hello World</h1>
</div>
</body>
</html>