EJS記法まとめ

<%= ~ %> 出力タグ(エスケープあり)

変数をエスケープして出力する。
変数に禁則文字(<や&など)を含む場合に自動的にエスケープされる。

<!-- 変数を定義 -->
<% const name = 'John' %>

<!-- 定義した変数を出力 -->
<p>Hello, <%= name %>.</p>
<p>Hello, <%= 'Mr. ' + name %>.</p>

<!-- 出力結果 -->
<p>Hello, John.</p>
<p>Hello, Mr. John.</p>

<%- ~ %> 出力タグ(エスケープなし)

変数をエスケープせずに出力する。(利用時はXSS攻撃に配慮すること)

<!-- 変数を定義 -->
<% const myHtml = '<strong>Timothy</strong>' %>
<% const myMaliciousHtml = '</p><script>document.write()</script><p>' %>

<!-- 定義した変数を出力(エスケープなし) -->
<p>Hello, <%- myHtml %>.</p>
<p>Hello, <%- myMaliciousHtml %>.</p>

<!-- 定義した変数を出力(エスケープあり) -->
<p>Hello, <%= myHtml %>.</p>
<p>Hello, <%= myMaliciousHtml %>.</p>

<!-- 出力結果 -->
<p>Hello, <strong>Timothy</strong>.</p>
<p>Hello, </p><script>document.write()</script><p>.</p>

<p>Hello, &lt;strong&gt;Timothy&lt;/strong&gt;.</p>
<p>Hello, &lt;/p&gt;&lt;script&gt;document.write()&lt;/script&gt;&lt;p&gt;.</p>

<%# ~ %> コメントタグ

HTMLに出力されたり、実行されたりしないコメントの記載に利用する。
終了タグを後述する改行削除タグ -%> にすることでコメント行の不要な改行を除去できる。

<div>
<%# comment %>
</div>

<div>
<%# comment -%>
</div>

<!-- 出力結果 -->
<div>

</div>

<div>
</div>

<% ~ %> スクリプトレットタグ

このタグ内ではJavaScript構文を用いてロジックを埋め込むことができる。

波括弧{}

スクリプトレットのみの場合は{}を使わなくても良いが、
EJSテンプレートと混在する場合は基本的に{}を省略しないほうが良いとのこと。

<!-- 良くない例({}がない) -->
<% if (true) %>
  <p>Yay it's true!</p>

<!-- 良い例({}で囲っている) -->
<% if (true) { %>
  <p>Yay it's true!</p>
<% } %>

<!-- こちらも正常に動作する例 -->
<% let output,
       exclamation = '',
       shouldOutput = false;

   if (true)
     output = 'true!';

   if (true) {
     exclamation = 'Yay! ';
   }

   if (true) shouldOutput = true; %>

<% if (shouldOutput) { %>
	<!-- EJSテンプレートと混在するため、{}で囲っている -->
  <p><%= exclamation + 'It\'s ' + output %></p>
<% } %>

<!-- 出力結果 -->
<p>Yay it's true!</p>

<p>Yay it's true!</p>

<p>Yay! It&#39;s true!</p>

タグ内の改行

EJSとJSのスクリプトレットを混在させる場合を除き、
<% ~ %>タグ内に完全なステートメントとして記載すること。

<!-- OK例 -->
<% const stringToShow = booleanVariable
                      ? 'OK'
                      : 'not OK' %>

<!-- NG例(ビルドエラーが起こる) -->
<% const stringToShow = booleanVariable %>
<%                  ? 'OK'              %>
<%                  : 'not OK'          %>

セミコロン

Javascript同様、適切な改行がなされていればセミコロンはなくても動作する。

空白と改行

スクリプトレットを使用すると出力結果に無駄な空白が発生することがある。
これを防ぐには、開始タグに<%_を使い空白を削除し、終了タグに-%>を使い改行を削除する。
それぞれ<%_はこのタグ前の空白を削除し、-%>はスクリプトレットやコメントによって生まれる余分な改行を削除する。(出力タグには効果なし)

<!-- 削除なし -->
<ul>
  <% for (let i = 0; i < 3; i++) { %>
  <li><%= i %></li>
  <% } %>
</ul>

<!-- 削除あり -->
<ul>
  <%_ for (let i = 0; i < 3; i++) { -%>
  <li><%= i %></li>
  <%_ } -%>
</ul>

<!-- 出力結果 -->

<!-- 削除なし -->
<ul>
  
  <li>0</li>
  
  <li>1</li>
  
  <li>2</li>
  
</ul>

<!-- 削除あり -->
<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ul>

---

参考