hiranaiEJSとJSONファイルを使って大量のデータを一括管理してHTMLに書き出す
大量の商品データをHTMLに挿入する際、JSONファイルとEJSを使用して楽にHTMLに書き出すことができました！
EJSとJSONを使用してよかったこと
- EJSの見た目がHTMLだからすぐ使えた
- JSのfor文でHTMLの繰り返しの記述を書かなくなって楽＆見た目すっきり
- 商品データ（名前・商品詳細・画像パス・URLなど）1ファイルで管理できて修正が楽
というわけでめっちゃラクチンですわ≡≡≡≡(┐「ε:)
EJSとは
前回Jade(Jadeのテンプレートをextends&blockで継承したら便利に開発できた)を紹介したのですが、EJSもテンプレートエンジンの1つです
Embedded JavaScriptの略で見た目はHTMLなのですが、JavaScriptのような書き方もできて、最終的にはHTMLになって生成してくれます
Jadeと同じくheader/footerをモジュールに分けてインクルードできたりしますし、見た目がHTMLなのでJadeよりも学習コストは低いと思います
EJSの導入について
最終ディレクトリは以下の様になります
- /ejs/index.ejs
- /ejs/config.json
- /gulpfile.js
- /index.html(EJSをコンパイルしてできるファイルです)
※gulpの導入については省略します
gulp-ejsをインストールする
以下のコマンドをターミナル（windowsはコマンドプロンプト）で打ち込む
npm install gulp-ejs --save-dev
gulpfile.jsにタスクを記述する
var gulp = require("gulp");
var ejs = require("gulp-ejs");
gulp.task('ejs', function(){
gulp.src('ejs/**/*.ejs')
.pipe(ejs({},{"ext": ".html"})) // 拡張子の指定
.pipe(gulp.dest('./'));
});
EJSファイルを作成する
index.ejsを作成し、htmlと同じ書き方で記述し保存してください
こんな感じのファイルでOKです↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ejs-test</title>
</head>
<body>
</body>
</html>
こちら保存できたらgulpタスクを実行します
以下のコマンドを打ち込んでください
gulp ejs
index.htmlファイルができたら成功です
EJSの記述方法はこちら↓
テンプレートエンジンEJSで使える便利な構文まとめ - Qiita
JSONファイルを扱ってみる
JSONファイルを作成する
今回EJS内でJSONファイルのデータを扱うので、
JSONファイルを用意してください
今回はEJSフォルダの中にconfig.jsonを作成しました
{
"test":[
{
"name":"nagano"
},
{
"name":"susa"
},
{
"name":"murotani"
}
]
}
JSONファイルをEJS内で扱えるようにする
gulpfile.jsでEJSのタスクを書き換える
var fs = require('fs');
gulp.task('ejs', function(){
// JSONファイル読み込み
var json = JSON.parse(fs.readFileSync('./ejs/config.json'));
gulp.src('ejs/**/*.ejs')
.pipe(ejs(json,{"ext": ".html"})) // EJS内でjsonをデータを当て込む
.pipe(gulp.dest('./'));
});
EJSファイルでJSONデータを表示してみる
以下のコードをindex.ejsに追記して、gulpタスクを実行してください
<div><%- test[0].name %></div>
index.htmlを確認します
<div>nagano</div>
が出てきたら成功です
testというデータの配列をforを使って取り出す
EJSにfor inの記述をする
以下のコードをindex.ejsに追記して、gulpタスクを実行してください
<% for (var i in test) { %>
<div class="test"><%- test[i].name %></div>
<% } %>
index.htmlを確認
<div>nagano</div> <div>susa</div> <div>murotani</div>
がindex.htmlに出れば成功です
まとめ
これを使用すればhtmlの記述とデータを完全に分けることができるので、構築スピードもあがり、修正も楽になります
Jadeでも同じことができるようですが、EJSのほうがHTMLベースで分かりやすかったので今回はEJSを採用しましたL( ◔ω◔)┘三└( ◔ω◔)」
参考
テンプレートエンジンEJSで使える便利な構文まとめ - Qiita
