Edited at

Expressにおけるejsの使い方

More than 1 year has passed since last update.


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>