くまだどうも、くまだです。
EJSでfor文を使って要素ごとに情報を出しわけるときのメモ。
過去にEJSの記事は、タイトルの出しわけを書いています。
EJSのメリットや感想。
なお、CSSを楽に書ける「Sass」については下記の記事をご覧ください。（Dart-Sass対応）
EJSのfor文で要素ごとに情報を出しわける
例えば、カード型アイテムの配置で、アイテムごとに内容を出しわけたい場合は、下記のようになります。(CSSは省略）
<div class="p-cards">
<%
const cards = [
{ title: "タイトル1", text:"テキスト1の文章", img: "dummy.png" },
{ title: "タイトル2", text:"テキスト2の文章テキスト2の文章", img: "dummy2.jpg" },
{ title: "タイトル3", text:"テキスト3の文章", img: "dummy3.jpg" },
];
%>
<% for (let i = 0; i < cards.length; i++) {
const card = cards[i];
%>
<div class="p-card">
<div class="p-card__img">
<img src="images/<%= card.img %>" alt="">
</div>
<p class="p-card__title"><%= card.title %></p>
<p class="p-card__text"><%= card.text %></p>
</div>
<% } %>
</div>
要素ごとに情報を出しわけたい部分（テキストやタイトル、画像など）を変数で<%= card.title %>のような感じで記述します。（変数名は任意、<%= %>はEJSの記法です）
出しわけたい情報は、配列にして格納します。
<%
const cards = [
{ title: "タイトル1", text:"テキスト1の文章", img: "dummy.png" },
{ title: "タイトル2", text:"テキスト2の文章テキスト2の文章", img: "dummy2.jpg" },
{ title: "タイトル3", text:"テキスト3の文章", img: "dummy3.jpg" },
];
%>カード部分をfor文で回します。
<% for (let i = 0; i < cards.length; i++) {
const card = cards[i];
%>
<div class="p-card">
<div class="p-card__img">
<img src="images/<%= card.img %>" alt="">
</div>
<p class="p-card__title"><%= card.title %></p>
<p class="p-card__text"><%= card.text %></p>
</div>
<% } %>cards.lengthで配列の長さ未満（配列の数ぶん）の場合ループを実行。配列cardsの中の変数titleやimgなどの情報を変数cardを使ってアクセスしています。
なお、同じことをforEach文でやると下記の記述になります。
<%
const cards = [
{ title: "タイトル1", text:"テキスト1の文章", img: "dummy.png" },
{ title: "タイトル2", text:"テキスト2の文章テキスト2の文章", img: "dummy2.jpg" },
{ title: "タイトル3", text:"テキスト3の文章", img: "dummy3.jpg" },
];
%>
<% cards.forEach(function(card) { %>
<div class="p-card">
<div class="p-card__img">
<img src="images/<%= card.img %>" alt="">
</div>
<p class="p-card__title"><%= card.title %></p>
<p class="p-card__text"><%= card.text %></p>
</div>
<% }); %>表示するアイテムを増やしたり減らしたい場合は、
const cardsの中の配列を増やしたり減らしたりすれば、カードもそれに合わせて増減します。
ここまで読んでくださりありがとうございました。