npm-scriptsでEJSをhtmlにコンパイルする方法

EJSというテンプレートエンジンを使用して、.ejsファイルを.htmlにコンパイルする方法について解説します。

近年のWeb制作ではSSG（Static Site Generators）と呼ばれる、PHPなどのサーバーに依存しない静的サイトが注目されています。
サーバーに依存しないことにより、読み込み速度が高速化し、パフォーマンスが向上します。
また、サーバーサイドの処理が不要なため、セキュリティの強化に繋がったりと多くのメリットがあります。

特にEJSはシンプルで直感的に使用でき、学習コストが少ないため、多くの開発者に幅広く利用されています。
以上の理由で最近ではPHPの代わりにEJSなどのテンプレートエンジンを使用して、共通パーツ（例: ヘッダー、フッター）を管理することが増えてきています。

本記事では、npm-scriptsを使用してEJSをHTMLにコンパイルする方法について説明します。

なお、この記事ではNode.jsおよびnpmがインストールされており、npm-scriptsの基本的な知識があることを前提として進めます。

Node.jsのバージョン管理ツール「Volta」のインストール・導入方法・使い方を解説

【初心者】npm-scriptsの使い方、web製作・webデザイナー・コーダー向けに1番分かりやすく解説

INDEX

ejsとは

EJS公式

EJSとは、Embedded JavaScriptの略で、JavaScriptベースのテンプレートエンジンの1つです。テンプレートエンジンは、動的なウェブページを生成するために使用されます。

EJSを使用すると、HTML内で変数、条件分岐、ループなどのJavaScriptコードを埋め込むことができます。
これにより、開発中はPHPのように動的にWebサイトを作成し、最終的に処理スピードが速くセキュリティリスクの少ない静的なHTMLページを簡単に生成することができます。

プロジェクトフォルダを作成

それでは早速使い方の説明です。
今回のサンプルは以下のディレクトリとファイルを進めていきますので、それぞれ適当なファイルの準備してください。

htdocs
└ejs/
  └index.ejs
└dist/
  └index.html（ejsから自動生成）
└package.json（後で作成）

コマンドでディレクトリを作成する場合は以下の手順で行なってください。

VScodeなどのエディターに任意のディレクトリを開き、ターミナルを起動します。
その後下記のコマンドでフォルダの作成、カレントディレクトリの移動を行います。

mkdir htdocs
cd htdocs

プロジェクトフォルダに移動したら以下のコマンドでpackage.jsonを作成します。

npm init -y

EJSをコンパイル

それではEJSをHTMLにコンパイルしてみましょう。

ejs-cliをインストール

まず最初に以下のコマンドでEJSをHTMLにコンパイルするためのejs-cliパッケージをインストールします。

npm i -D ejs-cli

ejs-cli公式

npm-scriptsの設定

package.jsonのscriptsフィールドにejsフォルダにあるindex.ejsをdistフォルダにコンパイルするスクリプトを追加します。

"scripts": {
  "ejs": "ejs-cli -b ejs/ \"index.ejs\" -o dist/"
}

\" \"はエスケープ処理です。
Windowsではシングルクォーテーションを使用することができない為、シングルクォーテーションをダブルクォーテーションに置き換えエスケープ処理を行う必要があります。

ejs-cliの主なオプションは以下になります。

オプション	概要
`-b, --base-dir`	参照するベースディレクトリ（`.ejs`ファイルのルートディレクトリを設定します）上記のようにルートディレクトリを指定した後に`" "`で対象のフォルダを指定します
`-e, --exclude`	除外するファイル/ディレクトリ名（headerなどのパーツとして使うインクルードファイルを指定します）
`-o, --out`	コンパイル先のディレクトリ（ベースディレクトリで設定した`.ejs`ファイルを`.html`ファイルとしてコンパイルされます）

その他のオプションについては公式から確認してください。
ejs-cli公式

EJSをHTMLにコンパイル

それでは実際にEJSファイルをHTMLファイルにコンパイルしてみましょう。
index.ejsファイルに任意のコードを追加してから、以下のコマンドでdistフォルダにejsフォルダと同じコードが記載されたindex.htmlファイルが作成されたら成功です。

npm run ejs

headerをインクルード化

