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