EJSとは？ LaravelのBladeを知ってる人向けに30秒で理解するNode.jsテンプレートエンジン

June 5, 2026

「Node.jsでBladeみたいにHTML書きたいんだけど」

LaravelでBlade（.blade.php）を使っていた人がNode.jsに来ると、「HTMLにサーバー側の変数を埋め込むやつ、Node.jsだと何使うの？」と迷いますよね。

答えの一つがEJS（Embedded JavaScript）です。やっていることはBladeとほぼ同じで、HTMLの中にJavaScriptを埋め込んで、サーバー側でレンダリングするテンプレートエンジンです。Bladeを知っていれば、EJSの理解は30秒で終わります。

EJSとは？ ― Node.js版の「Blade」

EJS（公式サイト）は、Node.js向けのテンプレートエンジンです。HTMLファイルの中に<% %>タグでJavaScriptを埋め込み、サーバーサイドでHTMLを生成します。Expressと組み合わせて使うのが定番です。

Bladeとの対応関係はこうなります。

概念	Blade（Laravel）	EJS（Node.js）
ファイル拡張子	`.blade.php`	`.ejs`
変数展開	`{{ $name }}`	`<%= name %>`
エスケープなし出力	`{!! $html !!}`	`<%- html %>`
条件分岐	`@if / @else / @endif`	`<% if () { %> / <% } %>`
ループ	`@foreach / @endforeach`	`<% for / forEach %>`
パーシャル（部品読み込み）	`@include('header')`	`<%- include('header') %>`
レイアウト	`@extends / @section / @yield`	標準にはない（ejs-mateで対応）

BladeとEJSの書き方比較

同じページをBladeとEJSで書いてみます。

Blade

{{-- resources/views/users.blade.php --}}
ユーザー一覧

@if(count($users) > 0)
  
    @foreach($users as $user)
      {{ $user->name }}（{{ $user->email }}）
    @endforeach
  
@else
  ユーザーがいません
@endif

EJS

<%# views/users.ejs %>
ユーザー一覧

<% if (users.length > 0) { %>
  
    <% users.forEach(user => { %>
      <%= user.name %>（<%= user.email %>）
    <% }) %>
  
<% } else { %>
  ユーザーがいません
<% } %>

構造はほぼ同じ。違いはBladeが@ディレクティブで書くのに対し、EJSは<% %>の中に素のJavaScriptを書くという点。Bladeの方が専用構文でスッキリしていますが、EJSは「JavaScriptがそのまま使える」ので学習コストが低いのが利点です。

Express + EJSの最小セットアップ

# プロジェクト作成
mkdir ejs-demo && cd ejs-demo
npm init -y
npm install express ejs

// app.js
const express = require('express');
const app = express();

// EJSをテンプレートエンジンに設定
app.set('view engine', 'ejs');
app.set('views', './views');

app.get('/', (req, res) => {
  const users = [
    { name: '田中太郎', email: 'tanaka@example.com' },
    { name: '佐藤花子', email: 'sato@example.com' },
  ];
  // Bladeの return view('users', compact('users')) に相当
  res.render('users', { users });
});

app.listen(3000, () => console.log('http://localhost:3000'));

# 起動
node app.js

http://localhost:3000にアクセスすると、先ほどのviews/users.ejsがレンダリングされて表示されます。LaravelのRoute::get→view()の流れとほぼ同じ感覚です。

基本構文まとめ

タグ	用途	例
`<%= %>`	変数展開（HTMLエスケープあり）	`<%= user.name %>`
`<%- %>`	変数展開（エスケープなし、HTML出力）	`<%- htmlContent %>`
`<% %>`	JS実行（出力なし、制御構文用）	`<% if (flag) { %>`
`<%# %>`	コメント（出力されない）	`<%# これはコメント %>`
`<%- include() %>`	パーシャル読み込み	`<%- include('header') %>`