Edited at

nodejs expressの爆速テンプレートECTの構文(syntax)整理

More than 1 year has passed since last update.


目的

expressで最も早いと評判のテンプレート、ECTですが、構文(syntax)が整理されている所が無かったので自分で整理する事にしました。


参考

ここ=>http://ectjs.com/にも、ECTの説明と共にある程度乗ってます。

CoffeeScriptと近いですが、一致はしていないです。



構文(syntax)


・エスケープ無しで出力

<h1><%- @title %></h1>


・エスケープして出力

<code><%= @source %></code>


・IF文

<% if @value1? : %>

<label>?で存在確認。false,"",0でも存在すればここです</label>
<% else if !@value2 : %>
<label>[false,0,""+存在しない] を判断したければ!</label> <!-- ?と同じ役割も兼ねます -->
<% else if @value3 == "2" : %>
<label>式で比較。=== は無くて、==で型の一致も見られます。</label>
<% else : %>
<label>該当無し</label>
<% end %>


・変数の追加

<!-- 変数宣言。後続の処理でこの変数を使えます。 -->

<% @start_num = 0 %>


・三項演算

<!-- 三項演算で値を@strに入れます。 -->

<!-- @valueがあれば"a"。無ければ"b"が出力される -->
<% @str = if @value then "a" else "b" %>
<label><%- @str %></label>

<!-- こちらは変数に代入せず直接画面出力する場合 -->
<label><%= if @value then "a" else "b" %></label>


・While文

<!-- 括弧内がtrueの間繰り返します -->

<% while (@start_num++ < @max_num) : %>
<li><%- @start_num %></li>
<% end %>


・for文(配列の繰り返し)

<!-- 繰り返しは配列のみです。オブジェクト(map)はダメです -->

<% @value = [1,2,3] %>
<% for val in @value : %>
<li><%- val %></li>
<% end %>


・Switch文

<% @oauthProvider='facebook' %>

<% switch @oauthProvider : %>
<% when 'facebook' : %>
<label>facebook</label>
<% end %>
<% when 'twitter' : %>
<label>twitter</label>
<% end %>
<% else : %>
<label>else</label>
<% end %>
<% end %>


・関数の利用

// JavaScriptでテンプレートに関数を渡した場合

data.calc = function(a,b){return a+b;};
res.render('test', data);

<!-- test.ect -->

<!-- 画面側で利用可能 -->
<%= @calc(1,2) %>


・レイアウトの利用

<!-- page.ectファイル -->

<% extend 'layout.ect' %>
<!-- layout.ectの中の"content"の場所に読み込まれます -->
<div>Hello, World!</div>
<% block 'footer' : %>
<!-- layout.ectの中の"content 'footer'"の場所に読み込まれます -->
<span>Custom footer content</span>
<% end %>

  +

<!-- layout.ectファイル -->

<html>
<body>
<% content %>
<footer>
<% content 'footer' %>
</footer>
</body>
</html>

   ↓

<!-- page.ectを表示した結果になります -->

<!-- layout.ectの中に、page.ectの内容と部品(blockの部分)が読み込まれます -->
<html>
<body>
<div>Hello, World!</div>
<footer>
<span>Custom footer content</span>
</footer>
</body>
</html>


・他ECTファイルの読み込み

<!-- 他ファイルをパラメータを含めて表示 -->

<!-- item.ectを読み込みますが、拡張子付きで指定すると
動きがおかしくなったので付けない方がいいです。 -->

<% include 'item', { item : 'book', price: '10$' } %>

  ↑ に読み込まれます。

<!-- item.ect -->

<div><%= @item %></div>
<div><%= @price %></div>


以上、まだ他にあるかもですが、これだけあればだいたい書けると思います。


(おまけ)出来なかった事

以下、出来そうかと思いましたが出来なかった事です。

もしやり方知っている方がいたら教えて下さい(>人<)


・ECTファイル内でのfunctionの定義

<!-- こういう風に、ECT内で変数作るように関数は作れなかったです -->

<% @calc=function(a,b){return a+b;} %>


・変数インクリメントするタイプのfor文

<!-- 実行できませんでした -->

<% for (@i = 0;@i < 5; @i++) : %>
<li><%= @i %></li>
<% end %>