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

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

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

EJS — Embedded JavaScript templates

ejs.co

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

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

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

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

前提条件

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

dest（コンパイル先）

css

src（ソース）

ejs

components

_header.ejs

_footer.ejs

sass

style.scss

script.js

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

package.json

EJS CLI で JSON を読み込む

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

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 も面白いです。ぜひお試しください。

オレインデザイン