【Node.js/EJS】HTMLに変数を埋め込む

2018.07.12

Node.jsモジュール「EJS」でHTMLテンプレートに変数を埋め込む方法を入門者向けにサンプルコード付きでまとめました。

## HTMLテンプレートに変数を埋め込む

Node.jsモジュール「EJS」で、HTMLテンプレートに変数を埋めこんできます。

HTMLテンプレート内では、次の書式で変数、スクリプト、コメント等を埋め込むことができます。
テンプレート

<%=変数名(HTMLエンコードあり) %>
<%-変数名(HTMLエンコードなし) %>
<% スクリプト %>
<%# コメント %>

埋め込まれたスクリプトは、レンダリング時にサーバー側で実行されます。

## サンプルコード

サンプルプログラムのソースコードです。

app.js

// ポート番号
var port = 8080;
var express = require('express');
var app = express();
var ejs = require('ejs');
app.engine('ejs', ejs.renderFile);

// レンダリング
app.get('/', function(req, res) {
  res.render('html.ejs', {
    title: "Servant",
    name: "Saver",
    content: "Arturia Pendragon"
  });
});
app.listen(port);

views/html.ejs

アプリケーションフォルダ内に「views」フォルダを作成します。
そして、その直下にHTMLテンプレートファイル（html.ejs）を作成します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%=title %></title>
</head>
<body>

<h1><%=h1 %></h1>
<p><%-content %></p>

</body>
</html>

## 実行手順

①ターミナル（Windowsならコマンドプロンプト）を開きます。

② 以下のコマンドを実行します。
※Webサーバー側の起動

node ＜index.jsのファイルパス＞
– 注意事項
※1 ＜index.jsのファイルパス＞はindex.jsを配置した場所によって適宜変更
※2 Windowsならカレントディレクトリは「C:\Users\ユーザー名」
– 関連ページ
1 ■【Node.js入門】サンプル集と使い方まとめ

コメント