クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

【HTML】テンプレートエンジンEJSでFizzBuzzる!(Pugとの比較あり)

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の基本はこんな書式。

<h1><%  //JSコード %></h1>

<%%>で囲まれた中にJSのコードを書く。なんだかPHPに似ている書式!

※参考:PHPの基本を理解するためにJSと比較する - クモのようにコツコツと

こちらの記事にEJSの基本的な書式が網羅されていた!

※参考:テンプレートエンジンEJSで使える便利な構文まとめ - Qiita

上記のFizzBuzzコードをEJSで書いてみるとこうなる。

<% var title = 'EJSでフィズバズる'; %>
<% var count = 30; %>

<section>
  <h1 class="red"><% title %></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.js: Minimal Templating on Steroids

公式サイトを見ていただければわかるようにEJSでいう<% %>の部分がHandlebarsはマスタッシュ(口髭){{ }}でVue.jsに似ているのが魅力に感じていた。

しかし、FizzBuzzろうとしたらif文の条件の書き方が一手間必要だった。外部ファイルでhelper関数を設定する。

※参考:Handlebarsことはじめ - Qiita

あと、マスタッシュ{{ }}が同じということは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フレームワークを導入するまでもないサイトを作るときに有効になるのでは、と思います。

テンプレートエンジン、AltCSS、AltJSなどの書式はある程度わかったので、次はいよいよ環境構築→トランスパイルかな、と思います。それではまた!


※参考:HTMLテンプレートエンジン、AltCSS、AltJSのまとめ
qiita.com