HTMLが書ければすぐ習得できるテンプレートエンジン「EJS」の基本的な書き方
HTMLを効率的に書くためのテンプレートエンジンといえば「Pug（旧：Jade）」が有名ですが、書き方がインデント必須で独特な書き方になってしまいます。
コードの質を担保するという意味では、書き方がある程度制限されていた方が良い場面もあるのですが、あまりにもHTMLの書き方と差があるため、複数人のチームでコーディングするときにPugが書けない人がいると使えなくなる可能性があります。
今回紹介するEJSは、書き方はHTMLと全く同じで、それに追加して便利な機能が使えるようになったテンプレートエンジンなので、「最悪の場合、普通にHTMLも書ける」というメリットがあります。
EJSの特徴
EJSは、HTMLにJavaScriptを埋め込む（Embedded）ような形でHTMLを生成できるテンプレートエンジンです。
基本的な書き方はHTMLで、特殊な処理をしたい場所にだけ、EJS用の開始タグと閉じタグを設置し、その中にJavaScriptを書いて使用します。
EJSの基本的な特徴をまとめると下記のようになります。
- あくまで書き方はHTMLと同じ
- 拡張子は
.ejs - ファイルの分割ができる
- if文やfor文などのJavaScriptと同じ構文が使える
これらの機能をうまく使いこなすことで、効率的にHTMLを生成します。
EJSの使い方
基本的な書き方
基本的にはHTMLと同じような書き方をして、EJSの処理は<% %>などの専用の開始タグと閉じタグの中に書きます。
| EJSタグ | 内容 |
|---|---|
| <% %> | 中にJavaScriptをかけて、HTMLとしては出力されない |
| <%= %> | 中にある変数がエスケープ込みで展開される |
| <%- %> | 中にある変数がエスケープなしで展開される（HTMLタグを直接出力したい場合に使用） |
| <%# %> | コメント扱いになり、HTMLとしては出力されない |
| <%% %> | EjsそのものをEjsでテンプレート化したいときにEjsタグのエスケープとして使用します（普段は使用しない） |
基本的にEJSで何か処理して表示させたい場合は<%= %>を使用して、単に変数の定義だけしたい場合などは<% %>を使用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<body>
<%= ここにEjsの処理を追加する %>
</body>
</html>ファイルの分割管理
include()関数を使うと、外部のファイルを読み込むことができます。
<%- include('./_common/header', {vars:'vars'}) %>第一引数には読み込むファイルへの相対パスを入力します。自ファイルが基準になっていて拡張子の.ejsを省略できます。
第二引数にはそのEJSに渡すパラメータを指定できます。
これを使ってヘッダーやフッターを別ファイルにして管理するだけで、EJSを使うメリットはあります。
変数を使う
変数を定義したいときは、<% %>の中で宣言するのですが、varを使う方法（ローカル変数）と使わない方法（グローバル変数）の2通りがあります。
<% var localSample = 'ローカル変数：varを使って宣言'; %>
<% globalSample = 'グローバル変数：varを使わずに宣言'; %>ローカル変数の場合はファイル間での変数の共有はできませんが、グローバル変数であれば共有可能です。
if文を使う
あらかじめ変数を用意しておいて、変数に応じてif文で条件分岐することも可能です。
書き方はJavaScriptとほとんど同じですね。
<%
var meta = {
title: 'トップページ',
};
-%>
<% if (meta.title == 'トップページ') { %>
<div class="top">トップページに表示</div>
<% } else if (meta.title == 'アバウトページ') { %>
<div class="about">アバウトページに表示</div>
<% } else { %}
<div class="other">それ以外のページ</div>
<% } %>ヘッダーをトップページとそれ以外のページで分岐するときなどに使います。
for文を使う
for文を使えば、複数回必要になる要素を短く書けます。
<% for (var i = 1; i <= 10; i++) { %>
<p><%= i %>回目</p>
<% } %>まとめ
「複数人で作業する必要があり、Pugだと書けない人がいるから導入ができない」「Pugだと社内で書ける人が自分しかいない」といった状態でも、EJSであれば基本的な書き方はHTMLと一緒です。
最悪の場合、拡張子は.ejsだけど中身は普通のHTMLというのも可能です。
とりあえずヘッダーとフッターだけは分割管理しておけば、あとから修正が入っても比較的ラクに修正できるようになるので、メリットは十分あるのではないでしょうか？
