EJS触ってみた

今回たまたま参加した案件で使っていたので、色々と調べつつ書いてみた。

EJSとは？

What is the "E" for? "Embedded?" Could be. How about "Effective," "Elegant," or just "Easy"? EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It's just plain JavaScript.

google翻訳で見ると

「E」とは何ですか？"埋め込み？" になり得る。「効果的」、「エレガント」、または「簡単」はどうですか？EJSは単純なテンプレート言語であり、プレーンJavaScriptを使用してHTMLマークアップを生成できます。物事を整理する方法についての宗教性はありません。反復および制御フローの再発明はありません。それは単なるJavaScriptです。

おそらく
EJSとはテンプレート言語でJavaScriptを使ってhtmlを生成できるらしい。

実際に書いてみた例

ページごとに変数を入れ、固定パーツを作成

配列を変数metadataに入れそれを各パーツに渡して行く。
例）大本のテンプレート

<% var metadata = {days:'2019/xx/xx', category:'カテゴリー', title:'タイトル'}; %>
<%- include('days', {data:metadata}); %>
<%- include('category', {data:metadata}); %>
<%- include('title', {data:metadata}); %>

例）呼び出しているパーツの中身

<h1><%- data.title %></h1>

それで出力されるのが

<h1>タイトル</h1>

こんな感じで、変数を渡しパーツを生成することができる、しかも配列にできるので一気に値を設定でき楽ちん！

forとifで階層があるリストを作成

リスト
- リスト
- リスト
- リスト
リスト
リスト

上記リストをejsパーツ化してみた。

まず変数定義

<% var list = ['リスト1','リスト2','リスト3','リスト4']; %>
<!-- 何個目に下層リストを入れるか（index番号） -->
<% var child = ['0','2']; %>
<% var childarr = [['リスト1の小リスト1','リスト1の小リスト2','リスト1の小リスト3'],['リスト3の小リスト1','リスト3の小リスト2']]; %>

パーツを呼び出し

<%- include('list', {li:list, child:child, childarr:childarr}); %>

パーツで変数を展開

<ul>
  <% for (var i = 0; i < li.length; i++) { %>
    <li><%- li[i] %>
    <% if ( child !=='') { %>
      <% for (var j = 0; j < child.length; j++) { %>
        <% if ( child[j] == i) { %>
          <ul>
            <% for (var q = 0; q < childarr[j].length; q++) { %>
              <li><%- childarr[j][q] %>
            <% } %>
          </ul>
        <% } %>
      <% } %>
    <% } %>
    </li>
  <% } %>
</ul>

すると

<ul>
  <li>リスト1
    <ul>
      <li>リスト1の小リスト1</li>
      <li>リスト1の小リスト2</li>
      <li>リスト1の小リスト3</li>
    </ul>
  </li>
  <li>リスト2</li>
  <li>リスト3
    <ul>
      <li>リスト3の小リスト1</li>
      <li>リスト3の小リスト2</li>
    </ul>
  </li>
  <li>リスト4</li>
</ul>

と出力されます。

触ってみて

パーツベースの中から大規模案件でものすごい力を発揮しそう書くのが楽、設計段階をきっちりしなくてもある程度修正は聞くと思われる（変数の渡し方でどうにかなりそう）
逆にそのパーツ一回しか使わないもの、LPや個性的なページの案件ではpugとか使って書いたほうが早い。

もっと有用な使い方はあると思うので色々発見していきたいです。