JavaScriptのテンプレートエンジン EJS を使う

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); //=> &lt;h1&gt;Hello world&lt;/h1&gt;

<%- %>

テンプレートの値を出力します。
<と>をエスケープしません。

例:現在の日付を国際標準化機構 (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' })
    }
);

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください