csvファイルからTypeScriptのコードを自動生成する
はじめに
何かしらのデータなどをcsvでダウンロードしてからTSコードを自動生成できたら便利だと思い自動生成するためのスクリプトを作成しました。
私のケースでは、夫婦で結婚式の余興用クイズアプリを作った話で書いたアプリ作りのときに、参列者のuuid、名前、メッセージなどをcsvで出してTSコードを作成するという場面で使いました。
下準備
まず、必要なcsvファイルを用意します。
私の場合は以下のようなスプレッドシートを用意してからcsvダウンロードしました。
csvファイルをリポジトリの任意のフォルダの中に入れます。
そして、リポジトリの中で作成したTSコードを保存するディレクトリを決めておきます。
私の場合は、csvはsrc/data/message.csv
、作成したTSコードはsrc/data/importedData.ts
として用意するにしました。
csvをパースするために、csv-parse
をインストールしておきます。
yarn add csv-parse
また、自動生成のスクリプトに関してもTypeScriptで書きたかったので、TypeScriptでnodeを動かすためにts-node
もインポートします。
yarn add ts-node
試したバージョンは以下です。
"csv-parse": "^5.3.1",
"ts-node": "^10.9.1",
作成したコード
実際に作成したコードは以下です。
import { parse } from 'csv-parse/sync'
import fs from 'fs'
import path from 'path'
const ExportedCsvFile = path.join(__dirname, '../src/data/message.csv')
type Data = {
uuid: string
name: string
message: string
}
async function main() {
// csvファイルの内容を読み込み
const data = fs.readFileSync(ExportedCsvFile, {
encoding: 'utf-8',
})
const csvCells: string[][] = parse(data)
let formattedData: Data[] = []
for (const [lineNo, line] of csvCells.slice(1).entries()) {
const [
familyName = '', // 姓
givenName = '', // 名
romanLetters = '', // ローマ字
brideOrGroom = '', // 新郎新婦
relationship = '', // 関係
title = '', //肩書・続柄
message = '', // メッセージ
uuid = '', // uuid
] = line
formattedData.push({
id,
name: `${familyName} ${givenName}`,
message,
})
}
fs.writeFileSync(`src/data/importedData.ts`, buildTsSrc(formattedData))
}
function buildTsSrc(formattedData: Data[]) {
return [
'/**',
'* @generated',
'*/',
'',
`export const importedData = ${JSON.stringify(formattedData)} as const;`,
].join('\n')
}
main()
今回必要なのはuuid, name, messageだけだったのでfor文で回してデータを整形しましたが、csvの内容をそのままTSコードにしたいだけならこのへんはもっと簡略化できると思います。(私の場合は諸事情でスプレッドシートの項目をいじるわけにいかず)
あとはこのcsv2ts.ts
を動かすためのコマンドをpackage.json
に用意するだけなのですが、tsconfig.json
のcompilerOptions
の中身によってはうまく動きません。
そこで、実行コマンドを動かすためのtsconfig.json
を別に用意します。
{
"extends": "../tsconfig.json",
"compilerOptions": {
"module": "commonjs",
"target": "es6"
}
}
あとは、package.json
でscriptを追加すると完了です。
"scripts": {
"import:data": "ts-node -P scripts/tsconfig.cli.json scripts/csv2ts.ts"
},
使うときは以下のコマンドを動かすだけでcsvからTSコードが生成できます。
yarn import:data
あとがき
csvファイルからTSコード生成は今回のケース以外でも翻訳ファイルの自動生成でも使ったりしていますが、結構便利なので書いてみました。
何かしらの役にたてると嬉しいです。
Discussion