タイトル: EJS
SEOタイトル: EJS 完全ガイド — Node.js テンプレートエンジン
| この記事の要点 |
|
EJS とは
EJS (Embedded JavaScript templating) は Node.js 用のテンプレートエンジンの一つです。HTML に <% %> で JavaScript を埋め込めるシンプルな構文が特徴で、PHP や ERB (Ruby) に近い感覚で書けます。
- 軽量 (依存ライブラリほぼゼロ)
- 独自 DSL がなく 素の JavaScript が書ける
- Express の標準的なテンプレートエンジンとして長年使われている
- クライアントサイドでも動く (browserify / webpack)
インストール
npm install ejs
# Express プロジェクトの場合
npm install express ejs基本構文
| タグ | 用途 | 例 |
|---|---|---|
<%= var %> | HTML エスケープ出力 | <%= user.name %> |
<%- var %> | 生 HTML 出力 (XSS 注意) | <%- post.bodyHtml %> |
<% code %> | JS 実行 (出力なし) | <% if (user) { %> |
<%# comment %> | コメント | <%# このブロックは ... %> |
<%_ ... _%> | 前後の空白除去 | 整形用 |
<%% / %%> | リテラル <% / %> | EJS 構文を文字として書きたい |
サンプルテンプレート
<!-- views/users.ejs -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
<% if (users.length === 0) { %>
<p>ユーザーが登録されていません。</p>
<% } else { %>
<ul>
<% users.forEach(function(user) { %>
<li>
<%= user.name %> (<%= user.email %>)
<% if (user.isAdmin) { %>
<span class="badge">管理者</span>
<% } %>
</li>
<% }); %>
</ul>
<% } %>
<%- include('partials/footer') %>
</body>
</html>Express での利用
// app.js
const express = require('express');
const path = require('path');
const app = express();
// テンプレートエンジン設定
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.get('/users', (req, res) => {
const users = [
{ name: '田中', email: 'tanaka@example.com', isAdmin: true },
{ name: '佐藤', email: 'sato@example.com', isAdmin: false },
];
res.render('users', { title: 'ユーザー一覧', users });
});
app.listen(3000);これで views/users.ejs がレンダリングされ、HTML として返されます。
部分テンプレート (Partials / Include)
<!-- views/partials/header.ejs -->
<header>
<nav>
<a href="/">トップ</a>
<% if (user) { %>
<a href="/logout">ログアウト (<%= user.name %>)</a>
<% } else { %>
<a href="/login">ログイン</a>
<% } %>
</nav>
</header>
<!-- views/index.ejs -->
<!DOCTYPE html>
<html>
<body>
<%- include('partials/header', { user: currentUser }) %>
<main>...</main>
<%- include('partials/footer') %>
</body>
</html>注意: include は <%- (生 HTML 出力) を使います。<%= だとパーシャルの HTML がエスケープされてしまいます。
レイアウト (express-ejs-layouts)
EJS 本体にレイアウト機能はありませんが、express-ejs-layouts パッケージで実現可能:
const expressLayouts = require('express-ejs-layouts');
app.use(expressLayouts);
app.set('layout', 'layouts/main'); // views/layouts/main.ejs<!-- views/layouts/main.ejs -->
<!DOCTYPE html>
<html>
<head><title><%= title %></title></head>
<body>
<%- body %> <!-- 子ビューがここに展開される -->
</body>
</html>クライアントサイドでの利用
<script src="https://cdn.jsdelivr.net/npm/ejs@3.1.10/ejs.min.js"></script>
<script>
const template = '<h1>Hello, <%= name %>!</h1>';
const html = ejs.render(template, { name: 'World' });
document.body.innerHTML = html;
</script>他テンプレートエンジンとの比較
| エンジン | 記法 | 特徴 |
|---|---|---|
| EJS | HTML + <% %> | 素 JS が書ける。学習コスト最小 |
| Pug (Jade) | インデント DSL | HTML タグ不要。簡潔だが独自構文 |
| Handlebars | {{ var }} | logic-less。helper 関数で拡張 |
| Mustache | {{ var }} | 多言語対応。Handlebars の親 |
| Nunjucks | Jinja2 風 | Python 経験者になじむ |
| Liquid | Shopify 由来 | EC サイト系で多用 |
セキュリティ注意点
<%- userInput %>は XSS の温床。ユーザー入力は必ず<%= %>- HTML サニタイズが必要なら
DOMPurifyやsanitize-htmlを併用 ejs.render(req.body.template, ...)等、ユーザー入力をテンプレート文字列にすると任意コード実行になる
FAQ
Q: <%= %> と <%- %> の使い分けは？
A: ユーザー入力 / DB 値は <%= %> (エスケープ)。WYSIWYG エディタで書いた既知の安全な HTML は <%- %>。
Q: EJS は今でも現役？
A: Express のサンプルでは現役。ただし SSR は Next.js / Remix、SPA は React / Vue の時代なので、新規 Web アプリで EJS 一択というケースは減っています。
Q: HTML の syntax highlight が効かない
A: VSCode なら EJS language support 拡張、または files.associations で "*.ejs": "html" を設定。