14.
EJSのASPタグ
EJS の基本構文
ASPタグとは
テンプレートエンジンでは、テンプレートファイルにデータを受け渡して、処理することができます。EJS の場合は ASPタグの構文で記述します。
ASPタグの基本
EJSのテンプレート内で使用する主要なASPタグは、<% %>、<%= %>、<%- %> の3つです。
スクリプトタグ
<% %> の中に JavaScript の処理を記述できます。
<% 処理 %>
出力タグ（エスケープあり）
<%= %> で変数や式の評価結果をHTML出力します。
<%= 変数 %>
出力タグ（エスケープなし）
<%- 変数 %> も変数や式の評価結果をHTML出力しますが、コンテンツはHTMLエスケープされずにそのまま出力されます。
<%- 変数 %>
if()
if() 文は、構文の最初と終わりを <% %> で囲みます。この間にHTMLを記述します。
<% if (条件) { %>
<% } else if (条件) { %>
<% } %>
forEach()
forEach 文も同様に <% %> で囲みます。
<% 配列.forEach((変数, インデックス) => { %>
<% }) %>
for(in)
for 文も同様に <% %> で囲みます。
<% for (インデックス in 配列) { %>
<% } %>
while()
while 文も同様に <% %> で囲みます。
<% while (条件) { %>
<% } %>
データバインド
プログラムからテンプレートにデータを受け渡すには render() を利用し、第2引数にデータバインドします。
res.render(ファイルパス, データ)
データ表示
テンプレートでデータ表示するには <%= %> タグを利用します。
<%= 変数 %>
データバインド
トップページのルーティングで、index.ejs にdataオブジェクトをバインドします。
router.get('/', (req, res) => {
var data = {}
data.title = 'トップページ';
res.render('index.ejs', data);
})
データ表示
index.ejs でオブジェクト title を表示します。
<h1 class="h1"><%= title %></h1>
結果
プロフィールページ
データバインド
ルーティング /profile に user データを用意します。
routes.js
router.get("/profile", (req, res) => {
var user = {
id: 1,
name: '横浜 太郎',
birthplace: '横浜',
hobby: ['旅行', 'グルメ', 'スポーツ'],
}
})
データバインド
user、title をオブジェクトにして、profile/index.ejs にバインドします。
routes.js
router.get("/profile", (req, res) => {
var user = {
id: 1,
name: '横浜 太郎',
birthplace: '横浜',
hobby: ['旅行', 'グルメ', 'スポーツ'],
}
var data = {};
data.title = 'プロフィール';
data.user = user;
res.render('profile/index.ejs', data);
})
データ表示
「profile/index.ejs」で変数を表示します。hobbyは配列なので forEach で繰り返し表示します。
views/profile.ejs
<h1 class="h1"><%= title %></h1>
<div>
<dl>
<dt>名前</dt>
<dd><%= user.name %></dd>
<dt>出身地</dt>
<dd><%= user.birthplace %></dd>
<dt>趣味</dt>
<dd>
<% user.hobby.forEach((hobby) => { %>
<%= hobby %>
<% }) %>
</dd>
</dl>
</div>
商品一覧
EJS にデータ受け渡し
ルーティング /item で商品データを取得し、「item/index.ejs」に受け渡します。
router.get('/item', (req, res) => {
var data = {
title = '商品一覧',
items: item.get(),
};
res.render('item/index.ejs', data);
})
EJS でデータ表示
「item/index.ejs」で商品一覧を表示します。
views/item/index.ejs
...
<div class="container">
<h3 class="h3"><%= title %></h3>
<dl>
<% items.forEach ((item) => { %>
<dd><a href="/item/<%= item.id %>"><%= item.name %></a></dd>
<dd><%= item.price %>円</dd>
<% }) %>
</dl>
</div>
...
商品詳細
EJS にデータ受け渡し
/item/:id ルーティングで商品データを取得し、item/detail.ejs に受け渡します。
routes.js
...
router.get('/item/:id', (req, res) => {
const id = req.params.id;
var data = {};
data.item = items.find((item) => item.id == id);
data.title = '商品情報';
res.render('item/detail.ejs', data);
})
...
EJS でデータ表示
item/detail.ejs で商品情報を表示します。
views/item/detail.ejs
...
<h3 class="h3">商品情報</h3>
<% if (item) { %>
<dl>
<dt>商品名</dt>
<dd><%= item.name %></dd>
<dt>価格</dt>
<dd><%= item.price %>円</dd>
</dl>
<% } else { %>
<p>商品がみつかりませんでした</p>
<% } %>
...
ソース
routes.js
const express = require('express');
const router = express.Router();
const items = [
{ "id": 1, "name": "コーヒー", "price": 150 },
{ "id": 2, "name": "紅茶", "price": 180 },
{ "id": 3, "name": "ほうじ茶", "price": 100 }
];
router.get('/', (req, res) => {
var data = {}
data.title = 'トップページ';
res.render('index.ejs', data);
})
router.get("/profile", (req, res) => {
var user = {
id: 1,
name: '横浜 太郎',
birthplace: '横浜',
hobby: ['旅行', 'グルメ', 'スポーツ'],
}
var data = {};
data.title = 'プロフィール';
data.user = user;
res.render('profile/index.ejs', data);
})
router.post('/auth', (req, res) => {
const login_name = req.body.login_name;
const password = req.body.password;
var message = 'ログインできませんでした';
if (login_name == process.env.LOGIN_NAME && password == process.env.PASSWORD) {
message = 'ログインしました';
}
res.send(message);
})
router.get('/item', (req, res) => {
var data = { items: item.values };
data.title = '商品一覧';
res.render('item/index.ejs', data);
})
router.get('/item/:id', (req, res) => {
const id = req.params.id;
var data = {};
data.item = items.find((item) => item.id == id);
data.title = '商品情報';
data.message = ''
if (!data.item) data.message = '商品が見つかりませんでした';
res.render('item/detail.ejs', data);
})
module.exports = router