多くの記事データがあり、同じように描画をするWebアプリケーションの実装依頼が来て、
合わせて多言語化(ja/en)の要件が入ってきた。
ひとつひとつ手作業でやるのも大変なので、CSVからJSONへ変換する簡単なツールを作成した。
1.コンテンツを作成する人と連携を取り、フォーマットを決定(Googleスプレッドシート)
2.フォーマットをCSVに変換
3.ツールにCSVを渡してNext.jsで描画を想定したJSONデータへ変換する
をすることで、データ変換を自動化し、実装に集中できるようにする。
前提条件として、Node.jsが動く環境で実装している。
最終的に作成するもの
CSV ファイル(./data/data.csv)を読みこみ、JSON ファイルへ変換する。
これはフロントエンド[Next.js]だけで完結させるための JSON データを作成するツールになる想定です。
CSV ヘッダーは固定で「写真,記事日本語,記事英語,緯度経度,時代タグ,建築タグ」とします。
実行 (node main.js ) することで、Next.js 用に加工した各種JSONファイルを作成します。
・data.json (map してデータの描画に利用する)
・ja.json (i18n の言語ファイルとして利用する)
・en.json (i18n の言語ファイルとして利用する)
ライブラリインストール
csvファイルをjsonに変換するライブラリがあったので、利用します。
公式を参照しながら、npmでインストールします。
npm i --save csvtojson変換するfunctionを作成
CSVファイルの配置場所と、生成したJSONファイルの配置場所を定数に持ち、csv2json関数を呼び出すと、自動的にCSVをJSONに変換させます。
10行目でcsvtojsonのライブラリを使い、CSVをJSONに変換しています。
17行目でi18n用に加工したJSONファイルを生成しています。
28行目でまとめたJSONファイルを生成します。
const fs = require("fs");
const csv = require("csvtojson");
const inputCsvPath = "./data/data.csv";
const outputPath = "./out";
const lang = ["ja", "en"];
const jsonIndent = 2;
exports.csv2json = async function () {
const jsonArray = await csv().fromFile(inputCsvPath);
if (!fs.existsSync(outputPath)) {
fs.mkdirSync(outputPath, { recursive: true });
}
// 言語ファイル処理
for (const locale of lang) {
const langJson = { article: {} };
langJson.article = jsonArray.map((d, index) => {
return { [`trans_${index}`]: locale == "ja" ? d["記事日本語"] : d["記事英語"] };
});
const jsonStr = JSON.stringify(langJson, undefined, jsonIndent);
fs.writeFileSync(`${outputPath}/${locale}.json`, jsonStr);
}
// 描画用データ処理
const additionalJson = jsonArray.map((d, index) => {
return {
[`photoName`]: d["写真"],
transKey: `trans_${index}`,
[`latLng`]: d["緯度経度"].replace(/\s+/g, ""),
[`tagPeriod`]: d["時代タグ"],
[`tagArchitecture `]: d["建築タグ"],
};
});
const jsonStr = JSON.stringify(additionalJson, undefined, jsonIndent);
fs.writeFileSync(`${outputPath}/data.json`, jsonStr);
};
実行部分の作成
直接呼び出しても良いのですが、役割を分けたかったのでmain.jsファイルをエンドポイントとします。
main.jsのmain関数でconvert.jsのcsv2jsonを呼び出し、実行します。
const app = require("./convert");
main();
async function main() {
const startTime = Date.now();
await app.csv2json();
const endTime = Date.now();
console.log("completed !!");
console.log(`process time : ${endTime - startTime} ms`);
}
GitHub
コード全体を見たい人はどうぞ。
https://github.com/potatowithbutter1987/ConvertCsvToJson
Summary
まずはライブラリを調べて、あれば利用して、なければ自作するのが良さそう。
今回もCSVからJSONへ変換するライブラリを活用したおかげで、その後の処理に注力できた。
ルールを決めて自動化はエンジニアへ。
