↓もし、良かったらSNSでの紹介よろしくお願いします。

Node.jsのテンプレートエンジンejsを使ってみた

bootstrap

ejsとは?

ejsとはテンプレート機能を実現するNode.jsのパッケージです。

例えば、ブログ場合、記事の内容だけがページごとに異なっていて
タイトルのタグやヘッダー、フッターはページ全体で共通です。

共通の部分は共通化して、切り替えるべきところを切り替えるのが、
テンプレートエンジンで実現することです。

今回は、Node.jsでWebページを作る際に良く用いられる
シンプルなテンプレートエンジンejsを紹介します。

ejsをインストール

インストールは簡単で下記のコマンドを実行するだけです。

cd 作業ディレクトリ
npm install ejs

npm installでは作業ディレクトリ内のみにパッケージがインストールされます。

-g オプションを付けることで
グローバル環境にもインストールできますが
パッケージはプロジェクトごとに分けて管理するのが基本です。

なので、今回は、-gオプションを利用しません。

ejsを使った簡単なアプリケーション

作業ディレクトリに下記のようなejs_sample.jsとtemplate.ejsを用意します。

ejs_sample.js

var http = require("http");
var fs = require("fs");
var ejs = require("ejs");
var srv = http.createServer();
var temp = fs.readFileSync(__dirname + "/template.ejs", "utf-8");
srv.on("request", function(req, res) {
var page = ejs.render(temp, {
title:"TITLE",
content:"hogehoge"
});
res.writeHead(200, {"Content-Type": "text/html"});
res.write(page);
res.end();
});
srv.listen(3000, "0.0.0.0");
console.log("server listening...");

template.ejs

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

下記のコマンドを実行すると

node ejs_sample.js

下記のようなページが表示されます。

実行結果

簡単な説明とポイント

上記のコードから重要な箇所を抜き出して説明を付け加えます。

ejs_sample.jsのポイント

ejs_sample.jsで重要なところは、
変数の受け渡しをしている箇所です。

var page = ejs.render(temp, {
title:"TITLE",
content:"hogehoge"
});

ここではtitle変数に”TITLE”という値、content変数に”hogehoge”を渡しています。

template.ejsのポイント

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

テンプレートで受け取った変数は、
<%= %>
ではさむことで表示できます。