今回はサーバーサイドからフロントエンドまで扱える
Node.jsのテンプレートエンジン「EJS」で使いやすい便利な構文をまとめてみました。
header, footerをincludeしたり、ループ処理、配列、条件分岐など使えて便利ですよね。
普段は、WEB制作でEJSとgulp、Scssを組み合わせて使うことが多く、
glupでビルドしたことを想定しています。
目次
<% %>や<%= %>、<%- %>などの使い方
<% %>
このタグの中はJavaScriptと同じになります。この時点ではHTMLには出力されません。
値の保存が出来ます。
<% var Item = '値の保存をしてます'; %>
<%= %>
上は単体だけでは意味を成しませんが、中にある変数をエスケープを含めて展開することができます。
HTMLタグをそのまま出力したい場合は、後に記載するタグを参照してください！
EJS
<div><%= Item %></div>
HTML
値の保存をしてます<%- %>
中にある変数をエスケープなしで展開します。
<%=%>と間違いやすいので注意が必要です。
EJS
<% var Item = '<p>エスケープなしのつもりの文章</p>'; %>
<div><%= Item %></div>
<div><%- Item %></div>
HTML
<div><p>エスケープなしのつもりの文章</p></div>
<div><p>エスケープなしのつもりの文章</p></div>
<%# %>
EJS特有のコメントアウトの書き方です。
コメントはHTMLに出力されることはないので、EJS内でのみコメントが記載できて便利ですね。
EJS内での記述
<%# EJS Only Comment %>
<!-- HTML Only Comment -->
HTMLに吐き出された時
<!-- HTML Comment! -->
include()
第一引数：外部EJSファイルまでのパスを渡します。
基準は編集しているファイルからです。
includeするテンプレートは、
assets/inc/*に収めることが多いのでよく以下の使い方をしています。
第二引数：第一引数のEJSファイルに渡すパラメータを指定。
title, descriptionなど、_head.ejsに記載した
<%%>への値受け渡しに便利ですね。
<%- include('./assets/inc/_head',{common:commonData}); %>ループ処理
for
JavaScriptと同じですね。
WEB制作だと、CMS絡みのフロントを実装する際、よく使います！
<% for (var i = 0; i < 10; i++) { %>
<article>
<time>2020/05/0<%= i+1 %></time>
<p>このループは<%= i+1 %>回目の投稿です。</p>
</article>
<% } %>
while
お馴染みのwhile文です。
<% var counter = 1; %>
<% while (counter <= 10) { %>
<article>
<time>2020/05/0<%= counter %></time>
<p>このループは<%= counter %>回目の投稿です。</p>
</article>
<% counter++; %>
<% } %>
for…of文
テキストだけではなく、classの指定もできちゃいます。
<% var itemList = ['item01', 'item02', 'item03']; %>
<% for (var item of itemList) { %>
<p><%= item %></p>
<article class="<%= item %>">
<p>このループは<%= item %>回目の投稿です。</p>
</article>
<% } %>
条件分岐
if…else文
<% if (common.type === 'home') { %>
<title>世界一分かりやすいホームページ</title>
<% } else { %}
<title>下層ページのタイトル | 世界一分かりやすいホームページ</title>
<% } %>まとめ
EJSを使えば、これまでに重複して書いていた内容や、CMS絡みの「テストテストテスト」などを
楽してコードを書くことができます。
