書こうと思った理由
EJS を使っているときに、res.render() ではなく express.static() でやっていたから、ほかのコードなどでなぜかダウンロードされる現象を少なくしたいから。
res.render()は、例えばこんな風に使います：
app.get('/hoge', (req, res) => {
res.render(path.join(__dirname, '/src/hoge.ejs')); // <--ここ
});
これがポイント！
-
res.render('テンプレート名')-
'hoge'は、テンプレートファイルの名前です。EJS では、通常.ejsという拡張子を持つテンプレートファイルを使用します。この場合だとsrc/hoge.ejsというファイルが読み込まれます。
-
-
データを渡す
- テンプレートにデータを渡したい場合、第二引数にオブジェクトを渡すことができます。この例では、
{ title: 'hogehoge' }というオブジェクトが渡されて、テンプレート内でtitleとして使えます。
- テンプレートにデータを渡したい場合、第二引数にオブジェクトを渡すことができます。この例では、
例えば、hoge.ejs ではこんな感じで使えます：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
</head>
<body>
<h1>Welcome to the hoge Page!</h1>
</body>
</html>
上記のコードで <%= title %> は、res.render() で渡された title の値（この場合は「hogehoge」）が挿入されます。
注意すること！
-
テンプレートファイルのパスが正しいか確認！
- 例えば、EJS のデフォルトでは
srcディレクトリにテンプレートが保存されるので、src/hoge.ejsというようにディレクトリ構造があっているか確認しましょう。
- 例えば、EJS のデフォルトでは
-
res.render()でテンプレートファイルが見つからない場合、エラーメッセージが表示されるので、その際はファイルの場所や名前をもう一度チェックすることが大事です！
これで res.render() が少しでも身近に感じられると嬉しいです。
node.jsサーバー起動用コード
const express = require('express');
const path = require('path');
const app = express();
const PORT = 3000;
// 静的ファイルの提供
app.use(express.static(path.join(__dirname, 'public')));
app.set('view engine', 'ejs');
// ルート設定
app.get('/hoge', (req, res) => {
res.render(path.join(__dirname, '/src/hoge.ejs')); // <--ここ
});
// ポート指定
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
http://localhost:3000 行くと表示されます。