ejsを使ってみる。ejsは、簡単に言うとjspやasp、PHPなんかのJavaScript版のようなものを実現するためのモジュールだ。文字列中の<%〜%>で囲まれた部分にJavaScriptを書いておくと、実行されて結果が埋め込まれた文字列が返ってくる。それをWebサーバの応答で返してやるとjspみたいなのができる。

$ npm install ejs

でモジュールのインストールする。

<%# コメント %>

コメント

<%= 変数 %>

のように書くと、渡した変数の内容がHTMLエスケープされて埋め込まれる。

<%- 変数 %>

のように書くと、渡した変数の内容がそのまま埋め込まれる。

<% 〜 %>

〜の部分にJavaScriptのコードが書ける。

サンプルだ。

index.ejs

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title><%= title %></title>
</head>
<body
	<%# コメント %>
	
	<%# hogeの内容をHTMLエスケープして埋め込まれる %>
	<p><%= hoge %></p>
		
	<%# hoge2の内容がそのまま埋め込まれる %>
	<%- hoge2 %>
	
	<%# 埋め込まれているスクリプトが実行される %>
	<ul>
	<% hoge3.forEach(function(item) { %>
		<li><%= item %></li>
	<%	});	%>
	</ul>
</body>
</html>

test.ts

/// <reference path="./typings/node/node.d.ts" />
import * as http from "http";
import * as fs from "fs";

var ejs = require("ejs");

http.createServer((req, res)=>{
	var tmp = ejs.render(fs.readFileSync("./index.ejs", "utf-8"),
		{ 
			"title":"タイトル",
			"hoge":"<h1>ほげー<h1>",
			"hoge2":"<h1>H1</h1>",
			"hoge3":[ "ほげ1", "ほげ2", "ほげ3" ]
		}
	);
	res.writeHead(200, { "Content-Type": "text/html"});
	res.write(tmp);
	res.end();
}).listen(9999);

ejs.renderに文字列とejsで使っている変数名を持っているオブジェクトを渡すとこんな感じになる。

56