◀ 2.

EJSの値表示と処理｜<%= %>・<%- %>・<% %>の違いとforループ

▶
編集
この記事の要点
  • EJS（Embedded JavaScript）はサーバ側で値を埋め込む Node.js 用のテンプレートエンジン
  • 値の出力は <%= 値 %>（HTML エスケープあり）と <%- 値 %>（エスケープなし）の 2 種類
  • 処理（if / for など）は <% 文 %> で囲む。これ自体は出力されない
  • ejs.render(テンプレート, データ) で文字列を生成し、res.write でレスポンスとして返す
  • XSS 対策として、ユーザ入力由来の値は必ず <%= %>（エスケープあり）で出す

EJS のタグ一覧

EJS には用途別に複数のタグがあります。最低限この 3 つを覚えれば実用上ほぼ困りません。

タグ意味出力
<%= 値 %>値を出力（HTML エスケープあり）&lt; 等に変換される
<%- 値 %>値を出力（エスケープなし、生 HTML）そのまま出る
<% 文 %>JavaScript 文の実行（if / for など）何も出ない
<%# コメント %>テンプレート内コメント何も出ない
<%% / %%>リテラルの <% / %> を出力<% / %>

最小サンプル ─ http モジュールで動かす

素の Node.js（Express を使わない）構成で、EJS を使って test.ejs をレンダリングしてレスポンスする最小例です。

server.js

const http = require('http');
const ejs  = require('ejs');
const fs   = require('fs');

// テンプレートを 1 回だけ読み込む（毎リクエストで読むと遅い）
const template = fs.readFileSync('test.ejs', 'utf-8');

const server = http.createServer((req, res) => {
    // EJS でレンダリング（第 2 引数のオブジェクトがビューに渡る変数）
    const html = ejs.render(template, {
        val1: 'val1',
    });

    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
    res.write(html);
    res.end();
});

server.listen(8000);
console.log('サーバー起動中... http://localhost:8000/');

test.ejs

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>EJSサンプル</title>
</head>
<body>

    <!-- エスケープなし（生 HTML 込み） -->
    <p><%- val1 %></p>

    <!-- エスケープあり（推奨） -->
    <p><%= val1 %></p>

    <!-- for ループ -->
    <% for (let i = 0; i < 5; i++) { %>
        <p><%= i %></p>
    <% } %>

</body>
</html>

起動と動作確認

# ejs をインストール
npm install ejs

# サーバ起動
node server.js

# ブラウザで開く
# http://localhost:8000/

ブラウザでアクセスすると、val1 の中身と 0〜4 の数字が表示されます。

出力結果

EJS で val1 と 0〜4 が表示された結果画面

<%= %> と <%- %> の使い分け

タグ用途
<%= %>ユーザ入力 / DB から読んだ値 / 文字列全般。XSS 対策のため標準はこちら
<%- %>事前に安全と分かっている HTML 断片を埋め込みたいとき（部分テンプレートやサニタイズ済みエディタ出力）

区別を間違えると Cross-Site Scripting（XSS）に直結します。デフォルトは必ず <%= %> を使い、<%- %> は明確に意図したときだけにしてください。

if 文 / 配列ループ

<!-- 条件分岐 -->
<% if (user) { %>
    <p>こんにちは <%= user.name %> さん</p>
<% } else { %>
    <p>ログインしてください</p>
<% } %>

<!-- 配列を回す -->
<ul>
<% items.forEach(item => { %>
    <li><%= item.name %> ─ <%= item.price %>円</li>
<% }) %>
</ul>

Express で使う場合

素の http サーバではなく Express を使うと、ビューエンジン登録だけで res.render から呼び出せます。

const express = require('express');
const app = express();

app.set('view engine', 'ejs');
app.set('views', './views');   // ./views/*.ejs を探す

app.get('/', (req, res) => {
    res.render('index', { val1: 'val1', items: [1, 2, 3] });
});

app.listen(3000);

関連

  • EJS — 親カテゴリ
  • Node.js — 実行環境
編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. インストール
  2. 値の表示と処理の記述
  3. テンプレートの共通化(組み込み)
2026-06-11 13:35:53 guest 156

人気ページ

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