【EJS】if文でパーツを出しわける

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

EJSで、パーツをif文で出しわける。

EJSでif文でパーツを出しわける

例えば、_c-commonButton.ejsに以下の記述。

<% if (buttonType === "button") { %>
  <button class="c-commonButton <%= className %>">
    <%- buttonText %>
  </button>
<% } else if (buttonType === "link") { %>
  <a href="<%- linkUrl %>" class="c-commonButton <%= className %>">
    <%- buttonText %>
  </a>
<% } %>

これをindex.ejsで使うとして、以下のように記述。

<%- include('common/_c-commonButton.ejs', { className: "testClass-a", buttonText: "ボタンタグ", buttonType: "button", linkUrl: "" }); %>
<%- include('common/_c-commonButton.ejs', { className: "testClass-b", buttonText: "aタグ", buttonType: "link", linkUrl: "/" }); %>

これをbuildすると、出力されるHTMLは以下のようになります。

<button class="c-commonButton testClass-a">
  ボタンタグ
</button>
<a href="/" class="c-commonButton testClass-b">
    aタグ
</a>

例でボタンタグとaタグでやりましたが、パーツによっては要所要所で変えたい場合があるかもしれない（知らんけど）。

一応、こういう手法もあるなと思いました。

ここまで読んでくださりありがとうございました。

ejs

この記事を書いた人

くまだ

記事一覧