EJSというテンプレートエンジンを使用して、.ejs
ファイルを.html
にコンパイルする方法について解説します。
近年のWeb制作ではSSG(Static Site Generators)と呼ばれる、PHPなどのサーバーに依存しない静的サイトが注目されています。
サーバーに依存しないことにより、読み込み速度が高速化し、パフォーマンスが向上します。
また、サーバーサイドの処理が不要なため、セキュリティの強化に繋がったりと多くのメリットがあります。
特にEJSはシンプルで直感的に使用でき、学習コストが少ないため、多くの開発者に幅広く利用されています。
以上の理由で最近ではPHPの代わりにEJSなどのテンプレートエンジンを使用して、共通パーツ(例: ヘッダー、フッター)を管理することが増えてきています。
本記事では、npm-scriptsを使用してEJSをHTMLにコンパイルする方法について説明します。
なお、この記事ではNode.jsおよびnpmがインストールされており、npm-scriptsの基本的な知識があることを前提として進めます。
INDEX
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
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 回実行する |
それでは以下のコマンドを実行して確認してみましょう。.ejs
ファイルが保存されたら.html
ファイルに自動でコンパイルされていれば成功です。
npm run dev:ejs
おわり
以上でEJSをHTMLにコンパイルする方法の解説になります。
プロジェクトによっては不要な箇所もあるかもしれませんので、それぞれカスタマイズをしてご自身のプロジェクトに活かしていいただけますと幸いです。