JavaScriptのテンプレートエンジン EJS の使い方を紹介します。
EJSはJavaScriptで使えるシンプルなテンプレートエンジンです。
高機能ではありませんが、シンプルでわかりやすいライブラリです。
package.jsonの作成
package.jsonファイルを作成します。
npm init
EJSのインストール
EJSをインストールします。
npm install ejs --save
簡単な使い方
EJSを読み込みます。
var ejs = require('ejs');
EJSのテンプレート文字列を用意します。
var str = '<%= params.join(" "); %>';
テンプレートに使用するデータを用意します。
var params = ['Hello', 'world'];
テンプレートエンジンを実行して、作成された文字列を受け取ります。
var html = ejs.render(str, {params: params});
実行結果を確認します。
console.log(html); //=> Hello world
全体のコードは次のようになります。
var ejs = require('ejs');
var str = '<%= params.join(" "); %>';
var params = ['Hello', 'world'];
var html = ejs.render(str, {params: params});
console.log(html); //=> Hello world
より高度な使い方は後述。
EJSのタグ
<%= %>
テンプレートの値を出力します。
<と>をエスケープします。
例:現在の日付を国際標準化機構 (ISO) 形式で出力する。
var ejs = require('ejs');
var html = ejs.render(
'<%= date.toISOString() %>',
{ date: new Date() });
例:<と>をエスケープする
var ejs = require('ejs');
var html = ejs.render(
'<%= value %>',
{ value: '<h1>Hello world</h1>'});
console.log(html); //=> <h1>Hello world</h1>
<%- %>
テンプレートの値を出力します。
<と>をエスケープしません。
例:現在の日付を国際標準化機構 (ISO) 形式で出力する。
var ejs = require('ejs');
var html = ejs.render(
'<%- date.toISOString() %>',
{ date: new Date() });
例:<と>をエスケープしない
var ejs = require('ejs');
var html = ejs.render(
'<%- value %>',
{ value: '<h1>Hello world</h1>'});
console.log(html); //=> <h1>Hello world</h1>
<% %>
JavaScriptの処理を行います。
出力はしません。
var fruits = ["Apple", "Pear", "Orage", "Lemon"];
<% for(var i = 0; i < fruits.length; ++i) {%>
- <%=fruits[i]%>
<% } %>
例:Array.forEachで繰り返し処理
var ejs = require('ejs');
var tmpl = `<% params.forEach(function(v, i){ %>
<%= i %>:<%= v %>
<% }); %>`;
var html = ejs.render(
tmpl,
{ params: ['Hello', 'world'] });
例:if分で条件分岐
var ejs = require('ejs');
var tmpl = `
<% if (params.length === 0) { %>
empty
<% } %>
`;
var html = ejs.render(
tmpl,
{ params: [] });
高度な使い方
テンプレートをファイルから読み込む
renderFile()関数を使用します。
var ejs = require('ejs');
var filename = './tmpl.ejs'; // ファイル名
var params = { date: new Date() }; // 引数
var html = ejs.renderFile(filename, params, function(err, str) {
console.log(str);
});
またはinclude()関数を使用します。
この場合はオプションにfilenameを指定します。
var ejs = require('ejs');
var html = ejs.render(
'<%- include("./tmpl.ejs", date); %>',
{ date: new Date() },
{ filename: "./tmpl.ejs" });
テンプレートの入れ子
テンプレートの中に、別のテンプレートを組み込む方法です。
var ejs = require('ejs');
var main_tmpl = `MainData = <%- maindata %>
<%- sub %>`;
var sub_tmpl = `SubData = <%- subdata %>`;
var html = ejs.render(
main_tmpl,
{
maindata: 'MAINDATA',
sub: ejs.render(sub_tmpl,
{ subdata: 'SUBDATA' })
}
);