HTMLテンプレートエンジンの続きです。前回はPugでFizzBuzzってみました。今回はEJSでFizzBuzzる！Pugと同様Node.jsでトランスパイルできつつ、PugよりもHTMLの書式が残ったテンプレートエンジンです。それでは行きましょう！
【目次】
前回の記事はこちら
※参考：【HTML】PugでFizzBuzzる！（テンプレートエンジンの変数、for文、if文） - クモのようにコツコツと
前回のおさらい（PugでFizzBuzz）
前回、Pugで作ってみたFizzBuzz
See the Pen Pug practice 2 by イイダリョウ (@i_ryo) on CodePen.
pugのコード
- var title = 'Pugでフィズバズる'
- var count = 30
section
h1.red #{title}
p Pugで変数、for文、if文を使ってフィズってバズってみた。
ul
- for (var i = 1; i < count+1; i++)
if i % 3 == 0 && i % 5 == 0
li フィズってバズった！
else if i % 3 == 0
li フィズった！
else if i % 5 == 0
li バズった！
else
li #{i}
Pug上に変数、if文、for文を書いているのでJSファイルの記述は不要。
トランスパイルするとこんなHTMLになる。
<section> <h1 class="red">Pugでフィズバズる</h1> <p>Pugで変数、for文、if文を使ってフィズってバズってみた。</p> <ul> <li>1</li> <li>2</li> <li>フィズった！</li> <li>4</li> <li>バズった！</li> <li>フィズった！</li> <li>7</li> <li>8</li> <li>フィズった！</li> <li>バズった！</li> <li>11</li> <li>フィズった！</li> <li>13</li> <li>14</li> <li>フィズってバズった！</li> <li>16</li> <li>17</li> <li>フィズった！</li> <li>19</li> <li>バズった！</li> <li>フィズった！</li> <li>22</li> <li>23</li> <li>フィズった！</li> <li>バズった！</li> <li>26</li> <li>フィズった！</li> <li>28</li> <li>29</li> <li>フィズってバズった！</li> </ul> </section>
PugはNode.jsでトランスパイルできてメジャーなテンプレートエンジンですが、カッコがない、閉じタグがないなどHTMLの書式とは異なる（RubyやPythonに近い）。HTMLに慣れていると脳内変換が必要。
もう少しHTML書式に近いままで便利なロジックが使えるテンプレートエンジンはないか、と探したらいくつかあった。その中でもEJSがメジャーで良さそうに感じたのでやってみる！
EJSとは
EJSもPugと同様にNode.jsでコンパイルできるテンプレートエンジン。こちらに概要がわかりやすくまとまっていた。
※参考：EJSの使い方！静的なHTMLサイトで「共通パーツ」と「変数」を使おう | HPcode
ふむふむ。
- EJSはNode.jsのパッケージ
- 拡張子は.ejs
- ヘッダーなど共通パーツを別ファイルにして読み込める
- Gulpなどで.htmlファイルにトランスパイルする
環境構築やトランスパイルは別の機会として、今回はEJSがどんな書式か理解してみる。
EJSでFizzBuzz
EJSの基本はこんな書式。（※2019/12/06：記述ミスがあったので修正）
<h1><% //JSコード %></h1>
<%と%>で囲まれた中にJSのコードを書く。なんだかPHPに似ている書式！
※参考：PHPの基本を理解するためにJSと比較する - クモのようにコツコツと
こちらの記事にEJSの基本的な書式が網羅されていた！
※参考：テンプレートエンジンEJSで使える便利な構文まとめ - Qiita
上記のFizzBuzzコードをEJSで書いてみるとこうなる。
<% var h1Title = 'EJSでフィズバズる'; %> <% var count = 30; %> <section> <h1 class="red"><% h1Title %></h1> <p>EJSで変数、for文、if文を使ってフィズってバズってみた。</p> <ul> <% for (var i = 1; i < count+1; i++) { %> <% if (i % 3 == 0 && i % 5 == 0) { %> <li>フィズってバズった！</li> <% } else if (i % 3 == 0) { %> <li>フィズった！</li> <% } else if (i % 5 == 0) { %> <li>バズった！</li> <% } else { %> <li><%= i %></li> <% } %> <% } %> </ul> </section>
こっちの方がPugより読みやすい！（閉じタグなど、記述量は増えるけど…）
なお、CodePenはEJSに対応していないため、ローカルにGulpなどの環境構築をしないと実際にどうなるかは検証できない。しかし、正しくトランスパイルされればこうなるはず！
<section> <h1 class="red">EJSでフィズバズる</h1> <p>EJSで変数、for文、if文を使ってフィズってバズってみた。</p> <ul> <li>1</li> <li>2</li> <li>フィズった！</li> <li>4</li> <li>バズった！</li> <li>フィズった！</li> <li>7</li> <li>8</li> <li>フィズった！</li> <li>バズった！</li> <li>11</li> <li>フィズった！</li> <li>13</li> <li>14</li> <li>フィズってバズった！</li> <li>16</li> <li>17</li> <li>フィズった！</li> <li>19</li> <li>バズった！</li> <li>フィズった！</li> <li>22</li> <li>23</li> <li>フィズった！</li> <li>バズった！</li> <li>26</li> <li>フィズった！</li> <li>28</li> <li>29</li> <li>フィズってバズった！</li> </ul> </section>
Handlebars.jsは今回は保留…
もう一つNode.jsでトランスパイルできる「Handlebars.js」というのも挑戦するつもりだったが、今回は保留した。
※参考：Handlebars
公式サイトを見ていただければわかるようにEJSでいう<% %>の部分がHandlebarsはマスタッシュ（口髭）{{ }}でVue.jsに似ているのが魅力に感じていた。
しかし、FizzBuzzろうとしたらif文の条件の書き方が一手間必要だった。外部ファイルでhelper関数を設定する。
あと、マスタッシュ{{ }}が同じということはVue.jsとHandlebars.jsを共存させたい場合、デミリタ処理が必要そう。二重角カッコ[[ ]]に置き換えたり。
※参考：Vue.js と handlebars を併用するときのデリミタ変更 - Qiita
デミリタとは区切り文字のこと。
※参考：https://wa3.i-3-i.info/word11621.html
と、いくつかの課題が見えた時点で、今回は保留にした。
最後に
EJSはHTMLの書式に追記する形で、とても読みやすいです！CSSでいうSCSS、JSでいうTypeScriptのような印象を受けました。EJSでできることはVue.jsなどのJSフレームワークでもできそうですが、JSフレームワークを導入するまでもないサイトを作るときに有効になるのでは、と思います。
また、HTMLタグがそのまま生かせるので既存のサイトをテンプレート化するにも有効と思います！PugなどはHTMLタグをゼロから書き換えることになりますからね。
テンプレートエンジン、AltCSS、AltJSなどの書式はある程度わかったので、次はいよいよ環境構築→トランスパイルかな、と思います。それではまた！
※参考：HTMLテンプレートエンジン、AltCSS、AltJSのまとめ
qiita.com
