最近、仕事でCMSの入っていないページ数の多いサイトに、GoogleAnalyticsタグをひたすら貼り付けていくという苦行を行うことになったので、試験的に「EJS」というテンプレートエンジンを使ってみました。
想像以上に使いやすく、ペラのHTML群を簡単にテンプレート化できたので、今回はEJSの導入から使い方まで紹介していきます。
そもそもEJSとは
世に多く出回るHTMLテンプレートエンジンの一つで、Jadeなんかは割とメジャーでしょうか。
JadeはHTMLの記述方法ががらりと変わるので、個人的には取っ付きづらいと思います。
対してEJSは記述はHTMLそのままで、既存のHTMLデータにEJSのコードを記述することで簡単にHTMLをテンプレート化することができ、変数設定、if文、for文などももちろん使うことができます。
実際のコードはこんな感じです。ぐっとコード量も減り、これで保守・運営もしやすくなりますね。
<% var page = "top" %> <% include common/_html_head %> <% include common/_header %> <% include common/_footer %>
EJS環境構築
今回もタスクランナーのGulpを使います。
作業効率UP タスクランナーGulp
Gulpについては上記リンクにて詳しく解説しています。
今回の作業ディレクトリ構造は以下のとおり
|-gulpfile.js |-package.json |-index.ejs |-commons/ |-_header.ejs |-dest/ |-index.html
まずは下記のコマンドを打って専用のモジュールをインストールします。
npm install gulp --save-dev npm install gulp-ejs --save-dev
GulpとEJSのモジュールが使えるようになりました。
続いて、gulpfile.jsに下記のコードを記述します。
/*************************************************** * module load ***************************************************/ var gulp = require("gulp"); var ejs = require('gulp-ejs'); /*************************************************** * path ***************************************************/ var root = "./"; var ejsSrcPath = root + "**/*.ejs"; var ejsDestPath = root + "dest/"; /*************************************************** * tasks ***************************************************/ gulp.task("ejs", function() { gulp.src( [ejsSrcPath,'!' + root + "**/_*.ejs"] ) .pipe(ejs()) .pipe(gulp.dest(ejsDestPath)) });
以上で環境構築は完了です。
EJSを使ってみる
それでは早速EJSを触ってみます。
以下のコードを記述したindex.ejsというファイルをルートディレクトリに作成してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>EJS Test</title> </head> <body> <header> <div id="header">Header</div> </header> <section> <h1>Head</h1> Contents </section> <footer> <div id="footer">Footer</div> </footer> </body> </html>
次に先ほど作成したGulpのタスクを実行します。
コマンドで「gulp ejs」と叩いてください。
するとルートに「dest」というディレクトリが作成され、中にコンパイルされたindex.htmlが作成されていれば成功です。
※この時点でファイルが作成されていないようでしたらgulpfile.jsのどこかに記述ミスがあります
EJS応用編
ここまで出来ればあとはお好みに合わせてテンプレート化していきます。
テンプレート保管用のディレクトリ「common」を作成し、「_header.ejs」というファイルを作成し、先ほど用意した「index.ejs」からヘッダー部分のコードをコピーし、下記のとおり書き換えます。
「varTest」という変数の値を出力させています。
変数を出力させる場合は「<%= %>」と、イコールをつけてタグを記述します。
<header> <div id="header"><%= varTest %></div> </header>
作成した「_header.ejs」をインクルードするため、「index.ejs」を下記のとおり書き換えます。
テンプレートで変数を使用しているため、インクルード前に変数に値をセットしておきます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>EJS Test</title> </head> <body> <% var varTest = "Header" %> <% include common/_header %> <section> <h1>Head</h1> Contents </section> <footer> <div id="footer">Footer</div> </footer> </body> </html>
コードが完成したら再びコマンドで「gulp ejs」を実行。
「dest」ディレクトリ内に出力された「index.html」をブラウザで表示させると、テンプレートで出力した変数「varTest = “Header”」が出力されていることが分かります。
今回は環境構築から基本の使用方法まで紹介しましたが、このほかif文、for文などまだまだ便利な使い方があるので、興味のある方は自分で研究してみてください。
※2019/5/28追記
Web関連の記事は今後こちらのブログに投稿していきます。