テンプレートエンジンECT

Node.js+Expressでタスク管理アプリを作った時のメモ。
今回はテンプレートエンジンにECTを使う話。
bbpink/node-shpapad · GitHub

ECTを選んだ理由

  • 公式サイトにFastest JavaScript template engineって書いてあったから

圧倒的なパワー、そしてスピードが求められている！！！(本当は不要)

使い方(View)

ECTはレイアウト機構があるので、まず全てのページ用のレイアウトを作りました。

<!DOCTYPE html>

<html lang="ja">

<head>
  <meta charset="utf-8" />
  <link href="/index.css" rel="stylesheet" />
  <title>shpapad</title>
  <script src="/superagent.js"></script>
</head>

<body>
  <div id="wrap">

<% include "header" %>

<% include "menu" %>

<% content %>

<% include "footer" %>

  </div>

  <script src="/shpapad.js"></script>
</body>

</html>

includeで他のテンプレート呼び出し、contentでテンプレート継承です。

レイアウトを継承しているリストページを見てみましょう。

<% extend "layout.ect" %>
<section id="content" class="clear">
  <ul class="list">
    <% for v in @lists : %>
      <li id="<%- v.key %>" data-name="<%- v.name %>" data-count="<%- v.count %>"></li>
    <% end %>
  </ul>
</section>

extendに指定したファイルを継承します。for文なんかも簡単でいいですね。
View側の基本的な使い方は特に難しくありませんでした。

使い方(Express)

まずExpressのテンプレートエンジンにECTを指定します。

var express = require('express');
var ECT = require("ect");
var app = express();

//テンプレートのファイルがあるディレクトリ、拡張子を指定してレンダラを生成
var ectRenderer = ECT({ watch: true, root: __dirname + '/views', ext : '.ect'});

app.set('view engine', 'ect'); //ECTを使うよ宣言をして...
app.engine("ect", ectRenderer.render); //ブチ込み

表示自体はレスポンスオブジェクトのrenderメソッドを呼ぶだけです。

app.get("/list", function(req, res) {

  //  ... いろいろあって ...

  var lists = [];
  res.render("list", { menu: [{href: "/list", value:"リスト"}], logoutable: true, lists: lists });

});

renderメソッドの第1引数には表示するテンプレート名を指定します。
第2引数はオブジェクトを指定、キーはそのままテンプレート側で参照できる変数名になります。
shpapadのリストページではメニュー、ログアウト用リンク、リスト本体を表示するので3つの値を渡しています。
Express側の実装も全然難しくないので導入の敷居は低いように思いました。

以上！！！