---
title: "EJSでコーディングする際にページ情報などをJSONで管理する方法"
canonical_url: "https://olein-design.com/blog/ejs-with-json"
language: "ja"
date_published: "2022-02-15T09:00:16+09:00"
date_modified: "2022-02-15T09:00:16+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "備忘録"
  post_tag:
    - "EJS"
    - "HTML"
---

# EJSでコーディングする際にページ情報などをJSONで管理する方法

静的なHTMLなどをコーディングする際に、共通パーツなどを一元管理したいという場合も多いかと思います。

そういった場合に EJS（Embeded JavaScript） を採用するケースも少なくないかと思います。

[埋め込みコンテンツ](https://ejs.co/)

しかし、仮にヘッダー部分を共通パーツとして使い回したいという場合でも、ページによって若干テキストの内容が違っていたり、トップページと下層ページではサイトタイトル部分のマークアップタグが違ってきたりという場合があるかと思います。

そして、よくあるのがページごとに `title` タグや `meta.description` などを切り替えたいというケースでしょう。

そう言った場合に良しなに対応できないと、共通パーツとして使い回せなくなるので、せっかく EJS を採用していてもなかなか便利にならない使い方になってしまうということが起きます。

こういった場合には、今回ご紹介する JSON ファイルにページデータを持たせて、必要に応じて読み込むという方法を活用することで、見事に解決することができます。

## 前提条件

コンパイルは npm script で行います。また、ディレクトリ構造は以下のような形を想定しています。

**dest（コンパイル先）

 **css

 **js

  **src（ソース）

 **ejs

 **components

 **_header.ejs

 **_footer.ejs

   **sass

 **style.scss

  **js

 **script.js

   **data.json（データをまとめるJSON）

 **package.json

## EJS CLI で JSON を読み込む

EJSのコンパイルにはこちらのパッケージを利用します。

[埋め込みコンテンツ](https://www.npmjs.com/package/ejs-cli?activeTab=readme)

npm script はこのように書いてます。

```
ejs-cli -b src/ejs/ '/**/*.ejs' -e 'components/' -o dest/ -O data.json
```

意訳すると、ベースディレクトリは `src/ejs` で拡張子が `.ejs` のファイルを対象にして、`components` ディレクトリは対象外に。そして、 `dest/` を出力先にしてオプションで `data.json` を読み込むという感じですね。

## 雛形HTMLとJSON

雛形はこのようになります。

### data.json

```
{
  "data": {
    "header": {
      "index": {
        "title": "Pulvinar integer nunc inceptos eget lacus suscipit",
        "description": "Vel convallis luctus netus ultricies dictum magna"
      },
      "about": {
        "title": "about page dayo!",
        "description": "about description dayo"
      }
    }
  }
}
```

### index.ejs

```
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>EJS Test</title>
</head>

<body>
  <%- include ('components/_header', {header: data.header.index}) %>
  <p>index.ejsだよ</p>
</body>

</html>
```

### components/_header.ejs

```
<header>
    <h1><%- header.title %></h1>
    <p><%- header.description %></p>
</header>
```

## 大事なポイント

ここの読み込んでいる部分ですが、ここが全てです。

```
<%- include ('components/_header', {header: data.header.index}) %>
```

前半は `components/_header` を読み込んでいるのですが、その後にどんなデータをこのテンプレートに引っ張っていくかという部分を指定しています。

`components/_header.ejs` の `header.**` に対して、`data.json` の `data.header.index` の中の値を適応させているといった感じでしょうか。

## 〆

JSONファイルでのデータの持ち方によって、幅広い活用方法があると思います。また、もう少し記述を増やして分岐させたりすることで、より複雑なことも実現することができるので、なかなか EJS も面白いです。ぜひお試しください。