テンプレートエンジン EJSを使ってみよう

プロジェクトによってはCMSの導入はないけれど、定型作業が多いものもあると思います。
そんな時にはテンプレートエンジンがあると便利です。
EJSは2021年現在では特に目新しい技術ではありませんが、これから導入するにしてもまだまだ現役だなと感じました。

私が感じるEJSのメリット

HTMLがそのまま使えるので、EJSを使わない作業に影響しない
自動化できるので早くてミスが減る

私が感じるEJSのデメリット

黒い画面を多用するので、不慣れな人には少し厳しいかもしれない
環境づくりがちょっとめんどくさい

まぁそんなわけで、使ってみましょうー！

私が感じるEJSのメリット
私が感じるEJSのデメリット

インストール・環境作り
設定
1. Gulpのタスクファイル(gulpfile.js)に動作を設定する
2. 作業用フォルダにejsフォルダとpublicフォルダを作る
動作テスト
EJSの書き方
1. 基本
  1. 出力とコメントアウト
  2. 制御構文
2. 特に便利な使い方
参考にさせていただいたサイト

インストール・環境作り

黒い画面を立ち上げる

黒い画面とは、WindowsだとコマンドプロンプトかWindows PowerShell（Macはターミナル）
以下ツールはコマンドプロンプト表記のみなので、適宜読み替え

Node.jsがインストールされているか確認する

コマンドプロンプトでnode -vを入力して、バージョンが表示されていれば、インストールされている
インストールされていなければ、https://nodejs.org/ja/ で推奨版をインストールする
既にインストールされている場合は、コマンドプロンプトに表示されたバージョンと比較する。古ければ上書きインストールをする
nodenvなどのNode.jsのバージョン管理ツールもあるので、そちらがよければ管理ツールを利用してもよい

npmがインストールされているか確認する

コマンドプロンプトでnpm -vでバージョンが表示されていれば、インストールされている
基本的にはNode.jsのインストールで一緒にインストールされる

作業用フォルダに移動する

例えば、c:¥workspaceが作業用フォルダであれば、コマンドプロンプトでcd c:¥workspaceと入力すれば移動できる。
入力前の行の先頭がC:\Users\[ユーザ名]>からc:¥workspace>に変わっていれば、移動できている

package.jsonを作成

コマンドプロンプトでnpm init -yを入力する

Gulpをインストール

コマンドプロンプトでnpm install -D gulpを入力する
現在のフォルダでのみのインストールなので、他のフォルダで利用する場合は、前述の作業用フォルダに移動→package.jsonを作成→Gulpをインストールを繰り返す

EJSコンパイルパッケージ gulp-ejsをインストール

コマンドプロンプトでnpm install -D gulp-ejsを入力する

拡張子リネームパッケージ gulp-renameをインストール

コマンドプロンプトでnpm install -D gulp-renameを入力する

空白行削除パッケージ gulp-replaceのインストール

コマンドプロンプトでnpm install -D gulp-replaceを入力する

fsのインストール

コマンドプロンプトでnpm install -D fsを入力する

パッケージがインストールできたか確認

コマンドプロンプトでnpm ls --depth=0を入力すると、パッケージがインストールできているか確認ができます。

設定

Gulpのタスクファイル(gulpfile.js)に動作を設定する

下記の内容を入力して、作業用フォルダにgulpfile.jsというファイル名で保存する

Gulp v4系の書き方

const { src, dest, watch, parallel } = require('gulp');

const fs = require('fs');
const ejs = require('gulp-ejs');
const rename = require('gulp-rename');
const replace = require('gulp-replace');

const compileEjs = (done) => {
	// const data = JSON.parse(fs.readFileSync('ejs/cntdata.json', 'utf-8')); //JSONあり
	src(['ejs/**/*.ejs', '!'+'ejs/**/_*.ejs'])
		// .pipe(ejs({pageData: data})) //JSONあり
		.pipe(ejs({}, {}, {ext: '.html'})) //JSONなし
		.pipe(rename({extname: '.html'}))
		.pipe(replace(/[\s\S]*?(<!DOCTYPE)/, '$1'))
		.pipe(dest('public'));
	done();
};

