EJSを使ったコーディング実践 ― ①準備+JSONデータからHTMLファイルを一括生成

EJSというテンプレートエンジンをご存知ですかー?

EJSはループや条件分岐が使えたり、includeを使って共通パーツ(headerやfooter)を外部ファイルで管理できたり、HTMLをJavaScriptのようにマークアップしていける、とーても便利なテンプレートエンジン。

ここでは、実践的なEJSを使ってのコーディング方法を書いていくので、EJSの導入方法や使い方などは省きます。

私が参考にしたEJSの記事↓

今回は、タスクランナーGulpを使用してコーディング。

Gulpを使用できる環境は既に整ってる前提で進めます。

最終的にEJSでやりたいこと

  • ①JSONデータからHTMLファイルを一括生成
  • ②.ejsから.htmlをフォルダ分けしてコンパイル
  • ③ヘッダ、フッタは1つの外部ファイルで作成して共通化
  • ④下層ページがあるページにはサイドナビを設置し、下層ページヘのリンクを貼る
  • ⑤サイドナビ、パンくずリストを外部ファイルのJSONデータから生成
  • ⑥ページごとのコンテンツ(共通では無い部分)は別ファイルで作成

こんな感じかな。

達成したいことを一気に説明すると混乱しそうだから、1つずつやっていきまーっす。

①JSONデータからHTMLファイルを一括生成

これをやってみよー。

今回実践的にEJSを使ったコーディングをしていくので、美容室のサイトを制作すると仮定。

STEP.1作成したいサイトの構成とHTMLファイル名を決めておく

ページの構成はこう↓

  • トップページ ー index.html
  • メニューページ ー menu.html
  • STAFF紹介トップページ ー staff-top.html
    • Aさんの紹介ページ ー staff1.html
    • Bさんの紹介ページ ー staff2.html
    • Cさんの紹介ページ ー staff3.html
  • スタイリングの写真掲載ページ(ギャラリー)ー style-gallery.html
  • 店舗紹介トップページ ー salon-top.html
    • 店舗Aの紹介ページ ー salon1.html
    • 店舗Bの紹介ページ ー salon2.html
  • お問い合わせページ ー contact.html

STEP.2GulpでEJSで使うために「gulp-ejs」をインストール

ターミナルを使ってプロジェクトのディレクトリで下記コマンドを実行。

これだけでGulpを使ってEJSがコンパイル出来るようになる。既にGulpのが使える環境があればすごく簡単ー。

STEP.3gulpfile.jsにEJSのタスクを追加

下記の例のように記述し、「ejs/」フォルダに保存。
*HTMLファイルを生成してJSONデータのid名に合わせて名前付するのに「gulp-rename」を使用するので、こちらも合わせてインストールしておく。

STEP3.HTMLファイルを一括生成するためのJSONデータ(pages.json)を作成

下記の例のように記述し、「ejs/data」フォルダに保存。
*まずはEJSでHTMLファイルを一括生成するための最低限のデータだけ書いてます。

STEP.5ベースとなるテンプレートファイル(template.ejs)を作成

下記の例のように記述し、「template.ejs」と名前をつけて「ejs/」フォルダに保存。
とりあえず仮なので、簡単に下記のように。
これが今から生成するHTMLのベースとなり、複製される感じ。
<title></title>内に書いた<%= pageData.title %>で、JSONデータから各ページのtitleを取ってきて出力できる。

ここまででプロジェクト内のファイルは下記のようになってるはず。
(*image/、CSS/、node_modules/内のgulpファイル等は分かりにくくなるので省略。各々必要なフォルダやファイルを追加して下さい。)

root

├ ejs/
│ ├ template.ejs
│ │
│ └ data/
│ └ pages.json

├ node_modules/
│ ├ gulp/
│ ├ gulp-ejs/
│ ├ gulp-rename/
│ ├ :

├ gulpfile.js
├ :

STEP.6Gulpでejsを実行

ここでプロジェクトのディレクトリでgulpを実行します。ターミナルで下記のコマンドを実行。

すると!
プロジェクトのルートに「html」というフォルダが出来て、その中にHTMLファイルが生成される。

root

├ ejs/
│ ├ template.ejs
│ │
│ └ data/
│ └ pages.json

html/
│ ├ contact.html
│ ├ index.html
│ ├ menu.html
│ ├ :

├ node_modules/
│ ├ gulp/
│ ├ gulp-ejs/
│ ├ gulp-rename/
│ ├ :

├ gulpfile.js
├ :

コンパイルされたソースはどうなってるのか、index.htmlを見てみると、、、
下記のようにtemplate.ejsの<%= pageData.title %>の部分がJSONファイルで設定したページのtitleになってますねー。

これでまず「①JSONデータからHTMLファイルを一括生成」完了ー。

続きはこちら(準備中)→「②.ejsから.htmlをフォルダ分けしてコンパイル

Written By:
Li

Add a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です