EJSとは
EJS（Embedded JavaScript）は、HTMLページ内でJavaScriptコードを実行できるテンプレートエンジンです。サーバーサイドで動的なHTMLページを生成する際に使用されます。
EJSファイルの設定
EJSテンプレートファイルの拡張子は.htmlではなく.ejsを使用します。変数を出力するには以下の構文を使用します：
<%- 変数名 %>
<%= 変数名 %>Node.jsでのEJS設定
まず、EJSパッケージをインストールします：
npm install ejsExpressアプリケーションでEJSを設定します：
const express = require("express");
const app = express();
app.set("view engine", "ejs");
app.set("views", "./views");テンプレートのレンダリング
テンプレートにデータを渡してレンダリングします：
res.render("templateName", {
data: "渡すデータ"
});実践例：ユーザー登録・ログイン機能
データベース接続
const mongoose = require("mongoose");
mongoose.connect("mongodb://127.0.0.1:27017/userdb", {
useNewUrlParser: true,
useUnifiedTopology: true
}).then(() => {
console.log("データベース接続成功");
}).catch(err => {
console.error("接続エラー:", err);
});スキーマ定義
const mongoose = require("mongoose");
const userSchema = new mongoose.Schema({
loginId: {
type: String,
unique: true,
required: true
},
loginPass: {
type: String,
required: true
},
createdAt: {
type: Date,
default: Date.now
}
});
const UserModel = mongoose.model("users", userSchema);
module.exports = UserModel;サーバー実装
const express = require("express");
const path = require("path");
const UserModel = require("./models/user");
const app = express();
app.listen(3000, () => {
console.log("サーバー起動: port 3000");
});
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "views"));
app.use(express.static(path.join(__dirname, "public")));
app.use(express.urlencoded({ extended: true }));
const errorPage = path.join(__dirname, "views/error.ejs");
// 登録ルート
app.post("/register", async (req, res) => {
const { loginId, loginPass } = req.body;
if (!loginId || !loginPass) {
return res.render(errorPage, {
message: "ユーザー名とパスワードを入力してください"
});
}
const existingUser = await UserModel.findOne({ loginId });
if (existingUser) {
return res.render(errorPage, {
message: "このユーザーは既に存在します"
});
}
const formatCheck = /^[a-zA-Z0-9_]{6,12}$/;
if (!formatCheck.test(loginId) || !formatCheck.test(loginPass)) {
return res.render(errorPage, {
message: "形式が正しくありません（英数字6〜12文字）"
});
}
try {
await UserModel.create({
loginId,
loginPass
});
res.redirect("/login.html");
} catch (error) {
res.render(errorPage, {
message: "サーバーエラーが発生しました"
});
}
});
// ログインルート
app.post("/login", async (req, res) => {
const { loginId, loginPass } = req.body;
if (!loginId || !loginPass) {
return res.render(errorPage, {
message: "入力してください"
});
}
const user = await UserModel.findOne({ loginId, loginPass });
if (user) {
res.redirect("/dashboard.html");
} else {
res.render(errorPage, {
message: "ユーザー名またはパスワードが正しくありません"
});
}
});エラーテンプレート（error.ejs）
<!DOCTYPE html>
<html>
<head>
<title>エラー</title>
</head>
<body>
<h1>エラーが発生しました</h1>
<p><%- message %></p>
<a href="/">ホームに戻る</a>
</body>
</html>まとめ
EJSを使用することで、サーバーサイドで動的なデータをHTMLテンプレートに埋め込み、レスポンスとしてクライアントに返すことができます。Expressと組み合わせることで、効率的なWebアプリケーション開発が可能です。