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

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入門】サンプル集と使い方まとめ

コメント