EJS 2020.04.02

EJSでテンプレートとデータでファイルを切り分けた開発を行う

前回記事「EJSでコンポーネントのインクルードや値の受け渡しなどを試してみる」で、コンポーネント間でデータを受け渡す方法についてまとめていました。ただ、取り扱うデータの量が多かったり、たくさんのページに影響する場合には、HTMLのテンプレート部分とデータが混在することになり、コードの見通しが悪くなってしまいます。今回はそのような場合に、テンプレートとデータを切り分けた開発の方法についてまとめてみたいと思います。

EJSでの制作のポイントはHTMLとデータの分離

EJSはHTMLとの親和性が高く、学習コストも低く手軽に導入できるのが魅力ですが、設計に注意しないとファイル数が多くなってきた場合に管理が大変になります。

特にデータ量が多い場合には、HTMLのテンプレート内に混在する形になりがちなので、EJSを使った開発では出来るだけテンプレートとデータを切り分けることがポイントになってきます。今回は「データ用のEJSファイルを用意する方法」「外部JSONファイルを用意する方法」の2パターンについて考えてみたいと思います。

データ用EJSファイルを用意してデータを読み込む

前回記事「EJSでコンポーネントのインクルードや値の受け渡しなどを試してみる」では、ページテンプレート内にデータを入れた方法で紹介していましたが、データ量が多い場合にはコードの見通しが悪くなるため、変数に入れたデータのみを書いたEJSファイルを用意し、ページテンプレートと分離させます。ここでは下記のようなファイル構成で説明しています。

index.ejs
  ┣ _data.ejs
  ┗ components
     ┗ _header.ejs

データ用のEJSファイルとして「_data.ejs」を作成しました。このファイルはHTMLとしてコンパイルしないのでパーシャル化させておきます。今回はよくあるケースとしてページのメタタグの値をデータとして変数で管理できるようにしています。データ用のEJSファイルの中身は下記のようになります。

【_data.ejs】

<%
 data = function() {
  return {
   pageMeta: {
    home: {
     title: 'トップページ',
     description: 'トップページの説明文です'
    },
    page1: {
     title: 'ページ1のタイトル',
     description: 'ページ1の説明文です'
    }
   }
  }
 };
%>

Javascriptの変数の形でデータを保持しておきますが、関数で出力できるようにしておきます。ページが複数に渡るのでオブジェクト型のデータ構造になり、ページのIDをキーとして、各ページごとのデータにアクセスできるようにしておきます。続いてページテンプレートのEJSファイルです。

【index.ejs】

<%- include('_globals'); %>
<%
 const siteData = data();
 const page = 'home';
%>
<%- 
 include(
  'components/_header',
  { meta: data.pageMeta[page] }
 ); 
%>
  <main>メインコンテンツ</main>
  <footer>フッターエリア</footer>
 </body>
</html>

ここではヘッダーのコンポーネントをインクルードしていますが、その前にデータ用のEJSファイルをインクルードしておきます。こうすることでページ内でデータ用のEJSファイル内にある情報を取得することができます。したがって、ページテンプレートの先頭で毎回データ自体をインクルードする形になります。

あとは、ヘッダー用のコンポーネントをインクルードする際に引数にデータを設定し、ヘッダーコンポーネントにデータを受け渡すようにします。ここでページごとにデータを判別する必要があるので、ページIDのキーを変数化しておくと便利です。

【components/_header.ejs】

<!doctype html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <meta name="description" content="<%= meta.description %>">
  <title><%= meta.title %></title>
 </head>
 <body>
  <header>ヘッダーエリア</header>

最後にヘッダーのコンポーネント側で受け取ったデータをHTML上に出力されるようにします。これでHTMLのテンプレートとデータを切り分けることができました。ただし、この時にデータがオブジェクト型になっているため、forEachで配列として値を展開する場合には、下記のようにObject.values()などで、オブジェクトから配列への変換が必要になるので注意です。

