HTMLが書ければすぐ習得できるテンプレートエンジン「EJS」の基本的な書き方

HTMLを効率的に書くためのテンプレートエンジンといえば「Pug(パグ)（旧：Jade）」が有名ですが、書き方がインデント必須で独特な書き方になってしまいます。

Webrandum

効率的にHTMLを生成できるPugの特徴や記述方法

https://webrandum.net/pug

コードの質を担保するという意味では、書き方がある程度制限されていた方が良い場面もあるのですが、あまりにもHTMLの書き方と差があるため、複数人のチームでコーディングするときにPugが書けない人がいると使えなくなる可能性があります。

今回紹介するEJS(イージェイエス)は、書き方はHTMLと全く同じで、それに追加して便利な機能が使えるようになったテンプレートエンジンなので、「最悪の場合、普通にHTMLも書ける」というメリットがあります。

EJSの特徴

ejs.co

EJS -- Embedded JavaScript templates

https://ejs.co

EJSは、HTMLにJavaScriptを埋め込む（Embedded）ような形でHTMLを生成できるテンプレートエンジンです。

基本的な書き方はHTMLで、特殊な処理をしたい場所にだけ、EJS用の開始タグと閉じタグを設置し、その中にJavaScriptを書いて使用します。

EJSの基本的な特徴をまとめると下記のようになります。

• あくまで書き方はHTMLと同じ
• 拡張子は.ejs
• ファイルの分割ができる
• if文やfor文などのJavaScriptと同じ構文が使える

これらの機能をうまく使いこなすことで、効率的にHTMLを生成します。

EJSの使い方

基本的な書き方

基本的にはHTMLと同じような書き方をして、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というのも可能です。
とりあえずヘッダーとフッターだけは分割管理しておけば、あとから修正が入っても比較的ラクに修正できるようになるので、メリットは十分あるのではないでしょうか？