はじめに - テンプレートエンジンとは
Webアプリケーションを開発する際、固定のHTMLだけでは動的なコンテンツを表示できません。テンプレートエンジンを使うことで、ユーザーごとに異なる情報やデータベースから取得したデータを含む動的なHTMLを生成できます。
Expressでは様々なテンプレートエンジンを利用できますが、本記事ではEJS（Embedded JavaScript）を使った実装方法を解説します。EJSはHTMLの中に直接JavaScriptのコードを埋め込める点が特徴で、学習コストが低く初心者にも扱いやすいテンプレートエンジンです。
EJSの基本セットアップ
インストール方法
まずEJSパッケージをインストールしましょう。
npm install ejs
viewsフォルダの作成と配置
テンプレートファイルを格納するフォルダを作成します。Expressはデフォルトでviewsという名前のフォルダからテンプレートファイルを探すため、この命名規則に従うのが一般的です。
Node.jsを実行するディレクトリにviewsフォルダを作成し、その中にテンプレートファイル（例: home.ejs）を配置します。なお、どのディレクトリからでも実行できるようにするには、パスの設定を編集する必要がある点に注意してください。
EJSの基本構文を理解する
4つの構文タグ
EJSの最大のメリットは、HTMLの中にJavaScriptのコードを埋め込める点です。EJSでは以下の4種類のタグを使ってテンプレートを記述します。
<%= %> - 値の埋め込み
変数や式の値をHTMLに埋め込みます。出力時に自動的にHTMLエスケープされるため、XSS攻撃を防げます。
<% %> - ロジックの実行
JavaScriptのコードを実行しますが、HTMLには出力されません。IF文やループなどの制御構文を記述する際に使います。
<%- %> - エスケープなしの埋め込み
変数や式の値をHTMLに埋め込みますが、エスケープ処理を行いません。HTMLタグを含む文字列をそのまま出力したい場合に使用します。
<%# %> - コメント
コメントとして扱われ、HTMLには出力されません。
レンダリングの仕組み
テンプレートを使ってHTMLを生成することを「レンダリング」と呼びます。Expressでテンプレートをレンダリングするにはres.renderメソッドを使用します。
なお、テンプレートの中にロジックを入れすぎるのは良い設計とは言えません。テンプレートはデータを表示することに専念し、複雑な処理はサーバー側で行うのが望ましいです。
データの受け渡しと表示
変数の渡し方
res.renderメソッドの第2引数にオブジェクトを渡すことで、テンプレートに変数を渡せます。
app.get('/', (req, res) => {
res.render('home', { title: 'ホームページ', userName: '太郎' });
});
<h1><%= title %></h1>
<p>ようこそ、<%= userName %>さん</p>
条件分岐（IF文）の実装
IF文を使って条件に応じた表示を切り替えられます。処理方法は、テンプレート内で処理する方法とサーバー側で処理する方法がありますが、簡単な条件分岐であればテンプレート内で処理するのが便利です。
<% if (isLoggedIn) { %>
<p>ログイン中です</p>
<% } else { %>
<p>ログインしてください</p>
<% } %>
ループ処理（for文）とデータベース連携
配列データをループして表示する処理は、データベースから取得したデータを一覧表示する際によく使われます。実際のアプリケーションでは、データベースからJSON形式でデータを取得し、それをループ処理で表示することが一般的です。
<ul>
<% for (let i = 0; i < items.length; i++) { %>
<li><%= items[i].name %></li>
<% } %>
</ul>
静的ファイルの扱い方
staticミドルウェアの設定
画像やCSS、JavaScriptファイルなどの静的ファイルをテンプレートで使用するには、Expressのstaticミドルウェアを設定します。
app.use(express.static('public'));
パスの指定方法とトラブルシューティング
スタイルが適用されない場合、実行しているディレクトリのパス設定に問題があることが多いです。このような場合は、絶対パスで指定することをおすすめします。
const path = require('path');
app.use(express.static(path.join(__dirname, 'public')));
CSSフレームワークの導入
BootstrapやTailwind CSSなどのCSSフレームワークを使う方法は2つあります。
CDN利用
テンプレートの<head>セクションにリンクを追加するだけで使えます。
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
ローカル配置
CSSファイルをpublicフォルダに配置し、staticミドルウェアで提供します。
app.use(express.static('public'));
本番環境では静的ファイルをCDNで提供することが多いですが、開発環境ではローカルに配置しておくと開発がスムーズに進みます。
テンプレートの再利用 - パーシャル
パーシャルとは
テンプレートの一部を別ファイルとして切り出し、再利用する仕組みを「パーシャル」と呼びます。ヘッダーやフッターなどの共通部分をパーシャル化することで、コードの重複を避け、メンテナンス性を向上させられます。
includeの使い方
EJSでは<%- include() %>を使ってパーシャルをインクルードします。
<%- include('partials/header') %>
<main>
<h1>メインコンテンツ</h1>
</main>
<%- include('partials/footer') %>
共通部品の切り出し例
ヘッダー、フッター、ナビゲーションバーなど、複数のページで使われる部品をパーシャルとして切り出すのが一般的です。なるべく繰り返し部分をなくし、DRY（Don't Repeat Yourself）の原則に従ってコーディングしましょう。
views/
├── partials/
│ ├── header.ejs
│ ├── footer.ejs
│ └── nav.ejs
├── home.ejs
└── about.ejs
まとめ
EJSはHTMLにJavaScriptを埋め込めるシンプルなテンプレートエンジンです。基本的な構文タグを理解し、変数の受け渡し、条件分岐、ループ処理を使いこなせば、動的なWebページを効率的に作成できます。
パーシャルを活用してコードの重複を避けることで、保守性の高いアプリケーション開発が可能になります。まずは小さなプロジェクトでEJSの基本を試し、徐々に複雑な機能を実装していくと良いでしょう。