# JavaScript ejsの使い方
テンプレートエンジンであるejsの基本的な使い方を見ていく。
# ejsとは
ejs (opens new window)は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>
山田さん
田中さん
加藤さん