JavaScript (Node.js): Express でテンプレートを作る

Express でスケルトンを作成したら、テンプレートを一つ例で作ってみましょう。

/views/layout.ejs は下記のように用意しておき、

EJS: layout.ejs

<!doctype html>
<html>
	<head>
		<title><%= title %></title>
		<link rel='stylesheet' href='/stylesheets/style.css' />
	</head>
	<body>
		<%- body %>
	</body>
</html>

/views/index.ejs はこんな感じで用意しておきます。

EJS: index.ejs

<h1><%= title %></h1>
<p>Welcome to <%= title %></p>

<%= title %> というのが変数で、ここは title 変数が入ります。
<%- body %> も変数ですが、 = ではなく – です。
<%= にすると、エンコードされて出力されるため、HTML コードなどを入力するためにエンコードしたくない場合は <%- を使います。

<%- body %> では /index.ejs の内容が展開されます。

<%= title %> はどこで定義するかと言うと、ルーティングハンドラです。

JavaScript: /routes/index.js

exports.index = function(req, res){
	res.render('index', { title: 'Hoge' })
};

この設定を app.js に反映します。

JavaScript: app.js

var express = require('express')
  , routes = require('./routes')

...(中略)...

app.get('/', routes.index);

こうすることでデザインやマークアップは index ページだけでなく、topic ページ、news ページ、info ページなどで共通のものが使え、変数とルーティングによって内容を個々のファイルで出し分ける事が出来ます。