Embedded Javascript

Embedded Javascript ハンドブック

このハンドブックでは、Node.js におけるテンプレートエンジン（Embedded Javascript: EJS）を使用して Web アプリケーションを作成する方法を解説します。express-generator を利用して素早くプロジェクトを構築し、EJS を使ったビューの実装までを説明します。

必要条件

以下のツールをインストールしておく必要があります：

Node.js (バージョン16以上推奨)
npm または yarn

プロジェクトの初期設定

まず、express-generator をインストールします。

# express-generator をインストール
npm install express-generator

続いて、新しいプロジェクトを作成します。

# プロジェクトを作成 (ビューエンジンに ejs を指定)
npx express --view=ejs my-ejs-app

# プロジェクトディレクトリに移動
cd my-ejs-app

# 依存パッケージをインストール
npm install

この手順で以下のようなディレクトリ構成が生成されます：

my-ejs-app/
├── app.js
├── bin/
├── public/
├── routes/
├── views/
├── package.json
└── ...

サーバーの起動

以下のコマンドでサーバーを起動します。

npm start

ブラウザで http://localhost:3000 にアクセスすると、初期設定された Express アプリが表示されます。

EJS を使ったビューの作成

views/ フォルダ内に EJS テンプレートが配置されます。デフォルトでは views/index.ejs が用意されています。

EJS テンプレートの例

以下は、views/index.ejs の基本的な例です：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
</head>
<body>
  <h1><%= message %></h1>
</body>
</html>

<%= ... %> を使用すると、サーバー側から渡された変数を埋め込むことができます。

ルートの設定

ルートファイル（routes/index.js）を編集して、ビューにデータを渡します。

routes/index.js

import express from 'express';
const router = express.Router();

/* GET home page. */
router.get('/', function (req, res) {
  res.render('index', { title: 'EJS Example', message: 'Welcome to EJS!' });
});

export default router;

サーバーを再起動し、ブラウザで確認すると、EJS テンプレートに渡されたデータが反映されます。

スタティックファイルの利用

public/ フォルダに CSS や JavaScript、画像ファイルを配置できます。

例

public/stylesheets/style.css

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

EJS テンプレートで以下のように読み込みます：

<link rel="stylesheet" href="/stylesheets/style.css">

Express の中間処理

新しいルートや中間処理を追加するには、app.js を編集します。

例

app.js に API ログ機能を追加

import logger from 'morgan';

app.use(logger('dev')); // リクエストをログに出力

まとめ

express-generator を使うことで、EJS を利用した Web アプリケーションを素早く構築できます。このハンドブックをもとに、EJS の柔軟なテンプレート機能を活用してください。

外部リンク

EJS — Embedded JavaScript templates