ejs-cliでJSONを読み込み、複数ページのメタ情報を一括管理

はじめに

現在、マークアップをしていくのにejsというテンプレートエンジンを使っています。
今回はJSONファイルでデータを一括管理して、ejsファイルに渡す方法を備忘録としてまとめました。

経緯

WEBサイトだとメタタグを記入する必要があるのですが、ページ数が多いとそのページ数分ファイルを編集しないといけないので、ひとつのファイルにメタタグデータをまとめたいなぁと思ったのが、きっかけです。

実装

環境

Node.js: v14.17.0
npm: 6.14.13
ejs: ^3.1.6
ejs-cli: ^2.0.0

ディレクトリ構成

├── src
│   ├── views
│   │   ├──components
│   │   │  └── meta.ejs
│   │   └──pages
│   │      └── index.ejs
│   └── scss 
├── meta.json
└── package.json

今までのやり方

meta.ejs

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= title %></title>
<meta name="description" content="<%- description %>" />

<link rel="icon" href="../../assets/images/favicon/favicon.ico" />
<link rel="icon" type="image/png" href="../../assets/images/favicon/android-chrome-192x192.png" />

<link rel="apple-touch-icon" href="../../assets/images/favicon/apple-touch-icon.png" />

<meta property="og:title" content="<%= title %>" />
<meta property="og:type" content="website" />
<meta property="og:description" content="<%= description %>" />
<meta property="og:url" content="https://~~/<%= currentUrl %>" />
<meta property="og:image" content="https://~~/assets/images/og/ogp.png" />
<meta name="twitter:card" content="summary_large_image" />

<link rel="stylesheet" type="text/css" href="<%= baseUrl %>/css/style.css" />

index.ejs

<%- include('../components/meta', { 
  title: 'よくある質問ページ',
  description:'よくある質問ページです。', 
  currentUrl:'/', 
  baseUrl: '../assets' 
}); %>

1. meta.ejsでメタタグのひな型をつくる
2. メタタグを入れたい各ejsファイルにindex.ejsのような書き方でmeta.ejsをincludeする

ただ、これだと30ページあったら、30ページ分のejsファイルに上記記述をしなければいけない。。

修正ってなった時にも、ひとつのファイルで完結させたいし、同じ形式のデータだからひとつにまとめた方が見やすそう、ということでJSONファイルを使う方法をやってみました。

現在のやり方

meta.ejs

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= data.title %></title>
<meta name="description" content="<%- data.description %>" />

<link rel="icon" href="../../assets/images/favicon/favicon.ico" />
<link rel="icon" type="image/png" href="../../assets/images/favicon/android-chrome-192x192.png" />

<link rel="apple-touch-icon" href="../../assets/images/favicon/apple-touch-icon.png" />

<meta property="og:title" content="<%= data.title %>" />
<meta property="og:type" content="website" />
<meta property="og:description" content="<%= data.description %>" />
<meta property="og:url" content="https://~~/<%= data.currentUrl %>" />
<meta property="og:image" content="https://~~/assets/images/og/ogp.png" />
<meta name="twitter:card" content="summary_large_image" />

<link rel="stylesheet" type="text/css" href="<%= data.baseUrl %>/css/style.css" />

meta.json

{
  "data": {
    "meta": {
      "faq": {
        "title": "よくある質問ページ",
        "description": "よくある質問ページです。",
        "currentUrl": "/",
        "baseUrl": "../assets"
      },
      "faq2": {
        "title": "〇〇〇〇 | よくある質問ページ",
        "description": "よくある質問ページです。〇〇〇〇～",
        "currentUrl": "bbb.html",
        "baseUrl": "../assets"
      },
      "〇〇": {
        "以下略"
      },
    }
  }
}

index.ejs

<%- include ('../components/meta', {data: data.meta.faq}) %>

1. 今までと同様、meta.ejsでメタタグのひな型をつくる
2. meta.jsonファイルには各ページ分のメタタグデータを記述
3. index.ejsでmeta.ejsを使いたいので、includeしてきてオブジェクト値を渡す

これで修正があっても、1ファイルで完結できる！
ただJSONファイル作って書いただけじゃ、読みこんでくれない。

gulp使って読み込んでる記事はいっぱいあるけど、私の環境はgulp入れてないし、できれば今の環境でサクッと使いたい。。

ということで色々調べてたら、、あった。
https://www.npmjs.com/package/ejs-cli?activeTab=readme

npm-scriptsを使って環境を作っていたので、npmのパッケージであるejs-cliにオプションの記述を追加して、処理を行うことにしました。

package.jsonのscriptsに以下を記述。

package.json

"scripts": {
  "ejs:build": "ejs-cli --base-dir src/views/pages/ \"*.ejs\" --out public/ --options meta.json"
}

--base-dir src/views/pages/ \"*.ejs\"部分で、参照するディレクトリ（src/views/pages/）とコンパイルするファイル（拡張子が.ejsのファイル）を指定。

--out publicでpublicフォルダに出力。

末尾に --options meta.jsonを加えてJSONファイルも読み込むようにしました。
無事コンパイルでき、HTML作成までできました！

まとめ

小規模だとejsを使うと楽になるなぁと感じる点も多いので、他のoption機能がないか調べつつ効率的に作業できるやり方を探していきたいと思います。

最後まで読んでいただきありがとうございました。