jsonファイルを利用してデータとテンプレートを分ける – npm + nunjucks + stylus で静的サイト制作を効率的にする(6)

2022年6月13日2022年6月15日

javascript stylus web制作

テンプレートエンジンnunjucksの利用環境構築を紹介してきましたがテンプレートエンジンの何が便利かというと次のようなことです。

今回は２の詳細を紹介します。

具体的にはjsonファイルでリストデータを保持してテンプレートファイルにループ処理でリストタグを吐き出すようにします

▼今までの構築の流れはこちら

JSONファイルについて

jsonファイルについて簡単な説明です

まずデータ構造を決めます。

今回はアベンジャーズヒーローをリストでだします

一人分のデータ構造を以下のようにします

{
    name: "アイアンマン",
    actor: "ロバートダウニーJr"
}

nameキーの値がヒーロー名でactorキーの値が演じている俳優名にします。

２人目のヒーローを追加すると次のようになります。

{
    name: "アイアンマン",
    actor: "ロバートダウニーJr"
},
{
    name: "キャプテンアメリカ",
    actor: "クリスエヴァンス"
}

数が少ないうちはこのように下にコピペしていけばよいですがこれが大量になると作業が大変です。

こんな時はGoogleスプレッドシートでデータを管理しcsvファイルをWEBツールでjsonファイルに変換すると楽です。

↑スプレッドシートに登録

Googleスプレッドシートでメニュー内「ファイル＞ダウンロード＞カンマ区切り形式」で簡単にCSVファイルを生成することができます。

※Excelでも同様のことができますが文字コードがUTF-8ではないのでデフォルトでUTF-8のGoogleスプレッドシートのほうが楽です

必要なデータができたらCSVファイルをダウンロードします。

ダウンロードしたCSVファイルを今度はJSONに変換します。

下記サイトでcsvファイルを簡単にjsonに変換できます。

▼CSVJSON
https://csvjson.com/

先ほどダウンロードしたcsvファイルをアップロードして「＞Convert」ボタンを押すと右側にJSONコードとして吐き出されます。
これをコピーしてjsonファイル内に貼り付けます

今回はdata.jsonというファイルを新規作成して以下のようにします

{
  avengers: [
    // ここに貼り付け
  ]
}

[注意]コピーしたjsonデータはキーavengersの値として貼り付けます

できたjsonファイルは src/tpl/data.jsonとしてプロジェクトフォルダに保存します

package.jsonのscripts項目の一部を変更します

// 変更前
"build:html": "nunjucks **/*.njk -p src/tpl -o dist"

// 変更後
"build:html": "nunjucks **/*.njk src/tpl/data.json -p src/tpl -o dist"

↑このように追記するとnunjucks-cliに
njk拡張子のファイルを対象に、src/tpl/data.jsonファイルを設定ファイルで使用して、src/tplフォルダを基準に、distフォルダにhtmlを生成してね。
ということを伝えることができます。

これでnunjucksで設定ファイルを読み込むことができました。

次にテンプレート側で処理を行います。

nunjucksのfor文を使用してリスト表示を一か所にまとめます

<ul>
  {% for item in avengers %}
  <li>{item.name}|{item.actor}</li>
  {% endfor %}
</ul>

これでもしHTML部分の変更（例えばliタグにクラスを足したい、liの子要素を追加したい）が発生しても一か所を変更すればよいので管理が楽になります。