EJSで出力したHTMLに変な空白ができるのを解決

EJSは静的コーディングをパーツ分割できる超便利な仕組みです。

EJSを使ってて最近ぶつかった疑問。
HTMLに出力した時になんか変な空白改行ができてる。
↓こんな感じ。

<ul class=”sidebar-menu__list”>

<li class=”sidebar-menu__item”>

<a href=”#” class=”sidebar-menu__link”></a>

</li>

<li class=”sidebar-menu__item”>

<a href=”#” class=”sidebar-menu__link”>テスト</a>

</li>

<li class=”sidebar-menu__item active”>

<a href=”#” class=”sidebar-menu__link”>テスト</a>

</li>

</ul>

なんだこの改行は….!!
調べてみたら、EJSの書き方を変えたら解決できることがわかりました。

<% … %>じゃなくて、<%_ … _%> を使う。

ということでタイトルの通りですが、解決策はEJSの出力タグを<%= … %>じゃなくて、<%_ … _%> を使うことで解決できます。

まず通常のEJSのコード。

  <ul class="sidebar-menu__list">
  <% if (menuItems && menuItems.length > 0) { %> 
    <% menuItems.forEach(function(item) { %>
      <li class="sidebar-menu__item>
        <a href="#" class="sidebar-menu__link"><%= item %></a>
      </li>
    <% }) %> 
</ul>

<% if (menuItems && menuItems.length > 0) { %>
この部分の「<%」という書き方が、HTMLに出力する時に空白になってしまう。

なので解決策としては「<%」ではなくて「<%_」を使います。

<ul class="sidebar-menu__list">
    <%_ if (menuItems && menuItems.length > 0) { _%>
      <%_ menuItems.forEach(function(item) { _%>
        <li class="sidebar-menu__item>
          <a href="#" class="sidebar-menu__link"><%= item %></a>
        </li>
      <%_ }) _%>
  </ul>

こんな感じで、EJSの出力タグを変えることで最終的なHTMLに出る不要な空白改行が消えます。

まとめ

ということで今回は、EJSのHTMLに出力される不要な改行をなくす方法についてまとめました。

解決策は出力タグを<% … %>じゃなくて、<%_ … _%> を使う。ということです。

HTMLに変換する時に出力タグ部分が空白とみなされてしまうため生じていました。

ということで今回は以上です〜。

以下のXより質問受け付けてるので、
お気軽にご連絡ください！

Tweets by yuhi1321