hiranai

EJSと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

テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング

gulp-ejsを利用してJSONファイルからURLを一括挿入 - Qiita

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら