なぜEJSを使うとコーディングが楽しくなるのか① forEach編

2024年12月18日2024年12月21日

静的コーディングって大変ですよね。
特に長いページだと、HTMLの記述量が多くて混乱する。
コード量が多くなると修正漏れも出てきて地獄。

自分もずっと悩んでたのですが、EJSを使い始めてからそのストレスがかなり減りました。
EJSは、簡単にいうと静的コーディングの記述量を圧倒的に減らせる仕組みのこと。

理由はいくつかあるのだが、今日はその内のひとつ「forEach文」について紹介します！

forEachで記述量を3分の1にする

例えばこんな感じの繰り返しのカードがあったときの実装。

同じ形式のカードが6つ並んでいます。
これをHTMLで記述すると下記のコードになります。

<div class="card-container">
  <div class="card">
    <h3 class="card-title">カード1</h3>
    <p class="card-content">コンテンツ1</p>
  </div>
  <div class="card">
    <h3 class="card-title">カード2</h3>
    <p class="card-content">コンテンツ2</p>
  </div>
  <div class="card">
    <h3 class="card-title">カード3</h3>
    <p class="card-content">コンテンツ3</p>
  </div>
  <div class="card">
    <h3 class="card-title">カード4</h3>
    <p class="card-content">コンテンツ4</p>
  </div>
  <div class="card">
    <h3 class="card-title">カード5</h3>
    <p class="card-content">コンテンツ5</p>
  </div>
  <div class="card">
    <h3 class="card-title">カード6</h3>
    <p class="card-content">コンテンツ6</p>
  </div>
</div>

これ、めっちゃ面倒じゃないですか？？？
同じことを書いてるだけなのに30行近くもある。
仮に構造が変わって、追加で画像をつけてください。なんてことを言われるとその時点で投げ出したくなります。

一方でEJSのforEach文を使うとこうなります。

   <% const cards = [
      { title: "カード1", content: "コンテンツ1" },
      { title: "カード2", content: "コンテンツ2" },
      { title: "カード3", content: "コンテンツ3" },
      { title: "カード4", content: "コンテンツ4" },
      { title: "カード5", content: "コンテンツ5" },
      { title: "カード6", content: "コンテンツ6" }
    ]; %>
<body>
  <div class="card-container">
   <% cards.forEach(function(card) { %>
      <div class="card">
        <h3 class="card-title"><%= card.title %></h3>
        <p class="card-content"><%= card.content %></p>
      </div>
    <% }); %>
  </div>
</body>

シンプルでわかりやすいですね！
例えば新たに画像を追加したいという場合でも、コードを1箇所だけ変えれば大丈夫です。
どんな文言を書いてるかも冒頭1箇所でまとめてるので一目瞭然です。

ぱっと見のわかりやすさはミスの防止や時短につながります。
ストレス少なくコーディングできるとそれだけで、楽しくなります。

forEach文について解説

コードの解説をします。

まずforEach文とは、同じ記述をひとまとめに出力する方法のことです。

構造は「①情報の集合体(配列)」と「②forEach」の2つで構成されています。
順番に解説します。

①情報の集合体

   <% const cards = [
      { title: "カード1", content: "コンテンツ1" },
      { title: "カード2", content: "コンテンツ2" },
      { title: "カード3", content: "コンテンツ3" },
      { title: "カード4", content: "コンテンツ4" },
      { title: "カード5", content: "コンテンツ5" },
      { title: "カード6", content: "コンテンツ6" }
    ]; %>

・{}で囲まれた行を1行追加するごとに、カードが1つ増えます。
・変数(tilteなど)を追加すれば、自由に出力する文言も変えれます。
・先頭にある「cards」が、集合体の名前です。

今回は6行分あるので、6個のカードが出力されるイメージです。

上記の形式の集合体のことを、「配列」と呼びます。
※今回はcardsという名前にしたので、以下cards配列と呼びます。

②forEach文でコードを繰り返す。

次にforEach文で、上記で設定したcards配列を繰り返します。

<% cards.forEach(function(card) { %>
      <div class="card">
        <h3 class="card-title"><%= card.title %></h3>
        <p class="card-content"><%= card.content %></p>
      </div>
    <% }); %>

・forEachは、事前に設定した配列の中身を繰り返す表現です。
・cards配列は今回6行で設定したので、6回コードが繰り返されます。
・<%= card.title %>、<%= card.content %>という記述部分は、cards配列で設定した文言が出力されます。
なので繰り返すたびに違う文言を持つカードができるという仕組みです。

以上ここまででforEachの解説でした。