EJSで使いやすい構文まとめ

今回はサーバーサイドからフロントエンドまで扱える
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>&lt;p&gt;エスケープなしのつもりの文章&lt;/p&gt;</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絡みの「テストテストテスト」などを
楽してコードを書くことができます。