BLOG

gulp+EJS+JSONで大量のHTMLを効率的に生成する

更新日:2022/01/17


CMSを構築するほどでもないけれど、複数のページをさくっと作りたい。もしくは、PHPが使えない・インクルードができないサーバーでもページを量産したい。そういったとき、手軽にHTMLを生成できる「EJS」がとても便利です。EJSを活用すると、JSONファイルでコンテンツを一括管理して、それを元に静的HTMLファイルを生成する、なんてこともできるようになります。

EJSを用いてページ内のヘッダーやフッターといったコンテンツをインクルード化し、それらのソースを合体したHTMLを生成できます。今回はgulpとEJS、さらにデータの管理がしやすいようJSONファイルを用いてページの量産を試みたいと思います。ひとつのJSONファイルでコンテンツを一括管理して、それを元に静的HTMLファイルを量産できるようになるので、ぜひチェックしてみてくだささい!

デモサイトはこちら(記事一覧ページ)

※記事内の画像はすべてフリー素材サイト「Unsplash」「Pixabay」よりダウンロードしています。

今回作るものは

今回はgulp+EJS+JSONを用いて大量のhtmlを生成しやすくしてみようと思います。

・同じテンプレートの商品紹介ページが大量にあり、WordPressを使用しないサイト
・セキュリティ上どうしてもHTMLを使用しないといけないサイト
・CMSを構築するほどでもないけれど、複数のページをさくっと作らないといけないとき

上記のような場面で活用するととても便利です。

それでは、まずはベースとなる言語やツールについて簡単に紹介します。

gulpとは

gulpはNode.jsのビルドシステムです。CSSやJavaScript、画像などのさまざまな種類のファイルを、どのように加工してどのように出力するかを指定し、自動でビルドしてくれるように設定できます。プロジェクトごとに、CSSは圧縮したほうが良いか否か、画像は軽量化するか、特定の言語を使うかなど、出力方法を選べる柔軟性も備えています

gulp公式サイトはこちら

EJSとは

EJSとは、JavaScriptを用いてHTMLを生成できるテンプレート言語で、拡張子は「.ejs」です。Effective JavaScript Templatingの頭文字をとっており、直訳すると「効率的なJavaScriptのテンプレート」になります。簡単に導入でき、複雑な書き方などもないので素早く適応できるとても便利なものとなっています。

EJS公式サイトはこちら

参考までに、メリットとデメリットをまとめてみました。

EJSのメリット
・ヘッダーやフッターなどの共通パーツをインクルード化できるため、修正や改修などが簡単におこなえる
・JavaScriptをベースにしているので、PHP(CMS)が使えない環境であっても導入することが可能

EJSのデメリット
・EJSはシンプルな造りになっているため、他のテンプレートエンジンに比べると機能が少ない
・node.jsのインストールが必要のため、導入までに多少時間がかかる

詳しい使い方は記事の中で紹介していきます。

ファイル構成

gulp+EJSでインクルード化し、JSONファイルからサイト内のデータを読み込みgulpで展開できるようにします。記事データをJSON形式でまとめることで、同じ作りのページの量産が簡単にできます。また、コンテンツ内の造りを変えることになっても、記事データとHTMLを切り離しているのでスムーズに改修ができます。

手順

記事内で使うNode.jsとGulpのバージョンは以下の通りです。

Node.jsv16.13.1
gulpCLI version: 2.3.0

1. Node.jsをインストールする

gulpはNode.jsのライブラリのため、利用するにはNode.jsのインストールが必要です。

Node.js公式サイトはこちら

2. プロジェクトファイルを作成

任意のフォルダを作成し、ターミナルから以下を叩きます。

3. npmでパッケージのインストール

npmでパッケージのインストールをします。

今回使うパッケージは以下の通りです。

gulpgulp用
gulp-ejsEJS用
gulp-renameファイル出力時にファイル名を変える
gulp-dart-sasssass用
gulp-postcss生成されたcssを操作する
autoprefixer自動でベンダープレフィックスを付与
gulp-html-beautifyHTML生成後のコードを綺麗にする
gulp-plumberエラーによるタスクの強制停止を防止
gulp-notifyデスクトップ通知
browser-sync変更を即座にブラウザへ反映
fsJSONファイル操作用
delデータ削除用

4. gulpfile.jsの編集

さきほど作成したプロジェクトの中にgulpfile.jsというものが自動で作られていると思うので、こちらを編集していきましょう。まずは、先ほどインストールしたプラグインを読み込みます。

次に、入出力するフォルダを指定しやすいよう、変数にまとめます。

