Node.js+Express+EJS+HerokuでWebアプリケーション開発その3

f:id:kokushin:20160405171540p:plain

前回は、Node.jsの軽量フレームワーク「Express」を利用して「Hello, World!」を表示するまでをご紹介しました。

今回は、テンプレートエンジン「EJS」を利用してページを生成するまでをメモります。
EJSはPHP的な書き方が出来る、gulpとかでも有名なアレですね。

※app.jsは前回のものを利用しています。

EJSをインストール

npm install ejs --save-dev

viewsディレクトリを作成

mkdir views

EJSでは、「views」と呼ばれるディレクトリに.ejsファイルを格納します。

viewsディレクトリ内にindex.ejsを作成

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

  <%- content %>

  <footer>
    <small>&copy; 2016 <%= title %></small>
  </footer>
</body>
</html>

app.jsを編集

var express = require('express');
var ejs = require('ejs');

var app = express();

app.engine('ejs', ejs.renderFile);

app.get('/', function(request, response) {
  response.render('index.ejs', {
    title: 'Sample',
    content: '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>'
  });
});

var server = app.listen(3000, function() {
  console.log('Server runnning ...\nPort: 3000');
});

var ejs = require('ejs'); でEJSのモジュールを読み込みます。
app.engine('ejs', ejs.renderFile); でEJSをExpressのエンジンに登録し、実行可能にします。

app.get()内のresponse.render('index.ejs' ~ブロックでEJSの設定を行います。
第一引数に.ejsファイルのパス（views/index.ejsと記述する必要はない）、第二引数に「views/index.ejs」内で記述した「<%= title %>」と「<%- content %>」に出力される文字列を設定します。