どうもユーキです。

前回の記事では、Javascriptテンプレートエンジン「mustache.js」を使って簡単に値を入れられるようにしました。
HTMLファイルを直接いじるのであれば特に問題ないのですが、普段は基本的にgulpを使って作業しています。

なので、今回は、gulp実行時にJSONの値を入れ込めるようにしました。HTMLのみですが、CSSやJSにも利用できると思うのでぜひ活用してみてください。

実装方法

開発環境は以下となります。

• Mac 10.13.2
• gulp 3.9.1

では早速手順を紹介します！

必要なモジュールをインストール

• gulp-data
• jsonfile

npm install -D gulp-data jsonfile

gulpfile.jsに以下を追加

var data = require('gulp-data');
var jsonfile = require('jsonfile');

// watch関数に入れる
// jsonという値を渡す
.pipe(data(function (file) {
  dir = './_test.json';
  return json = jsonfile.readFileSync(dir);
}))

JSONファイルにはダミーを入れておきます。

{
  "a": {
    "name": "タニ",
    "age": 26
  },
  "b": {
    "name": "ジャック",
    "age": 50
  }
}

pugファイルは下記のように作成

each val, index in json
  p= index + ': name:' + val.name + ' age: ' + val.age

gulpを実行

出力結果は以下になります。

<p>a: name:タニ age: 26</p>
<p>b: name:ジャック age: 50</p>

まとめ

いろいろ調べてるとfsモジュールを使ってJSONファイルを読み込んでる例がかなり多かった印象です。
ただ今回は、jsonfileというモジュールを見つけ、便利なものは使おうという主義なので使って実装してみました。
データをスプレッドシートからJSONに変換→変換したJSONをもとに量産する　といったことも可能になると思います。楽できそうですね。

googleスプレッドシートからJSONに変換する方法は別途記事に書きます！