EJSで使いたい!for文など繰り返し処理の書き方

今回はEJSでfor文などの繰り返し処理の書き方について紹介します。

 

for

繰り返し処理といったら定番のforです。

条件に合致する限り繰り返し処理を行います。

HTMLのクラスに連番を振ったり、テキストも連番にすることができます。

ejs

<ul>
  <% for (var i = 0; i < 5; i++) { %>
  <li class="item<%= i+1 %>"><%= i+1 %>つ目の要素です</li>
  <% } %>
</ul>

 

HTML

<ul>
  <li class="item1">1つ目の要素です</li>
  <li class="item2">2つ目の要素です</li>
  <li class="item3">3つ目の要素です</li>
  <li class="item4">4つ目の要素です</li>
  <li class="item5">5つ目の要素です</li>
</ul>

 

while

whileも要領はforと同じですね。条件に合致する限り繰り返し処理を行います。

特定の範囲のタグをまとめて出力するときはforよりわかりやすい気がします。

ejs

<ul>
  <% var count = 1; %>
  <% while (count <= 10) { %>
    <li class="loop<%= count %>"><%= count %>回目の処理です。</li>
    <% count++; %>
  <% } %>
</ul>

 

HTML

<ul>  
    <li class="loop1">1回目の処理です。</li>
    <li class="loop2">2回目の処理です。</li>    
    <li class="loop3">3回目の処理です。</li>
    <li class="loop4">4回目の処理です。</li>
    <li class="loop5">5回目の処理です。</li>
    <li class="loop6">6回目の処理です。</li>  
    <li class="loop7">7回目の処理です。</li>
    <li class="loop8">8回目の処理です。</li>
    <li class="loop9">9回目の処理です。</li>
    <li class="loop10">10回目の処理です。</li>
</ul>

 

forEach

forEachは変数に配列を格納してHTMLに出力します。

ejs

<ul>
  <% const array = ['ハンバーガー', 'カレー', 'パスタ', 'ラーメン', 'チャーハン']; %>
  <% array.forEach(function (value) { %>
  <li><%= value %></li>
  <% }); %>
</ul>

 

HTML

<ul>
  <li>ハンバーガー</li>
  <li>カレー</li>
  <li>パスタ</li>
  <li>ラーメン</li>
  <li>チャーハン</li>
</ul>

 

まとめ

ejsの繰り返し処理について紹介しました。

うまく使えばHTMLを爆速でコーディングできるので、ぜひ使い倒しましょう。