EJSを使ってみる

投稿日：2024.01.18

更新日：2024.05.10

EJSを使う機会があったので、簡単に準備手順をまとめます。

※Node.jsとnpmは入っていることを前提とします。

package.json作成とgulpのインストール

package.jsonを作成

ターミナル

npm init -y

ejs関連のパッケージのインストール

続いて、EJSのコンパイルに必要なnpmのパッケージをインストールします。

インストールするパッケージ

gulp
→タスクランナー
gulp-rename
→コンパイル時に拡張子を.ejsから.htmlに変える
gulp-ejs
→EJSのコンパイル
gulp-plumber
→エラーが出ても処理を停止しない
gulp-prettier
→HTMLを整形する

下記のコマンドでまとめてインストールできます。

ターミナル

npm i -D gulp gulp-rename gulp-ejs gulp-notify gulp-plumber gulp-prettier

以下のコマンドを実行してgulpが使える状態か確認してください。

ターミナル

gulp --version

command not found: gulpと出た場合は以下のコマンドを実行して再度確認してください。

ターミナル

npm i --global gulp-cli

テストファイルを作成する

gulpfile.jsにタスクを書く

下記のコードを貼りつけます。

gulpfile.js

const gulp = require("gulp")
const rename = require("gulp-rename")
const ejs = require("gulp-ejs")
const notify = require('gulp-notify')
const plumber = require('gulp-plumber')
const prettier = require('gulp-prettier')

//ファイル監視
const watchFiles = () => {
  watch('./src/ejs/**/*.ejs', series(ejsFunc))
}

const ejsFunc = (cb) => {
  return src(['./src/ejs/**/*.ejs', '!' + './src/ejs/**/_*.ejs'])
    .pipe(
      plumber({
        errorHandler: notify.onError('Error: <%= error.message %>'),
      }),
    )
    .pipe(ejs({}, { ext: '.html' }))
    .pipe(rename({ extname: '.html' }))
    .pipe(
      prettier({
        printWidth: 150,
        semi: true,
        singleQuote: true,
        trailingComma: 'all',
      }),
    )
    .pipe(dest('./'))
  cb()
}

exports.default = series(ejsFunc, watchFiles)

ejsファイルを作成する

index.ejs、_header.ejs、_footer.ejsにコードを書きます。

src/ejs/index.ejs

<% let title = "トップページのタイトル" %>
<% let description = "トップページの説明" %>

<%- include('common/_header', { ttl: title }) %>

  <p>ページの本文</p>

<%- include('common/_footer')  %>

src/ejs/common/_header.ejs

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= ttl %></title>
</head>
<body>

src/ejs/common/_footer.ejs

</body>
</html>

コンパイルしてみる

gulpfile.jsには2つのタスクが書かれています。

1度だけコンパイル

ターミナル

gulp ejs

ファイルを監視してコンパイル

ターミナル

gulp watch

出力されたhtmlを見てみる

前述のgulpfile.jsをそのまま貼り付けた場合、ルートディレクトリ直下にindex.htmlが生成されていると思うのでその中身を確認してみます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>トップページのタイトル</title>
</head>
<body>
  <p>ページの本文</p>
</body>
</html>

jsonを使用する場合の追加対応

gulpfile.js

const gulp = require("gulp")
const rename = require("gulp-rename")
const ejs = require("gulp-ejs")
const notify = require('gulp-notify')
const plumber = require('gulp-plumber')
const prettier = require('gulp-prettier')
const fs = require('fs')

//ファイル監視
const watchFiles = () => {
  watch(['./src/ejs/**/*.{ejs,json}'], series(ejsFunc))
}

const ejsFunc = (cb) => {
	const jsonData = JSON.parse(fs.readFileSync('./src/ejs/json/data.json'))
  return src(['./src/ejs/**/*.ejs', '!' + './src/ejs/**/_*.ejs'])
    .pipe(
      plumber({
        errorHandler: notify.onError('Error: <%= error.message %>'),
      }),
    )
    .pipe(ejs({ jsonData: jsonData }, { ext: '.html' }))
    .pipe(rename({ extname: '.html' }))
    .pipe(
      prettier({
        printWidth: 150,
        semi: true,
        singleQuote: true,
        trailingComma: 'all',
      }),
    )
    .pipe(dest('./'))
  cb()
}

exports.default = series(ejsFunc, watchFiles)

src/ejs/json/data.json

{

}

まとめ

HTMLを効率よく書きたいときにEJSや他のテンプレートエンジンを使ってみると良いですね。

参考・引用

EJS — Embedded JavaScript templates