<%
 Object.values(data.pageMeta).forEach((value, index) => { 
%>

外部JSONファイルからデータを読み込む

先ほどのパターンはデータをEJSファイルに保持した形でしたが、データ量が多くなってきた場合にはJSONとして扱う方が管理しやすいのではないでしょうか。要領としては、EJSファイル内でデータを扱う形と同じですが、外部JSONファイルからデータを読み込むために処理を追加する必要があります。ファイルの構成は先ほどと同じですが、EJSファイルの代わりにJSONファイルが配置される形になります。

index.ejs
  ┣ data.json
  ┗ components
     ┗ _header.ejs

今回はGulpでEJSを扱う前提で進めています、そこでJSONデータを読み込むためにgulpfile.jsを編集します。外部ファイルのデータを読み込むためには「fs」というモジュールが必要になります。これはnode.jsにデフォルトで含まれているので、特に追加でのインストール作業は必要ありません。

【gulpfile.js】

const ejs = require("gulp-ejs");
const rename = require("gulp-rename");
const fs = require('fs');

gulp.task("ejs", function() {
 const data = JSON.parse(fs.readFileSync('./ PATH /data.json'));
 gulp.src(["src/ejs/**/*.ejs", "!" + "src/ejs/**/_*.ejs"])
  .pipe(ejs(data))
  .pipe(rename({ extname: ".html" }))
  .pipe(gulp.dest("dist"));
});

続けて、Gulpで実行するタスクを編集します。まずはJSONデータをパースしたものを変数に入れておきます。fsで使えるreadFileSync()の引数に対象となるJSONファイルのパスを指定します。そして、データが入った変数をejs()の第一引数に設定します。この第一引数には、EJSで扱えるデータを指定するようになっています。

そしてデータ自体はこのようにJSONで保持しておきます。JSON側で書き方が間違っているなどの場合にはEJSのコンパイル時にエラーが発生するので注意します。

【data.json】

{
 "data": {
  "pageMeta": {
   "home": {
    "title": "トップページ",
    "description": "トップページの説明文です"
   },
   "page1": {
    "title": "ページ1のタイトル",
    "description": "ページ1の説明文です"
   }
  }
 }
}

ページテンプレートのEJSファイルでは、先ほどのパターンと比べるとデータ用のファイルをインクルードしたりする必要がないのでコードもすっきりとしたものになります。そしてコンポーネント側へ受け渡すデータは、Gulpのタスクにあるejs()の引数で指定したものを、そのまま使えるようになっています。オブジェクトの場合では、キーを指定することで取り出したいデータにアクセスすることができます。

【index.ejs】

<% const page = 'home'; %>
<%- 
 include(
  'components/_header',
  { meta: data.pageMeta[page] }
 ); 
%>
  <main>メインコンテンツ</main>
  <footer>フッターエリア</footer>
 </body>
</html>

データを受け取る側のコードはEJSでデータを保持する場合の形と変わりません。同じように変数をHTML上に出力する形でOKです。

【components/_header.ejs】

<!doctype html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <meta name="description" content="<%= meta.description %>">
  <title><%= meta.title %></title>
 </head>
 <body>
  <header>ヘッダーエリア</header>

これらをコンパイルすると下記のようなHTMLが生成され、EJSファイル、あるいはJSONファイルで持たせていたデータがHTMLに出力されているのが確認できます。

【index.html】

<!doctype html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <meta name="description" content="トップページの説明文です">
  <title>トップページ</title>
 </head>
 <body>
  <header>ヘッダーエリア</header>
  <main>メインコンテンツ</main>
  <footer>フッターエリア</footer>
 </body>
</html>

EJSを使うケースとしては、大量の静的ページを効率よく作成するケースなどが挙げられますが、その際にはデータを扱うこともあるかと思います。少ないデータ量の場合は問題ありませんが、たくさんのデータを扱う場合には今回のようにテンプレートとデータで別ファイルとして切り分けておくとコーディングがしやすいのでおすすめですね。

（参考にさせて頂いたサイト）
EJSとJSONファイルを使って大量のデータを一括管理してHTMLに書き出す