生成される前に、一度生成した中身を削除するためのタスクを用意しておきます。

scssを自動で生成するようにします。

EJSからHTMLを自動で生成するようにします。

※ファイル名について

上記のように、出力するファイル名を指定することができます。

画像とJavaScriptの出力先を指定します。
これらは今回特別な操作をしないので、シンプルなソースになっています。

ローカルサーバーを立ち上げるようにします。
ファイルの更新があれば自動でブラウザがリロードされるようになっています。

css、EJS、img、jsを出力します。

以上がpackage.jsの設定になります。

5. data.json の作成

記事に流し込むデータをJSONに登録します。

6. EJSの作成

EJSファイルを作成します。
基本的にはhtmlファイルと同じですが、任意のテキストを挿入したい箇所に、先ほどのJSONファイルで指定した変数を入れておきます。
フッター用のインクルードファイル_footer.ejsもこのファイルで読み込んでいます。

_contents.ejs

_contents.ejsでは、<%= page['category'] %>というような、EJS用のタグ<% %>で囲われた箇所をいくつか確認できるかと思います。ここで、JSONから任意のデータ(<%= page['category'] %>ではcategory欄)を参照し、テキストを表示させています。

全体のソースの表示
ポイント:情報の出し分け

先ほどのJSONファイルにて、”hasInfo” が true になっていた箇所では、< div class="product-info" > が表示されるようになります。このように、JSONやEJSを用いて記事ごとの情報の出し分けも可能になるので、「この記事にはキャンペーンページへのバナーを出す・出さない」といったことが選べるようになり、サイトの運営がしやすくなるかと思います。

_head.ejs

通常のhead内をこちらのインクルードファイルに記載しておきます。

タイトル箇所には<%= page['title'] %> 、ディスクリプションには<%= page['description'] %>、キーワードには<%= page['keywords'] %>といったうように、JSONから読み込むデータを指定しています。

item01.ejs

アイテムページでは_head.ejsと_contents.ejsを読み込んでいます。
ページの冒頭で pageData = ‘item01’ と書いてあり、その下の _contents.ejs にて JSON から読み込むデータを page: json[pageData] で指定しています。var pageData = ‘item01’; 箇所を変えるだけで、JSONから読み込みたいデータを選ぶことができます

7. gulp でビルドする

最後に、ターミナルで以下のコマンドを叩くとgulpが起動しビルドされ、HTMLファイルが dist フォルダ内に出力されます。

/item01/~/item03/それぞれのページが生成されれば成功です。もし、先ほどJSONに記載したデータが任意の場所に表示されていない場合は、変数が正しいものか、タイプミスがないかなどを確かめてみてください。

デモサイトはこちら(下層ページ)

ソース一式のダウンロード

今回のソース一式をまとめたものは、以下URLよりダウンロードいただけます。node用のファイルは含まれていないので、npmでパッケージのインストールをした後にフォルダへ以下のファイルをコピーしてください。

ダウンロードはこちらから

EJSについて

EJSの書き方について、基本的にはHTMLと同じなのですが、EJSを使いたい箇所では<% %>というタグ内に記入する必要があります。ほかにも少しだけルールがあるので簡単にまとめました。

EJSの記入

<% %>内にJavaScriptを記入できます。HTMLとしては出力されません。

コメントアウト

EJS内でコメントアウトするときには「#」を使います。

エスケープする

このように宣言した変数を出力してみます。

<%- では改行が反映されます。htmlの要素として反映させたい場合は <%- にしましょう。

エスケープしない

<%= にすると改行コードも文字として出力されます。

インクルードしたファイルを読み込む

インクルードしたファイルを読み込むには、<%- include('ファイルへのパス');%>と記載してください。

インクルードを使い値を受け渡す

上記のように記載すると、ページをまたいで値を渡すことも可能です。

ここに先ほど宣言されていた var baseUrl = ‘../..’; が入り、CSSへの正しいパスが設定されます。

まとめ

基本的にはほぼHTMLで作成でき、EJS事態もJavaScriptの文法をベースにしており学習コストが少ないため、HTMLでのサイト制作に慣れ親しんだ方であれば、すぐにEJSを活用できるかと思います。HTMLを大量に生産したり、共通パーツのちょっとした修正などにEJSは便利ですので、この機会にぜひ導入してみてはいかがでしょうか。

また、Node.jsの開発者が新たにDenoという環境を開発していたので、次はdeno+EJSを試してみたいと考えています。

参考
【Gulp】EJSを使ってHTMLを量産する
Gulp + EJS + JSONを使用してhtmlファイルを量産する方法

FOLLOW US