テンプレートエンジンejsの使い方まとめ

2019年6月21日2019年7月16日

静的htmlで大量ページを作ったりした時に便利なejsの使い方を紹介します。

1. ejsのメリット
2. ejsと他のテンプレートエンジンの比較
3. ejsの導入
4. ejsの使い方
5. ejsのテンプレートのサンプル
6. まとめ：ejsはhtml作るのに便利

ejsのメリット

最初にejsを使うメリットを以下にまとめます。

htmlをパーツ化してヘッダーやフッターなどを別ファイルに作れる
変数を設定して、それを反映したhtmlが生成できる
html内でループ処理を書いて楽に記述できる

htmlを大量に量産したり、ちょっと細かいことしてhtmlを生成したい時にejsは便利です。

ejsと他のテンプレートエンジンの比較

pugやslim、Middlemanなどのhtml作る時に使う他のテンプレートエンジンとも比較しました。

htmlの記述の中に、<%= ejs %>のように記述して書くので簡単（phpと同じ感じ）
文法がjavascriptなのでejsの学習コストが少ない
学習コストが少ない分、他のテンプレートエンジンに比べて機能が少ない

ejsは他のテンプレートエンジンよりもシンプルに扱うことができます。

ejsの導入

ejsを使用するには、Nodejsが必要です。コンパイルするために、Gulpかnpm scriptが必要になるので使用環境に合わせて各々導入してください。この記事ではGulpでejsを導入する方法を解説します。

以下の外部記事が参考になります。

Gulp：EJSとSassとgulpで静的HTMLサイトを作る
npm script：npm-scriptで開発環境を作ってみよう

ejsの使い方

ejsは基本的にhtmlで記述します。で、ejsを使いたい部分だけ、「<% %>」か「<%= %>」か「<%- %>」のどれかで囲ってその中にejsを書けばOK。それぞれの違いは以下に。

<% %>：Javascriptの変数の宣言やifやforなどのjavascriptの記述をします。
<%= %>：囲われた中にあるejsの変数の出力を行います（エスケープする）
<%- %>：囲われた中にあるejsの変数の出力を行います（エスケープしない）

以下に基本的な使い方を掲載しています。と言ってもjavascriptそのままなので、簡単かと思います。

変数を宣言する

<% let text = "テキスト" %>

文字を代入

<% let text = "テキスト" %>
<p><%- text %></p>

<p>テキスト</p>

if文

<% let page = "top" %>
<% if(param !== 'top'){ %>
<p>トップ</p>
<% }else{ %>
<p>下層ページ</p>
<% } %>

<p>トップ</p>

for文

let nameList = [
  "田中",
  "岡本",
  "高木"
];
<% for (var i = 0; i < nameList.length; i++) { %>
<li><%= i+1 %>：<%= nameList[i]%></li>
<% } %>

<li>1：田中</li>
<li>2：岡本</li>
<li>3：高木</li>

ejsの中でコメントアウト

<%# htmlに出力されない。ここの中で変数宣言とかしても無効 %>

パーツのインクルード

<%# parts/_header.ejsをインクルード %>
<% include parts/_header %>

<%# parts/_header.ejsをインクルード。data='test'という引数を渡す %>
<%- include('parts/_header', {data: 'test'}) %>

パーツのインクルードは相対パスで絶対パスにならないので以下のようにやると楽です。

<% var path = './'; %>
<%- include(path + 'parts/_header') %>
<%# インクルードされるのが'./parts/_header'になります。 %>

ejsのテンプレートのサンプル

ejsのテンプレートのサンプルを置いておきます。こんな感じにしていくと楽です。

ejsの階層が変わった時は、pathの変数を変更すればOK。

<%# baseMetaにページの基本情報を。 %>
<%
const baseMeta = {
  ttl: 'ページタイトル',
  desc: 'ディスクリプション',
  url: 'test.html',
  path: './'
};
%>

<%#
インクルード時に、baseMetaに最初に定義したbaseMetaを渡す。
するとインクルード先で、baseMeta.ttlという風にして使用できる。
%>
<%- include(baseMeta.path + 'parts/_head', {baseMeta: baseMeta}) %>
<%- include(baseMeta.path + 'parts/_header', {baseMeta: baseMeta}) %>

<!-- ここにメインの記述 -->

<%- include(baseMeta.path + 'parts/_footer', {baseMeta: baseMeta}) %>
<%- include(baseMeta.path + 'parts/_footerHead', {baseMeta: baseMeta}) %>

インクルード先の例を全部書いても仕方がないので1つだけ書いておきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title><%= baseMeta.ttl %></title>
    <meta name="description" content="<%= baseMeta.desc %>">
    <link rel="stylesheet" href="<%= baseMeta.path %>/css/index.css">
  </head>
  <body>

baseMetaに色々入れておくとテンプレート先で楽になります。