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

Archives Details

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

JavaScript

2014.03.16

この記事は最終更新日から1年以上が経過しています。

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を紹介させて頂きます。

ではでは。

Comment

Related Article

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

2018.09.26

Vue.js + SSR (Universal JavaScript)環境を、「NUXT.js」でサクッと構築する方法。

2017.10.09

フロントエンド開発が捗る JSON Serverについて

2017.07.10

技術書、参考書のしおりには【BOOK DARTS】がオススメ!

2017.07.01

会社で npm Private導入して、1ヶ月で8個ほどパッケージ作成したお話。

2017.06.02

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「実装編」

2017.03.26

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「環境構築編」

2017.02.21

Facebook製 JavaScript 関数ライブラリ。Immutable.js がいい感じ!

2016.07.31

【JS】フロントでレコメンドアルゴリズムを簡単実装できるJavaScriptライブラリ「RecommendJS」を公開しました。

2016.05.30

JavaScript ビット演算・ビットマスクについてまとめてみました。

2016.03.15

CATEGORY LIST

LATEST NEWS

Jenkins 認証情報「Jenkinsマスター上の~/.sshから」が表示しない

tool

2018.11.17

流れで、Raspberry Pi Zero WHを購入。気がつけばもうラズパイ4台。

RaspberryPi

2018.11.06

安く電子工作を始めるなら、電子パーツ購入は「aitendo」がおすすめ!

RaspberryPi

2018.11.06

ASUS Chromebook Flip C101PAに、Visual Studio Codeをインストール

Chromebook

2018.10.15

Chromebookに、Ubuntu (Xubuntu)をインストールしたあとの日本語入力設定

Chromebook

2018.10.14

ASUS Chromebook Flip C101PAに、Ubuntu (Linux)インストール手順

Chromebook

2018.10.10

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

JavaScript

2018.09.26

安い!軽い!早い! ノートPC(開発環境)。 Chromebookをついに購入いたしました!

Chromebook

2018.07.22

debian & Xserver XDSLで FireFoxが真っ白のページとなる件

Linux

2018.07.08

Kindle Fire HD 8 にLinuxを導入して扱えるようにする。超コスパ Linux タブレット構築方法!!

Linux

2018.07.04

Laravel 4 を PHP 7 環境へ移行したお話。

PHP

2018.06.10

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US