なぜEJSを使うとコーディングが楽しくなるのか② header共通化編

2024年12月20日2024年12月21日

静的コーディングが圧倒的に楽になる、EJS。
前回は、forEach文で同じ要素を繰り返す方法についてまとめました。

2回目の今回は、「header」の共通化についてまとめます。
headerを共通化できるだけでもかなりの時短につながります。

headerを毎回書くのはめんどくさい

仮に5ページくらいの静的コーディングをするとき。
全てのページにheaderとfooterを記述するのはマジでめんどくさいです。

1箇所修正しようとすると5ページ分修正をかけないといけないし、
コード量も多くなり混乱してしまいます。

HTMLでそのまま書く場合と、EJSで書く場合で比較します。

①HTMLでそのまま書く場合

<body>
  <!-- ヘッダー部分 -->
  <header class="header">
    <nav>
      <ul class="nav-list">
        <li><a href="/top">Top</a></li>
        <li><a href="/contact">Contact</a></li>
        <li><a href="/news">News</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <!-- メインコンテンツ -->
  <main>
    <h1>トップページへようこそ</h1>
    <p>ここにコンテンツを追加します。</p>
  </main>
</body>

上記の記述をページ数分繰り返し記述しないといけません。
今回はシンプルなヘッダーですが、ハンバーガーメニューなどがある場合100行近くになります。
これを全てのページで書くのは非常にめんどくさい….

②EJSを使う場合

・まずはheader.ejsというファイルを作り、その中にheaderのhtmlを書きます。
(wordpressみたいな感じ。)

header.ejs

<header class="header">
  <nav>
    <ul class="nav-list">
      <li><a href="/top">Top</a></li>
      <li><a href="/contact">Contact</a></li>
      <li><a href="/news">News</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

②header.ejsを各ページで呼び出す
次に各ページでheader.ejsを呼び出します。

<body>
  <!-- ヘッダーをインクルード -->
  <%- include('header.ejs') %>

  <!-- メインコンテンツ -->
  <main>
    <h1>トップページへようこそ</h1>
    <p>ここにコンテンツを追加します。</p>
  </main>
</body>

ポイントは、<%- include(‘header.ejs’) %> という部分。
この部分でheaderを呼び出せます。

例え100行を超えるheaderだろうと、
<%- include(‘header.ejs’) %>というたった1行書くだけでheaderを表現できます。

もしも修正が必要なときは、header.ejsを変えるだけで良いので効率的です。
1箇所だけの修正はミスも減るし、ファイルも短くなってコーディングも楽になります。