Zenn
👩‍💻

csvファイルからTypeScriptのコードを自動生成する

2022/11/20に公開
TypeScript
#
csv
tech

はじめに

何かしらのデータなどを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",

作成したコード

実際に作成したコードは以下です。

scripts/csv2ts.ts
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を別に用意します。

scripts/tsconfig.cli.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