HTMLテンプレートエンジン　EJSの主要なメソッド

EJS

ejs.render(str, data, options)

EJSのテンプレート文字列とデータを指定してHTMLを生成する関数。

前回の記事で使ったメソッドはこれ。

let ejs = require('ejs');

// テンプレートとデータを用意
const str  = '<%= enemies.join(", "); %>';
const data = { enemies: ['スライム', 'ドラキー', '魔法使い']};

// 描画
const html = ejs.render(str, data);

// 結果を出力
console.log(html);

結果

スライム, ドラキー, 魔法使い

ejs.compile(str, options)とtemplate(data)

ejs.render(str, data, options)は

という大きく２つの処理をしているっぽい。

ejs.compile(str, options)はEJSテンプレート文字列のコンパイルをする関数で

戻り値にtemplate関数が返ってくるようだ。

このtemplate関数に描画したいデータを渡すとHTMLが返ってくるご様子。

let ejs = require('ejs');

// テンプレートとデータを用意
const str  = '<%= enemies.join(", "); %>';
const data = { enemies: ['スライム', 'ドラキー', '魔法使い']};

// EJSテンプレートのコンパイル
const template = ejs.compile(str);
// データを与えてHTMLを生成
const html = template(data);

// 結果を出力
console.log(html);

ejs.renderFile(filename, data, options, function(err, str){})

これはEJSテンプレートを外部ファイルとして用意しておいて、そのファイルを指定してHTMLを生成する事ができる関数みたい。

ファイル構成

root
 ┣━ index.js
 ┗━ template.ejs

tempalte.ejs

<%= enemies.join(", "); %>

index.js

let ejs = require('ejs');

// テンプレートとデータを用意
const str  = '<%= enemies.join(", "); %>';
const data = { enemies: ['スライム', 'ドラキー', '魔法使い']};
const options = {};

// テンプレートファイルを指定してHTMLを生成
ejs.renderFile("template.ejs", data, options, function(err, str) {
    console.log(err, str);
});

結果

null
スライム, ドラキー, 魔法使い

最終的な結果は第四引数にコールバック関数を渡して受け取る。

コールバックの第一引数にはエラー内容、第二引数に生成されたHTMLが渡ってくる。

主要なメソッドはとりあえずこの３つっぽい