このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2014.03.16

node.js テンプレートエンジン ECTが爆速!! らしい件(ectの使い方)

node.jsでwebAppを作成する際、Expressを用いた様々なテンプレートエンジンが存在します。

有名ところで、「EJS」や「jade」等々とあるのですが、その中でも群を抜いて爆速といわれている(うたっている)テンプレートエンジンが「ECT」となります。

ECT

公式ページ

http://ectjs.com/

確かに、Jadeを使っていた時ページ表示の「遅さ」を感じていました。

かといって「EJS」を使おうと思っても、Express2 まで使えていたlayout、partial、block等が、

Express3からは、テンプレート部分と分離しシンプルなAPIにするため、ejs-localsに移ったようで

ejs-locals github

ejs-locals

https://github.com/RandomEtc/ejs-locals

ejs-locals インストール
npm install ejs-locals --save

こちらを使う必要があります。

ejsとejs-locals ??うーん。。と、もやもやしている中、爆速テンプレートエンジン「ECT」を利用してみたのですが、

確かに体感できほどの「爆速」具合で 、<% extend ‘ファイル名’ %>で、サクっとextendも可能だし、とても使いやすいので使ってみることにしました。

node.js 各テンプレート ベンチマーク

Jade

EJS

ECT

確かに群を抜いて爆速!!

express をインストール

何はともあれ、使ってみましょう。まずexpressをnpmコマンドでインストールします。

前回の

サーバーサイドJavascript node.js expressやらnpmやら

にも記載している方法となります。

npm install -g express

でインストール。(expressはパッケージ名。expressの場合なのでexpress)

オプション-gがないと、実行しているディレクトリ下に“node_modules”ディレクトリを作り、そこにパッケージが入ります。

オプション-gを付けることによって、一度のインストールで全部のnode.jsアプリケーションで使える、グローバルな領域にモジュールをインストールします。

この際、パーミッションエラーでインストールできず、エラーが出てしまう場合は、sudoコマンドを利用してインストールしましょう。

sudo npm install -g express

passwordを求められますので、PCのパスワードを入力。リターン。

ectインストール

ectのインストールは例の如く、npmコマンドでインストールが出来ます。

npm install ect express同様、オプション-gを付ければグローバル領域にインストールできます。

npm install -g ect

また、パーミッションエラーが出る場合はsudoコマンドでインストールしましょう。

sudo npm install -g ect

パスワードを求められますのでパスワードを入力しリターン。

このような感じになればインストール完了。

ect 利用方法

プロジェクトディレクトリを作成し(今回はect-testディレクトリを作成しています。)移動。

expressコマンドでapp –ectとコマンドしてみたところ、

express app --ect

どうやら、デフォルトのJadeテンプレートが作成されたようです。

ectはejsに記述が近しいので、一旦は ejsオプションで作成した方がいいと思います。

express app --ejs

テンプレートを生成し、「package.json」を編集。

package.json

{
    "name": "application-name",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node app.js"
    },
    "dependencies": {
        "express": "3.5.0",
        "ect": "*"
    }
}

に変更しました。

この状態で、

npm install

を行うと、express、ectが含まれた「node_modules」ディレクトリが生成されます。

app.js
var ECT = require('ect'); // ECT 読み込み
app.engine('ect', ECT({ watch: true, root: __dirname + '/views', ext: '.ect' }).render);
app.set('view engine', 'ect');

app.jsを編集します。

上記の3行を含めます。app.set(‘view engine’, ‘ect’);は、app.set(‘view engine’, ‘ejs’);を変更します。

もろもろ含んだ記述は以下の通りとなります。

app.js
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var ECT = require('ect'); // ECT 読み込み

var app = express();

// ECT 環境設定
app.engine('ect', ECT({ watch: true, root: __dirname + '/views', ext: '.ect' }).render);

// all environments
app.set('port', process.env.PORT || 3000);
app.set('view engine', 'ect');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
    app.use(express.errorHandler());
}

app.get('/', routes.index);
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
    console.log('Express server listening on port ' + app.get('port'));
});

続いて、index.ejsを変更します。

拡張子をectに変更します。

変更したindex.ectには ejs用の記述がありますので、変更します。

<%= title %>

<%= @title %>

このように、ectではパラメータには@を付与します。

また、「=」を付与することで、パラメータ受け取る事が出来ます。

index.ect
<!DOCTYPE html>
<html> 
<head> 
    <title><%= @title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= @title %></h1>
<p>Welcome to <%= @title %></p>
</body>
</html>
node app.js

で起動し、localhost:3000にアクセス。

以下の様に表示出来れば一旦成功となります。

ect まとめ、活用方法

Output:オブジェクトを出力
<%- @key %> エスケープ処理をせずに出力
<%= @key %> エスケープ処理をして出力
Inheritance: 継承

テンプレートを継承することができます。

全体の構造にあたる部分(共通で利用する部分)を親テンプレートとし、

その中の一部のブロック部分のみを子テンプレートで上書きするといったことが可能です。

<% content %>

親テンプレート側に記述。
子テンプレートで上書きするプレースホルダになる。

<% content ‘ブロック名’ %>

ブロック名を付与することで、
小テンプレート側から任意に呼び出せます。

<% extend ‘example.ect’ %> 子テンプレート側から extend で
継承する親テンプレートのファイル名を指定。
Partials: 別ファイルを読み込み

別ファイルを読み込む時は、include を使います。

<% include ‘example.ect’ %> インクルードしたいファイル名を指定する
Blocks: ブロックの使い方

継承で使用した <% content %> の他に、任意の名前をつけた複数のプレースホルダを利用することができます。

<% content ‘example’ %>

親テンプレート側に書く。
プレースホルダに任意の名前を指定する。

<% block ‘example’ : %>

<% end %>

子テンプレート側に書く。
親テンプレートのプレースホルダ名を指定する。
Conditions: 条件分岐

CoffeeScript のシンタックスと同様となります。

CoffeeScript

<% 条件文: %>

<% else: %>

<% end %>

条件文や else の後の : を付与。
if文終了箇所に <% end %> を付与。

サンプル例

extendを用いた継承例となります。

例:

layout.ect

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title><%= @title %></title>
    <link rel="stylesheet" href="/css/style.css"/>
    <% content 'scripts' %>
</head>
<body>
<header></header>
<% content %>
<footer></footer>
</body>
</html>

共通テンプレート layout.ect を作成。

extendで呼び出し、各ページのコンテンツは <% content %>に挿入されていきます。

<% content ‘scripts’%>と任意のブロック名を付与することでで任意に呼び出す事が可能です。

index.ect

<% extend 'layout.ect' %>
<section>
    <h1><%= @title %></h1>
    <p>Hello!</p>
</section>

<% extend ‘layout.ect’ %>で先程作成した、layout.ectを呼び出しその後の記述は

<% content %>に出力されます。

page.ect

<% extend 'layout.ect' %>
<% block 'scripts' : %>
<script type="text/javascript">
    var params = { title: '<%= @title %>' };
</script>
<script src="../js/page.js" type="text/javascript"></script>
<% end %>
<section></section>

各ページで、このページだけはscriptを変えたい、固有のscriptを読み込みたいと言ったときは

先ほど作成した<% content ‘scripts’%>を <% block ‘scripts’ : %>で呼び出し

変更することが可能です。

<% content ‘scripts’%>

<% block ‘scripts’ : %>

<% end %>

if・for文例

if文、for文を用いた例となります。

例:

routes/index.js

exports.index = function(req, res){ res.render('index', { 
    title: 'Express',
    links: [ 
      { name : 'Google', url : 'http://google.com/' },
      { name : 'Facebook', url : 'http://facebook.com/' },
      { name : 'Twitter', url : 'http://twitter.com/' } 
      ] 
  });
};

routes/index.jsにリンクのオブジェクトを作成。

index.ect

<% linkHelper = (link) -> %>
  <li><a href="<%- link.url %>"><%- link.name %></a></li>
<% end %>
<% if @links?.length : %> 
  <ul> 
      <% for link in @links : %>
      <%- linkHelper link %>
      <% end %>
  </ul> <% else : %>
  <p>List is empty</p>
<% end %>

上記の記述で呼び出す事が可能となっております。

出力

細かく見ていきましょう。

<% linkHelper = (link) -> %>
    <li><a href=”<%- link.url %>”><%- link.name %></a></li>
<% end %>

上記の部分で 出力する内容の定義を行なっております。

<% if @links?.length : %>

 linksオブジェクトが存在すれば以下のfor文を実行。

<% for link in @links : %> <%- linkHelper link %> <% end %>

変数link に@linksのプロパティ代入。

<%- linkHelper link %>

上記で定義した出力する内容にそれぞれ代入され出力します。

最後に…

といった感じで、爆速で非常に使いやすいテンプレートエンジンとなっております。

次回は実際に利用した node  webAppを紹介させて頂きます。

ではでは。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。