Node.js の Express のアプリケーション生成プログラムから指定できるテンプレート・エンジンのメモです。

Node.js バージョン 4.x系の express コマンド

$ ndenv version
v4.4.7 (set by /home/tkr/express_work2/.node-version)

$ express -V
4.13.4

$ express -h

  Usage: express [options] [dir]

  Options:

    -h, --help          output usage information
    -V, --version       output the version number
    -e, --ejs           add ejs engine support (defaults to jade)
        --hbs           add handlebars engine support
    -H, --hogan         add hogan.js engine support
    -c, --css <engine>  add stylesheet <engine> support (less|stylus|compass|sass) (defaults to pl\
ain css)
        --git           add .gitignore
    -f, --force         force on non-empty directory

Node.js バージョン 6.x 系の express コマンド

$ ndenv version
v6.10.3 (set by /home/tkr/express_work/.node-version)

$ express --version
4.15.0

$ express --help

  Usage: express [options] [dir]

  Options:

    -h, --help           output usage information
        --version        output the version number
    -e, --ejs            add ejs engine support
        --pug            add pug engine support
        --hbs            add handlebars engine support
    -H, --hogan          add hogan.js engine support
    -v, --view <engine>  add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults\
 to jade)
    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to p\
lain css)
        --git            add .gitignore
    -f, --force          force on non-empty directory

テンプレート・エンジンのリンク集

EJS

JSP (JavaServer Pages) に良く似ているので、一番馴染みやすい印象があります。

HP: http://ejs.co/
npm: https://www.npmjs.com/package/ejs
チュートリアル: http://libro.tuyano.com/index3?id=1135003

Jade / Pug

JadeはPugに名前が変わったとの事で、両者は同じものです。

HP: https://pugjs.org/api/getting-started.html
npm: https://www.npmjs.com/package/jade
npm: https://www.npmjs.com/package/pug
チュートリアル: https://blog.mismithportfolio.com/web/20160326pugbegin
Jade チュートリアル http://www7b.biglobe.ne.jp/~makandat/jade.html

handlebars

HP: http://handlebarsjs.com/
チュートリアル: http://blog.tsumikiinc.com/article/20141127_jst-handlebarsjs.html

hogan.js

HP: http://twitter.github.io/hogan.js/
npm: https://www.npmjs.com/package/hogan.js-template
日本語での情報 http://wata.hateblo.jp/entry/2012/06/12/003151

JADEのテンプレートを追加する方法

テンプレート・エンジンに、JADEを選択して、ジェネレートされたアプリに、ページを追加してみます。デフォルトがJADEなので、オプション無しで、以下の様に実行します。

$ express myapp2

   create : myapp2
   create : myapp2/package.json
   create : myapp2/app.js
   create : myapp2/public
   create : myapp2/public/javascripts
   create : myapp2/public/images
   create : myapp2/public/stylesheets
   create : myapp2/public/stylesheets/style.css
   create : myapp2/routes
   create : myapp2/routes/index.js
   create : myapp2/routes/users.js
   create : myapp2/views
   create : myapp2/views/index.jade
   create : myapp2/views/layout.jade
   create : myapp2/views/error.jade
   create : myapp2/bin
   create : myapp2/bin/www

   install dependencies:
     $ cd myapp2 && npm install

   run the app:
     $ DEBUG=myapp2:* npm start

これにより作成されたディレクトりやファイルに注釈をつけると以下の様になります。npm start で実行されるのは、bin/www ですが、HTTPサーバーに関する設定が切り出されたファイルで、この中から、app,jsを実行しています。このため、アクションを追加するには、app.js に変更を加えます。

myapp2$ tree
.
├── app.js  アプリケーションの設定
├── bin
│   └── www サーバーの設定、リスナー起動、上記のapp.jsの呼び出し
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js   / に対するアクションを定義
│   └── users.js   /user に対するアクションを定義
└── views
    ├── error.jade
    ├── index.jade  / のビュー
    └── layout.jade

新たに /list を追加するために、下記の２箇所を追加します。

app.js

<中略>
var routes = require('./routes/index');
var users = require('./routes/users');
var list = require('./routes/list');   // 追加(1)

var app = express();
<中略>
app.use('/', routes);
app.use('/users', users);
app.use('/list', list);   // 追加(2)
<中略>

追加(1)に対応する myapp2/routes/list.js のファイルを作成します。

list.js

var express = require('express');
var router = express.Router();
var profiles = require('../profiles');  // 表示用のデータ

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('list', { title: 'Profiles', profiles: profiles});
});

module.exports = router;

以下は表示用のデータです。実際のアプリではデータベースから取得するものとなります。

profiles.js

var profiles = [
    [ 'さくら', '女性', '25', '東京都中央区日本橋23'],
    [ 'ゆり', '女性', '28', '神奈川県小田原市根府川483'],
    [ 'うめ', '男性', '31', '千葉県千葉市緑区土気町22']
];

module.exports = profiles;

そして、追加(2)に対応するテンプレートのファイル myapp2/views/list.jade を作成します。

list.jade

extends layout

block content
  h1= title

  table#profiles
    tr
      th 名前
      th 性別
      th 年齢
      th 住所
    each profile, id in profiles
          tr(id= id)
            each val in profile
              td #{val}

これで作業終了です。続いて、express のアプリを起動します。

myapp2$ npm start

> myapp2@0.0.0 start /home/tkr/express_work2/myapp2
> node ./bin/www

ブラウザからアクセスして、動作を確認します。

EJSのテンプレートを追加する方法

JADEと対比しながら、異なる部分に注目して書いていきます。テンプレート・エンジンをEJSに指定するため -e ejs を指定して、アプリケーションを生成します。

$ express -e ejs myapp1

   create : myapp1
   create : myapp1/package.json
   create : myapp1/app.js
   create : myapp1/public
   create : myapp1/public/javascripts
   create : myapp1/public/images
   create : myapp1/public/stylesheets
   create : myapp1/public/stylesheets/style.css
   create : myapp1/routes
   create : myapp1/routes/index.js
   create : myapp1/routes/users.js
   create : myapp1/views
   create : myapp1/views/index.ejs
   create : myapp1/views/error.ejs
   create : myapp1/bin
   create : myapp1/bin/www

   install dependencies:
     $ cd myapp1 && npm install

   run the app:
     $ DEBUG=myapp1:* npm start

以下のフォルダーとファイルのリストの中で、JADEの時と異なる追加は、list.ejs のみです。

myapp1$ tree
.
├── app.js   <-- JADEの時と同じ変更
├── bin
│   └── www
├── package.json
├── profiles.js  <--- JADEの時と同じ内容
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   ├── index.js
│   └── list.js  <--- JADEの時と同じ内容
└── views
    ├── error.ejs
    ├── list.ejs  <--- 異なる内容
    └── index.ejs

7 directories, 8 files

list.ejs のファイルの内容を以下にリストします。殆どHTMLで、 <% %>でプログラム・コードを囲むところは、JSPと同じですね。

list.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %>  EJS version</h1>
    <table>
      <tr>
    <th>名前</th>
    <th>性別</th>
    <th>年齢</th>
    <th>住所</th>
      </tr>
      <% Object.keys(profiles).forEach(function(id) {%>
      <tr>
    <% Object.keys(profiles[id]).forEach(function(val) {%>
    <td><%= profiles[id][val] %></td>
    <% }); %>
      </tr>
      <% }); %>
    </table>
  </body>
</html>

出来たら、アプリをスタートして、ブラウザでアクセスして、動作を確認します。

$ npm start

以上です。

Node.js express で設定できるテンプレート・エンジンのメモ