JavaScript ejsの使い方

テンプレートエンジンであるejsの基本的な使い方を見ていく。

ejsとは

ejsはJavaScript用のテンプレートエンジンだ。
ejsを使うことでHTMLをヘッダーやフッターで分割してファイルを管理したり、HTMLエスケープをしたり、繰り返し処理や分岐を簡潔に記述できるようになる。

ejsのインストール

npm install ejs --save-dev

package.json

{
  "devDependencies": {
    "ejs": "^2.6.1"
  }
}

ディレクトリ

.
├── index.js
├── package-lock.json
└── package.json

ejsの基本的な使い方

変数の展開

使い方
ejs.render(テンプレート(必須)、テンプレート内で使う変数(任意)、オプション(任意)、非同期(任意))

ejsのrender関数を呼び出すことで、テンプレート内の変数を展開できる。
第1引数にテンプレートを指定する。テンプレートは<%=%>で囲む。
第2引数にテンプレート内で使う変数を指定する。{テンプレート内での変数名: 値}として設定する。

index.js

const ejs = require('ejs');

const people = ['山田', '田中', '加藤'];
const html = ejs.render('<%= people.join(", "); %>', { people: people });
console.info(html);

実行すると、テンプレートで指定したpeopleがカンマ区切りになって出力される。

$ node index.js
山田, 田中, 加藤

テンプレート内で使う変数は複数指定でき、プリミティブデータ型(文字列や数値など)、配列、オブジェクトいずれを指定してもよい。

index.js

const ejs = require('ejs');

const people = ['山田', '田中', '加藤'];
const yamada = {
    name: '山田',
    height: '176cm',
}
const number = 10;
var template = `<h2>人</h2>
<%= people.join(", "); %>
<h2>詳細</h2>
<%= number %>番目
<%= yamada.name %>
<%= yamada.height %>
`;
const html = ejs.render(template, { people: people, yamada: yamada, number: number });
console.info(html);

出力結果

<h2></h2>
山田, 田中, 加藤
<h2>詳細</h2>
10番目
山田
176cm

分岐

ここまで変数を展開する際には<%=%>で囲んできたが、<%=にはHTMLエスケープを行うという意味がある。
分岐や繰り返しの処理には=をつけず<%%>で囲む。 <%%>の中では普通のJavaScritのようにif文を書くことができる。

index.js

const ejs = require('ejs');

const name = '';
var template = `<h2>人</h2>
<% if (name) { %>
<%= name %>
<% } else { %>
名無しです
<% } %>  
`;
const html = ejs.render(template, { name: name});
console.info(html);

同様にswitch文も使うことができる。

index.js

const ejs = require('ejs');

const role = 'admin';
var template = `<h2>権限</h2>
<% switch (role) {
case 'admin' : %>
システム管理者
<% break;

case 'operator' : %>
オペレーター
<% break;

case 'user' : %>
一般ユーザー
<% break;
} %>
`;
const html = ejs.render(template, { role: role});
console.info(html);

出力

<h2>権限</h2>

システム管理者

繰り返し

if文やswitch文と同様に、<%%>内でforEachなどを使うこともできる。

const ejs = require('ejs');

const people = ['山田', '田中', '加藤'];
var template = `<h2>人</h2>
<% people.forEach((person)=>{ %>
<%= person %>さん
<% }) %>
`;
const html = ejs.render(template, { people: people});
console.info(html);

出力

<h2></h2>

山田さん

田中さん

加藤さん

不要な空白の除去

分岐や繰り返しの出力結果で見たように、変数を展開した際に不要な空白が入ってしまう。 _%>タグで閉じることで不要な空白を除去することができる。

const ejs = require('ejs');

const people = ['山田', '田中', '加藤'];
var template = `<h2>人</h2>
<% people.forEach((person)=>{ _%>
<%= person %>さん
<% }) _%>
`;
const html = ejs.render(template, { people: people});
console.info(html);

出力

<h2></h2>
山田さん
田中さん
加藤さん

・参考
https://ejs.co/