TL;DR

このページでは、Next.js と TypeScript を使用した CSV ファイルの読み込みとその JSON 変換の実装方法について解説しますね。一言でいうと、CSV ファイルを読み込み、その内容を JSON 形式に変換するという手続きを行います。

CSV と JSON とは？

CSV（Comma Separated Values）は、データをカンマ（,）で区切る形式です。これはシンプルな構造をしており、一行が一つのデータセットを表現し、カンマで区切られた各項目がそのデータセットの属性を示します。

一方、JSON（JavaScript Object Notation）は、データ交換用の軽量なフォーマットです。人間にとって読み書きが容易で、マシンにとっても簡単に解析・生成できます。JSON は JavaScript のオブジェクトリテラル構文に基づいていますが、言語に依存せず、多くのプログラミング言語で利用できます。

これらの考え方をもとに、CSV ファイルからデータを読み込み、それを JSON 形式に変換することが目的です。この変換は、より複雑なデータ操作や解析を行う際に役立ちます。

CSV ファイルの読み込み

初めに、CSV ファイルを読み込むためのステップを解説します。このプロセスは非常に重要で、後続の JSON 変換のための基盤となります。

今回は、Node.js の fs モジュールを使って、CSV ファイルを読み込みます。fs モジュールは、ファイルの読み書きを行うためのモジュールです。そして、その読み込んだデータを次のステップに進めるために、papa parse モジュールを使います。これは、CSV データを JavaScript のオブジェクトにパース（変換）する強力なライブラリです。

npm install papaparse
# または
yarn add papaparse

この部分のコードは次のようになります。ファイル名は csvToJson.ts とします。

import fs from 'fs'
import Papa from 'papaparse'

type CsvToJsonProps = {
  path: string
}

export const csvToJson = (props: CsvToJsonProps) => {
  const data = fs.readFileSync(props.path, 'utf8')
  const results = Papa.parse(data, {
    header: true,
    dynamicTyping: true,
    skipEmptyLines: true,
  })

  return results.data
}

このコードを詳しく見ていきましょう。

• fs モジュールと papa parse モジュールをインポートしています。これらは、それぞれ CSV ファイルの読み込みとパースに必要なモジュールです。
• CsvToJsonProps という型を作成し、その中で path を定義しています。これは、ファイルのパスを指定するためのもので、CSV ファイルの場所を指定する際に使用します。
• csvToJson という関数を作成し、その中で fs.readFileSync を使用して CSV ファイルを読み込んでいます。この関数は、指定されたパスのファイルを同期的に読み込むもので、ファイルの内容を文字列として返します。
• その後、Papa.parse を使用して、読み込んだ CSV データを JavaScript のオブジェクトにパースしています。パースする際に、オプションを指定しています。header: true は、最初の行をヘッダーとして扱うことを示し、dynamicTyping: true は、数値フィールドを自動的に数値に変換することを示します。skipEmptyLines: true は、空の行を無視することを示します。
• 最後に、パースされたデータを返しています。

以上が CSV ファイルの読み込みの解説となります。ここでは、Node.js の fs モジュールと papa parse モジュールを使用して、CSV ファイルを読み込み、それを JavaScript のオブジェクトに変換することを行いました。

csv-parse

csv-parse というライブラリを使用することでも、CSV ファイルの読み込みと解析を行うことができます。その際、Node.js の fs (ファイルシステム) モジュールと併用して、ファイルの読み込みを行います。

ライブラリ をインストールします。

npm install csv-parse

以下に csv-parse を使用した CSV ファイルの読み込みのコードを示します。

import fs from 'fs'
import parse from 'csv-parse'

fs.createReadStream('path/to/your/file.csv')
  .pipe(
    parse({
      delimiter: ',',
      columns: true,
      trim: true,
    })
  )
  .on('data', (row) => {
    console.log(row)
  })
  .on('end', () => {
    console.log('CSV file successfully processed')
  })

まず、fs.createReadStream('path/to/your/file.csv') によって CSV ファイルを読み込み、そのストリームを生成します。続いて .pipe() メソッドを使用して、生成したストリームを csv-parse ライブラリで処理します。parse 関数の引数にはオプションを指定します。この場合、列の区切り文字を , にし、最初の行を列の名前として使用し、各フィールドの前後の空白を削除します。

その後、.on('data', (row) => {}) によって、各行を JavaScript のオブジェクトとして取得し、コンソールに表示します。最後に、全ての行の処理が完了したら end イベントが発生し、CSV file successfully processed と表示します。

このコードは Next.js プロジェクトのサーバーサイドの処理（API ルート等）で実行可能であり、ブラウザサイドのコードから直接実行することはできません。なお、ファイルのパスは適宜書き換えてください。

Next.js で、CSV を JSON に変換する実装

以下のソースコードは、Next.js で CSV ファイルを読み込み、その内容を JSON 形式に変換する処理を行うものです。

// pages/api/convertCSV.ts

import type { NextApiRequest, NextApiResponse } from 'next'
import parse from 'csv-parse/lib/sync'

type Data = {
  [key: string]: string
}

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const csvContent = req.body
  const records: Data[] = parse(csvContent, { columns: true })

  res.status(200).json(records)
}

export default handler

このコードは、Next.js の API ルートとして動作し、POST リクエストのボディから CSV コンテンツを取得し、それを JSON 形式に変換します。

• import type { NextApiRequest, NextApiResponse } from 'next';で Next.js の API ルートのリクエストとレスポンスの型をインポートしています。
• import parse from 'csv-parse/lib/sync';で csv-parse ライブラリの同期解析関数をインポートしています。この関数を使って CSV データを解析します。
• type Data = { [key: string]: string; }で CSV データの型を定義しています。これは任意の文字列キーと文字列値を持つオブジェクトの形を取ります。
• const handler = async (req: NextApiRequest, res: NextApiResponse) => {...}で API ルートのハンドラー関数を定義しています。
• const csvContent = req.body;で POST リクエストのボディから CSV データを取得します。
• const records: Data[] = parse(csvContent, { columns: true });で CSV データを解析し、それを JSON 形式に変換します。オプションの columns: true は、出力をオブジェクトにすることを指定しています。つまり、CSV の各行がオブジェクトに変換され、カラムのヘッダーがプロパティのキーになります。
• res.status(200).json(records);で解析した結果を JSON 形式でレスポンスとして返します。

以上で、Next.js と TypeScript を使った CSV ファイルから JSON に変換する方法の基本的な説明を終えます。この知識を応用すれば、CSV データをもとにより複雑なデータ操作や解析を行うことが可能となります。