const watchFiles = () => {
	watch(['ejs/**/*.ejs', '!'+'ejs/**/_*.ejs'], compileEjs);
};
exports.default = parallel(watchFiles);

Gulp v3系の書き方（jsonを使わない前提のみ）

const gulp = require('gulp');
const ejs = require('gulp-ejs');
const rename = require('gulp-rename');
const replace = require('gulp-replace');

gulp.task('ejs', function(cb){
   gulp.src(
       ['ejs/**/*.ejs','!' + 'ejs/**/_*.ejs']
    )
    .pipe(ejs({}, {}, { ext: '.html' }))
    .pipe(rename({ extname: '.html' }))
    .pipe(replace(/[\s\S]*?(<!DOCTYPE)/, '$1'))
    .pipe(gulp.dest('public'))
    cb();
});

作業用フォルダにejsフォルダとpublicフォルダを作る

コマンドプロンプトで作るのが難しい場合は、エクスプローラ（Macの場合はFinder）上でOK
gulpfile.jsのgulp.src(〜)の箇所で、ejsフォルダの中の拡張子ejsのファイル（かつ先頭に_がついているファイルは対象外）をコンパイルする設定になっているため
gulpfile.jsの.pipe(gulp.dest('public'))行でコンパイルしたファイルをpublicフォルダに格納する設定になっているため

動作テスト

テスト用のejsファイルを用意する

下記のソースをコピーアンドペーストして、ejsフォルダにindex.ejsとして保存する

<% const variable = '変数がpタグの中に挿入されていればOK'; %>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>EJS TEST</title>
</head>
<body>
<body>
<p><%= variable %></p>
</body>
</html>

コンパイルする

コマンドプロンプトでnpx gulp ejsを入力する

htmlファイルが生成されているか確認する

publicフォルダにindex.htmlが生成されていれば、インストール＆設定成功

EJSの書き方

基本

出力とコメントアウト

htmlのコードとして出力しない。変数の初期化など
<% const print = "出力はされません" %>
htmlのコードとして文字列の変数を出力する。要素の内容など
<%= print %>
htmlのコードとして子要素のhtmlタグを含んだ変数を出力する。要素の子要素一式など
<% const print = "出力します" %>
<%- print %>
htmlにコンパイルしない。
ejsでコードを挿入している場合は、<%# 〜 %>でコメントアウトしたあと、親要素のhtmlもでコメントアウトする。
<%# const print = "出力はされません" %>

制御構文

if文

<%
  const txt = 'hoge';
  if(txt){
%>
<p><%= txt %></p>
<% } %>

for文

<% for(let i = 0; i < 5; i++) { %>
<p><%= i+1 %>番目の段落です。</p>
<% } %>

while文

<%
  let num = 1;
  while(num <= 10){
%>
<p><%= num %>番目の段落です。</p>
<%
    num++;
  }
%>

foreach文

<%
  const array = ['hoge', 'fuga', 'moge'];
  array.forEach(function(value){
%>
<p><%= value %></p>
<% } %>

特に便利な使い方

変数

title、 metaタグ、OGP画像パス、ページURL、外部ファイルなどのパスを変数で埋め込み

<% const title = "ページのタイトル" %>
<title><%= title %></title>

パーツ分割 (include)

共通パーツをファイル分割して管理+コンパイル時にまとめてファイル化（変数も使える）

シンプルにinclude（ejsファイルに変数がない場合）

<%- include('parts/_header.ejs'); %>

読み込むEJSファイルに変数を渡す（ejsファイルに変数がある場合）

<%
  const varmeta = {
    title: 'ページのタイトル',
    desc: 'ディスクリプションの内容'
  };
%>
<%- include('parts/_header.ejs', {meta: varmeta}) %>

JSONのデータを変数としてEJSファイルに渡す

JSONの記事のサンプルデータでarea1（北海道在住メンバー）の情報のみ流し込む場合

<% const pgdata = pageData['curry-lover-east']; %>
<% memberdata = pgdata.area1; %>
<%- include('parts/_personal_data.ejs', {'memberdata': memberdata, 'imgpath': pgdata.linkimgpath}); %>

自動データ流し込み

商品リストなど内容をExcel→CSV→JSON化して自動的にデータを流し込み、htmlを生成
JSONの作り方の記事

参考にさせていただいたサイト

公式

公式サイト