この記事の要点

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 構文を文字として書きたい

サンプルテンプレート

  
  


  
<%= title %>

  <% if (users.length === 0) { %>
    
ユーザーが登録されていません。
  <% } else { %>
    

      <% users.forEach(function(user) { %>
        

          <%= user.name %> (<%= user.email %>)
          <% if (user.isAdmin) { %>
            管理者
          <% } %>
        
      <% }); %>
    
  <% } %>

  <%- include('partials/footer') %>

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)

  






  <%- include('partials/header', { user: currentUser }) %>
  
...
  <%- include('partials/footer') %>

注意: 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

  <%- body %>  

クライアントサイドでの利用

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

エンジン	記法	特徴
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" を設定。