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

投稿日:

最終更新日:

カテゴリー:

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

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

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

そして、よくあるのがページごとに 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のコンパイルにはこちらのパッケージを利用します。

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.ejsheader.** に対して、data.jsondata.header.index の中の値を適応させているといった感じでしょうか。

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

コーディングや
WordPress開発のリソースが足りない!

オレインデザインでは、デザインデータからの HTML コーディングから WordPress テーマ・プラグイン開発まで幅広くウェブ制作に対応しています。

お気軽にお問い合わせください。

WordPress 6.5.x 対応版を出版しました

WordPress デフォルトテーマ Twenty Twenty-Four を使って、シンプルなブログやポートフォリオサイト、そしてコーポレートサイトを作りながら、ブロックテーマやサイトエディターの基本を理解することができます。