1.

EJS 完全ガイド — Node.js テンプレートエンジン

編集
この記事の要点
  • EJS (Embedded JavaScript) は Node.js / Express で広く使われるテンプレートエンジン
  • 記法はシンプル: <%= var %> エスケープ出力、<%- var %> 生 HTML 出力、<% if/for %> 制御
  • 部分テンプレート (partial) は <%- include("header", { user }) %>
  • Express で利用: app.set("view engine", "ejs") + views/ ディレクトリに .ejs 配置
  • Handlebars / Pug / Mustache と比較すると 素の JavaScript が書けるのが最大の特徴

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>

他テンプレートエンジンとの比較

エンジン記法特徴
EJSHTML + <% %>素 JS が書ける。学習コスト最小
Pug (Jade)インデント DSLHTML タグ不要。簡潔だが独自構文
Handlebars{{ var }}logic-less。helper 関数で拡張
Mustache{{ var }}多言語対応。Handlebars の親
NunjucksJinja2 風Python 経験者になじむ
LiquidShopify 由来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" を設定。

編集
Post Share
子ページ
  1. インストール
  2. 値の表示と処理の記述
  3. テンプレートの共通化(組み込み)
同階層のページ

同階層のページはありません

2026-06-11 07:12:00 T 486

人気ページ

最近更新/作成されたページ