Expressにおけるテンプレートエンジンの導入と活用

Expressフレームワークでは、動的なWebページを効率的に生成するためにテンプレートエンジンが利用されます。これにより、HTML構造と動的データを分離し、コードの再利用性と保守性を向上させます。Expressで一般的に使用されるテンプレートエンジンには、JadeとEJS（Embedded JavaScript）の2種類があります。

テンプレートエンジンの種類と特徴

  1. Jade: HTMLの構文を簡略化するための独自の記法を採用しています。インデントに基づいて構造を定義するため、HTMLファイルは非常にコンパクトになります。学習コストはありますが、習得すれば効率的なテンプレート作成が可能です。

  2. EJS: 通常のHTMLファイル内に <%= %> や <% %> といった特殊なタグを用いてJavaScriptコードを埋め込む形式です。HTMLの知識があれば容易に移行できますが、HTMLファイルが複雑になる傾向があります。

テンプレートエンジンの設定と利用

Expressアプリケーションでテンプレートエンジンを使用するには、いくつかのステップが必要です。

  1. モジュールのインストール: まず、使用したいテンプレートエンジンのモジュールをnpmでインストールします。

    npm install jade ejs

  2. テンプレートエンジンの設定: Expressアプリケーションの初期設定で、デフォルトのテンプレートエンジンとテンプレートファイルの格納場所を指定します。

    • app.set('view engine', 'jade');: デフォルトのテンプレートエンジンを'jade'に設定します。
    • app.set('views', './views');: テンプレートファイルを格納するディレクトリを'./views'に指定します。

  3. テンプレートエンジンの登録: app.engine(extension, callback) メソッドを使用して、特定のファイル拡張子に対応するテンプレートエンジンを登録します。

    • app.engine('jade', require('jade').__express);: '.jade' 拡張子のファイルに対してJadeエンジンを登録します。
    • EJSの場合、.ejs 拡張子には require('ejs').__express を、.html 拡張子にEJSを使いたい場合は require('ejs').renderFile を使用します。 
      app.engine('ejs', require('ejs').__express);
app.engine('html', require('ejs').renderFile);

  4. ローカル変数の設定: テンプレートに動的なデータを渡すために、ローカル変数を使用します。app.locals オブジェクトにプロパティとして追加するか、オブジェクトを渡す形で設定できます。

    // プロパティとして設定
app.locals.title = 'My Application';

// オブジェクトで一括設定
app.locals({
  version: 1.0
});

  5. テンプレートファイルの作成:

    • EJS: <%= variable %> はエスケープされた変数値を、 <%- variable %> はエスケープされない変数値を表示します。JavaScriptのロジックは <% %> タグ内に記述します。 
      <!DOCTYPE html>
<html>
<head>
    <title><%= pageTitle %></title>
</head>
<body>
    <h1><%= user.name %></h1>
    <p><%- welcomeMessage %></p>
</body>
</html>
    • Jade: インデントベースの構文で記述します。変数は #{variable} で展開します。 
      doctype html
html
  head
    title= pageTitle
  body
    h1= user.name
    p!= welcomeMessage

  6. テンプレートのレンダリング: テンプレートをレンダリングしてレスポンスとして送信するには、app.render() または res.render() メソッドを使用します。

    • app.render(viewName, [locals], callback): 指定されたビューをレンダリングし、結果をコールバック関数に渡します。
    • res.render(viewName, [locals]): ビューをレンダリングし、結果を直接クライアントに応答として送信します。
    // res.render() を使用する例
app.get('/users/:name', (req, res) => {
  const userData = { name: req.params.name };
  res.render('profile', { user: userData, pageTitle: 'User Profile' });
});

デモコード

以下は、EJSとJadeを使用した基本的な設定とレンダリングの例です。

サーバーサイド (app.js)

const express = require('express');
const jade = require('jade');
const ejs = require('ejs');
const path = require('path');

const app = express();
const port = 3000;

// ビューディレクトリとデフォルトのテンプレートエンジンを設定
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade'); // デフォルトをJadeに設定

// Jadeエンジンの登録
app.engine('jade', jade.__express);
// EJSエンジンの登録 (HTML拡張子でejsを使用)
app.engine('html', ejs.renderFile);

// ローカル変数の設定
app.locals.systemName = 'MyApp';
app.locals.currentUser = { name: 'Alice' };

// EJSテンプレート '/ejs-example' ルート
app.get('/ejs-example', (req, res) => {
  const data = {
    pageTitle: 'EJS Example Page',
    message: 'Welcome to EJS rendering!',
    items: ['Apple', 'Banana', 'Cherry']
  };
  // 'example.html' は views ディレクトリ内のEJSテンプレートファイル
  res.render('example.html', data);
});

// Jadeテンプレート '/jade-example' ルート
app.get('/jade-example', (req, res) => {
  const data = {
    pageTitle: 'Jade Example Page',
    description: 'This is a demonstration of Jade templating.',
    details: { id: 101, status: 'Active' }
  };
  // 'example.jade' は views ディレクトリ内のJadeテンプレートファイル
  // デフォルトビューエンジンがJadeなので拡張子は不要
  res.render('example', data);
});

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

ビューファイル (views/example.html - EJS)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= pageTitle %> - <%= systemName %></title>
</head>
<body>
    <h1><%= pageTitle %></h1>
    <p><%- message %></p>
    <h2>Items:</h2>
    <ul>
        <% items.forEach(function(item) { %>
            <li><%= item %></li>
        <% }); %>
    </ul>
    <p>Rendered by EJS.</p>
</body>
</html>

ビューファイル (views/example.jade - Jade)

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    title= pageTitle + " - " + systemName
  body
    h1= pageTitle
    p!= description
    h2 Details:
    ul
      li ID: #{details.id}
      li Status: #{details.status}
    p Rendered by Jade.

タグ: Node.js express Jade ejs テンプレートエンジン

6月1日 22:11 投稿

ホットタグ

©2026 異端開発室