EJSで共通パーツを使用する方法

HTML EJS

EJSで共通パーツを使用する方法

EJS（Embedded JavaScript）は、テンプレートエンジンとして共通パーツ（パーシャル）を使用する機能があります。
以下の手順で共通パーツを使う方法を説明します。

1. 共通パーツファイルを作成

例えば、header.ejsというファイルを作成します。
ファイルには共通のヘッダー内容を記述します。

<!-- views/partials/header.ejs -->
<header>
  <h1>サイトタイトル</h1>
  <nav>
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/about">アバウト</a></li>
    </ul>
  </nav>
</header>

2. EJSテンプレートで共通パーツを呼び出す

EJSテンプレートファイルで共通パーツをインクルードします。<%- include('partials/header') %> というコードを使います。

<!-- views/index.ejs -->
<!DOCTYPE html>
<html>
<head>
  <title>ホームページ</title>
</head>
<body>
  <%- include('partials/header') %>
  <main>
    <h2>ウェルカム!</h2>
    <p>これはホームページです。</p>
  </main>
</body>
</html>