次にEJSを使う大きなメリットであるheaderなどの共通パーツのインクルード化を行いましょう。

インクルードファイルの作成

以下のディレクトリ構造になるように_header.ejsファイルを作成し、index.ejsの<body>開始タグから上のコードを_header.ejsに移行します。

htdocs
└ejs/
  └index.ejs
  └includes/
    └_header.ejs/（★新規追加）
└dist/
  └index.html（ejsから自動生成）
└package.json

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

ejsファイルにインクルードのコードを追加

以下のようにEJSのincludeを使い、インクルードさせるファイルまでのパスを指定します。

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

<h1>インクルード成功</h1>
</body>

</html>

ターミナルでnpm run ejsを実行してコンパイルされているか確認しましょう。

複数の`.ejs`ファイルをコンパイル対象に設定する

実際のWeb制作ではページが複数あるサイトが一般的です。
次にディレクトリを跨いだ複数の.ejsファイルをコンパイル対象に設定する方法を説明します。

新しい階層の`.ejs`ファイルを作成

今回は例としてejsフォルダにaboutフォルダを作成し、その中にaboutのindex.ejsファイルを作成してみました。

htdocs
└ejs/
  └index.ejs
  └about/
    └index.ejs 
  └includes/
    └_header.ejs/（★新規追加）
└dist/
  └index.html（ejsから自動生成）
└package.json

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

<h1>about</h1>
</body>

</html>

EJSでは相対パスを使用することが一般的なので_header.ejsのパスも一階層上に変更します。

コンパイル元の`.ejs`を複数ファイル指定に変更

現在のscritpsはejsフォルダ直下のindex.ejsファイルのみをコンパイル対象としています。
以下のように**/*.ejsと指定して一つのコマンドで複数ファイルを設定します。

"scripts": {
  "ejs": "ejs-cli -b ejs/ \"**/*.ejs\" -o dist/"
}

ターミナルでnpm run ejsを実行してコンパイルされているか確認しましょう。

すると今回はaboutディレクトリと一緒にincludesディレクトリも作成されてしいます。
includesフォルダは公開時には使用しないため、コンパイルする際にはコンパイル対象から除外する設定を行う必要があります。

コンパイルする際に必要のないディレクトリを除外する

コンパイルから除外するディレクトリを指定するには-eオプションでincludesフォルダを指定します。

"scripts": {
  "ejs": "ejs-cli -b ejs/ \"**/*.ejs\" -e \"includes\" -o dist/"
}

distフォルダを削除し、再度ターミナルでnpm run ejsを実行しましょう。
includesフォルダがdistフォルダ内にコンパイルされずに、他のindex.htmlファイルが生成されていたら成功です。

ファイルを保存したら自動でコンパイルさせる

最後にファイルを保存したら自動でコンパイルする処理を作成しましょう。
現在のscriptsでは.htmlファイルにコンパイルするには毎回コマンドを実行しなくてはならない為、効率的ではありません。

しかし、ejs-cliには監視のオプションがない為、別のパッケージを利用してファイルの監視を行います。
監視を行うパッケージはいくつかありますが今回はchokidarという監視用のパッケージを利用します。

以下のコマンドでchokidarをコマンドラインで実行するchokidar-cliをインストールしてください。
chokidar-cli公式

npm i -D chokidar-cli

監視処理をscriptsに登録する

以下のdev:ejs部分が追加したscriptsです。

chokidarの次に監視するディレクトリを設定し、-cオプションで変更があった際に実行するscriptsを登録しています。
さらに、コマンド実行時にも-cで設定したコマンドを実行する--initialオプションを追加しています。

"scripts": {
  "ejs": "ejs-cli -b ejs/ \"**/*.ejs\" -e \"includes\" -o dist/",
  "dev:ejs": "chokidar \"ejs/\" -c \"npm run ejs\" --initial"
}

devはdevelopmentの略で開発用のコマンドという目印でよく使われます。

オプション	概要
`-c, --command`	変更のたびに実行するコマンド
`--initial`	コマンド実行した際に`-c`で設定したコマンドを最初に 1 回実行する

chokidar-cli公式

それでは以下のコマンドを実行して確認してみましょう。
.ejsファイルが保存されたら.htmlファイルに自動でコンパイルされていれば成功です。