13.
EJSの基本
テンプレートエンジン
テンプレートエンジンとは
テンプレートエンジンは、MVCフレームワークの View を出力するためのライブラリです。 テンプレートHTMLにプログラムで取得したデータを埋め込んで動的に表示します。また、表示部分（View）のプログラムが分離できるため、効率よく管理・表示することができます。
EJS とは
EJS（Embedded JavaScript） は、JavaScriptテンプレートエンジン**の1つです。 EJS のファイル拡張子は .ejs です。EJSはHTML内に埋め込むテンプレート記法で、動的コンテンツを生成します。
テンプレート名.ejs
テンプレートファイルの配置場所
EJSテンプレートファイルの配置場所はデフォルトで views フォルダに設定されています。よって、事前にプロジェクト直下に views フォルダを作成しておきます。
EJSの利用
ファイル構成
express_sample/
├── node_modules/
├── .env
├── data/
│ └── items.json
├── models/
│ └── item.js
├── package-lock.json
├── package.json
├── public/
│ └── login.html
├── routes.js
├── server.js
└── views/
└── index.ejs
パッケージ
| パッケージ名 | 説明 |
|---|---|
| express | MVCフレームワーク |
| dotenv | 設定ファイル管理モジュール |
| fs | ファイルシステムアクセスモジュール |
| ejs | テンプレートエンジン |
EJSインストール
EJSパッケージをインストールします。
ターミナル
npm i ejs
テンプレートファイル作成
views/ に index.ejs を作成し、HTMLを記述します。
views/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="container">
<h1 class="h1">EJS</h1>
</div>
</body>
</html>
テンプレートエンジン設定
テンプレートエンジンを選択するには app.set() でパラメータ「view engine」を設定します。
app.set('view engine', テンプレートエンジン名)
EJSの場合
EJSは、テンプレートエンジンを ejs で指定します。
app.set('view engine', 'ejs')
server.js
const express = require('express')
const routes = require('./routes')
const dotenv = require('dotenv');
dotenv.config();
const host = process.env.HOST
const port = process.env.PORT
const app = express()
// テンプレートエンジンを EJS にする
app.set('view engine', 'ejs')
app.use(routes)
app.listen(port, host, () => {
console.log(`Server listen: http://${host}:${port}`)
})
レンダリング
render()
テンプレートファイルを表示することをレンダリングといいます。Express では render() メソッドでファイルを指定して、レンダリングします。
res.render(ファイルパス)
トップページレンダリング
トップページのルーティングで、index.ejs をレンダリングするよう修正します。
routes.js
router.get('/', (req, res) => {
res.render('index.ejs')
})
結果
ソース
server.js
const express = require('express')
const routes = require('./routes')
const dotenv = require('dotenv');
dotenv.config();
const host = process.env.HOST
const port = process.env.PORT
const app = express()
app.set('view engine', 'ejs')
app.use(routes)
app.listen(port, host, () => {
console.log(`Server listen: http://${host}:${port}`)
})
routes.js
const express = require('express')
const router = express.Router()
const express = require('./models/item.js')
router.get('/', (req, res) => {
var data = {}
data.title = 'トップページ';
res.render('index.ejs', data);
})
router.get("/profile", (req, res) => {
res.send("This is Profile page.");
})
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 items = items.get();
var message = "";
for (const item of items) {
message += item.name
}
})
router.get('/item/:id', (req, res) => {
const id = req.params.id;
const selectItem = item.find(id);
var message = '商品がみつかりませんでした';
if (selectItem) {
message = selectItem.name;
}
res.send(message);
})
module.exports = router
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="container">
<div>
<a href="/profile">プロフィール</a>
<a href="/item">商品一覧</a>
</div>
<div class="container">
<h1 class="h1">EJS</h1>
</div>
</div>
</body>
</html>
演習
問題1
/profile ルーティングで EJS でテンプレート表示してみましょう。テンプレートファイルは profile/index.ejs とします。
profile/index.ejs
...
<div class="container">
<div>
<a href="/">トップページ</a>
</div>
<h1 class="h1"><%= title %></h1>
<div>
<dl>
<dt>名前</dt>
<dd>横浜 太郎</dd>
<dt>出身地</dt>
<dd>横浜</dd>
<dt>趣味</dt>
<dd>
旅行 グルメ スポーツ
</dd>
</dl>
</div>
</div>
...
問題2
/login ルーティングを作成して、ログインページを表示してみましょう。login.html は、login.ejs テンプレートに変更します。