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とか使って書いたほうが早い。
もっと有用な使い方はあると思うので色々発見していきたいです。