EJS

EJSとは

テンプレートエンジンの１つで、共通部分を外部化(パーツ化)し、それらを読み込むことで静的HTMLファイルを生成します。 また、下記の内容などができます。

• 数や文字列や配列やオブジェクトの宣言と処理(JavaScriptと同じ)
• HTMLへの値の展開
• ループと条件分岐
• 外部ファイルの読み込みとパラメータの引き渡し

EJSは拡張子.ejsを用いて記法を書き込みます。 一見htmlの記法ですが、いくつか独自の記法があるのでその一部をご紹介したいと思います。

<% 記法

<% %>
EJSでは、テンプレートとなるHTMLのコード内に特殊なタグを使い、必要な情報を埋め込むことができます。 このタグの内側はJavaScriptとして扱われ、HTMLとしては出力されません。

<% let press = 'Hello! EJS!'; %>

<%= %>
中にあるJS変数の値をエスケープ込みで展開します。

<% let para = '<p>Hello ejs!</p>'; %>
<div><%= para %></div>
・
// .html
<div>&lt;p&gt;Hello ejs!&lt;/p&gt;</div>

<%- %>
中にあるJSの値をエスケープなしで展開します。値を展開するときは主にエスケープなしのこっちの記法を使用します。

<% let para = '<p>Hello ejs!</p>'; %>
<div><%- para %></div>
 
// .html
<div><p>Hello ejs!</p></div>

<%# %>
内側がコメントとなり、HTMLの出力結果には影響しません。

<%# ejs Comment! %>
 
// .html
<!-- HTML Comment! -->

<%% %>
通常は使わないが、Yeoman等でEJS自体をEJSでテンプレート化したい時に<% %>のエスケープとして使用する。

<%% let para = 'Hello ejs!'; %>
 
// .html
<% let para = 'Hello ejs!'; %>

その他

include()関数
メインの.ejsファイルにて<% include() %>を記述することで別ファイルをメインファイル内に埋め込むことができます。
第一引数に読み込むEJSファイルへの相対パス(自ファイルが基準)、 第二引数にそのEJSに渡すパラメータを指定します。 引数のパスは拡張子の「.ejs」を省略できます。。

<% include('./_partial', {param:'param'}) %>

変数
ejsの変数のスコープ(有効範囲)は定義したそのEJSファイルの中で閉じています。include()したファイルへ変数を渡すには次の2つの方法があります。

＊グローバル変数としてvarを付けずに変数宣言する

//.index.ejs
<% var myData = {head:'Head text', body:'Body text'}; %>
<% include('two.ejs', {var1:'hoge', data:myData}); %>
 
//sub.ejs
<section class="<%= var1 %>">
  <h2><%= data.head %></h2>
  <p><%= data.body %></p>
</section>

＊include()の第2引数で渡す

<% let para = 'Hello ejs!'; %>  // ローカル変数のためファイル内でしか呼び出せない
<% para = 'Hello ejs!'; %>  // グローバル変数なので別ファイルでも呼び出せる

ループ
JavaScriptでおなじみの記法もHTMLの構文内に記述することが可能です。

// ＊for
<% for (var i = 0; i < 10; i++) { %>
<p>このループは<%= i+1 %>回目です。</p>
<% } %>
 
 
// ＊while
<% var counter = 1; %>
<% while (counter <= 10) { %>
<p>このループは<%= counter %>回目です。</p>
<% counter++; %>
<% } %>

配列
配列の中身を順番に取り出すことができます。

// ＊array.forEach()
<% var ary = ['アイテム1', 'アイテム2', 'アイテム3']; %>
<% ary.forEach(function (value, key) { %>
<p><%= key %>: <%= value %></p>
<% }); %>
 
// ＊for...in, for...of
<% var ary = ['アイテム1', 'アイテム2', 'アイテム3']; %>
 
<% for (var key in ary) { %>
<p><%= ary[key] %></p>
<% } %>
 
<% for (var item of ary) { %>
<p><%= item %></p>
<% } %>

条件分岐
これもJavaScriptにておなじみの記法ですね。 HTMLの構文内でも簡単に条件分岐を指定することができます。

// ＊if
<% if (data.type === 'type1') { %>
<p class="type1">This template is for type1.</p>
 
<% } else if (data.type === 'type2') { %>
<p class="type2">This template is for type2.</p>
 
<% } else { %>
<!-- else -->
<% } %>
 
// ＊switch
<% var text = ''; %>
<% var state = 0; %>
<% switch ( state ) {
  case 0:
    text = 'case0';
    break;
  case 1:
    text = 'case1';
    break;
} %>
<p><%= text %></p>

ざっくりとしたご紹介ですが、EJSは学習コストが比較的低く、取り入れやすいのが魅力の一つです。 興味がありましたら是非公式リファレンスを除いてみてください。