Node.js 0.12.13
　nodist 0.7.2
　npm 3.5.2
　forever 0.15.1
　express-generator 4.13.1

■EJS Prev　Top　Next
関連ページ：

前回、HTMLテンプレートエンジンの一つである EJS を触りました。
ちゃんと使い方調べとかないとコーディングできない気がするので簡易リファレンス的に調べてみました。

なお開発環境は前回と同様に作成してください。

■<% %>

<% %>
---index.js--- 
var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('index', { title : 'Express', data: '<strong>data</strong>' });
});

module.exports = router;
---index.ejs--- 

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <!-- = を使用するとHTMLタグがそのまま出力される --> 
    <div><%= data %></div>
    
    <!-- - を使用するとHTMLタグとして出力される --> 
    <div><%- data %></div>

    <!-- # を使用するとコメントとなる --> 
    <div><%# data %></div>
  </body>
</html>
<strong>data</strong>
data
inserted by FC2 system

■include

include
EJSは、ブロックをサポートしていないが、ヘッダーとフッターをincludeすることによりレイアウトを構築できる。
---index.js--- 

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('index', { title : 'Express', header : 'ヘッダだよ', footer : 'フッタだよ' });
});

module.exports = router;
---index.ejs--- 

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
     <%- include('header', { headerAdd: '追加のヘッダだよ' }) %>
     <div>ボディだよ</div>
     <%- include('footer', { footerAdd: '追加のフッタだよ' }) %>
  </body>
</html>
---header.ejs--- 

<!-- この書き方でも headerキー値 を取得できるが、メンテのことを考えると、index.ejs 側で渡したいキー値はすべて書いたほうがいいと思う -->
<div><%= header %> + <%= headerAdd %></div>
---footer.ejs--- 

<div><%= footer %> + <%= footerAdd %></div>
ヘッダだよ + 追加のヘッダだよ
ボディだよ
フッタだよ + 追加のフッタだよ
inserted by FC2 system

■条件文

if文
Controllerから取得したデータをもとにStyleSheetで色変える場合などに使用する．サンプルではStyleSheet使ってないけど.

なおif文と{}を囲む <% %> を行単位で分断した場合エラーになることに注意が必要.つまり

<%if( status === 'OK' )%>
<%{%>
や 
   <%}%>
   <%else{%>
はエラーになるが

<%if( status === 'OK' )
{%>
や 
    <%}
    else{%>
のように分断せずに囲んでいる場合はOK.
---index.js--- 

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('index', { title : 'Express',
//                        status: 'OK',
                        status: 'ERROR',
                        data  : 'Foo'
                      });
});

module.exports = router;
---index.ejs--- 

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <%if( status === 'OK' )
    {%>
          Welcom to <font color='blue'><%= data%></font></br>
    <%}
    else if( status === 'ERROR' )
    {%>
          Welcom to <font color='red'><%= data%></font></br>
    <%}
    else
    {%>
          Welcom to <font color='black'><%= data%></font></br>
    <%}%>
  </body>
</html>

Express

Welcom to Foo
inserted by FC2 system

■ループ

for in
for in を使用することで複数のデータまとめて処理することが可能。
---index.js--- 
var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  // programming 要素に複数データを指定する
  res.render('index', { title: 'Express',
                        programming: {
                                        0: 'C#',
                                        1: 'C++',
                                        2: 'JavaScript',
                                        3: 'TypeScript'
                                     }
                      });
});

module.exports = router;
---index.ejs--- 

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <!-- programming 要素をすべて表示 -->
    <% for( var key in programming ){%>
       Welcom to <%= programming[key]%></br>
    <%} %>
  </body>
</html>

Express

Welcom to C#
Welcom to C++
Welcom to JavaScript
Welcom to TypeScript

Prev　Top　Next
inserted by FC2 system