[React] react-papaparse を使ってローカル CSV ファイルを JSON データとしてロードする

こんにちは、広野です。

React アプリにローカル CSV ファイルを読み込ませて、大量データを効率的に一括処理したいケースがあります。そんなとき、手作りで画面UIやデータ加工処理を作るのは非常に面倒で、私は react-papaparse というモジュールを使っています。

react-papaparse
The fastest in-browser CSV (or delimited text) parser for React.

本記事では react-papaparse の実装コード例のみ紹介しますが、今後別記事と組み合わせた続編記事の中で、一連の CSV データ処理アプリ開発例を紹介したいと思います。react-papaparse のインストールについては上記公式サイトをご覧下さい。

やりたいこと

  • React アプリ画面内でローカルにある CSV データをロードさせたい。
  • ロードした CSV データは JSON データに変換したい。(以降の一括処理に活用)

環境

  • React 18
  • react-papaparse 4.0.2

サンプル画面イメージ

ここでは、以下の公式デモサイト内にある CLICK AND DRAG UPLOAD の機能を使用します。

react-papaparse
The fastest in-browser CSV (or delimited text) parser for React.

サンプルコード

react-papaparse は、v4 からは import したモジュールだけでは動かず、TypeScript で書かれた公式サンプルコードを元に自分でコードを書き換える必要があります。

公式サンプルコード

react-papaparse/CSVReaderClickAndDragUpload.tsx at v4.0.0 · Bunlong/react-papaparse
react-papaparse is the fastest in-browser CSV (or delimited text) parser for React. It is full of useful features such as CSVReader, CSVDownloader, readString, ...

実際に書き換えたコード

UI デザイン用のスタイル設定はそのままに、アプリとの統合用に公式サンプルコードを書き換えます。

修正前

以下、onDragOver, onDragLeave の部分は削除し、onUploadAccepted の部分を残します。

<CSVReader
  onUploadAccepted={(results: any) => {
    console.log('---------------------------');
    console.log(results);
    console.log('---------------------------');
    setZoneHover(false);
  }}
  onDragOver={(event: DragEvent) => {
    event.preventDefault();
    setZoneHover(true);
  }}
  onDragLeave={(event: DragEvent) => {
    event.preventDefault();
    setZoneHover(false);
  }}
>

onUploadAccepted は、CSV ファイルを正常に読み込んだ後、データを JSON 形式にして results 変数に格納してくれます。

console.log の部分は results の中身をコンソール表示してくれるだけなので削除し、代わりに results を使用した自分がやりたい処理を記述することになります。実際にはデータのフォーマットチェックなどを挟むのですが、ここでは簡略化のため省略します。

また、以下のオプションを入れています。

  • CSV から JSON に変換するときのオプション追加(config設定)
    • CSV ファイル内に列名がある場合に、列名を JSON のキーにしてくれる
    • CSV ファイル内に空行がある場合に、無視してくれる
  • ロードするファイルの MIME オプション追加 (accept設定)
    • ロード可能なファイルの形式を制限する(今回の要件で言えば CSV のみ)

修正後

最終的に、以下のように加工します。

<CSVReader
  onUploadAccepted={(results: any) => {
    setParsedJson(results);
    setZoneHover(false);
  }}
  config={{
    header: true,
    skipEmptyLines: true
  }}
  accept="text/csv"
>

上のコードでは、parsedJson という state にロードしたデータ (results) を格納しています。別途 state の定義は必要ですが、CSVReader コンポーネント外で後続処理を続けたいためです。

こうして書き換えたサンプルコードは CSVReader という名前で export されているので、表示したいコンポーネントの return 内で <CSVReader /> として呼び出すことで使えます。

私は React コードを JavaScript ベースで書いています。公式サンプルコードは TypeScript で書かれていたため、ビルド用に TypeScript モジュールを追加でインストールしています。

npm install --save typescript

まとめ

いかがでしたでしょうか?

本記事は CSV データを React アプリにロードするところまでで終わっていますが、実際には後続処理もコーディングする必要があります。それも含めた続編記事を書きますので、後ほどお会いしましょう。

本記事が皆様のお役に立てれば幸いです。

著者について
広野 祐司

AWSサーバーレスアーキテクチャを駆使して社内クラウド人材育成アプリや教育コンテンツをつくっています。ReactでSPAを書き始めたら、快適すぎて他の開発言語には戻れなくなりました。AWSサーバーレスやReactの仲間を増やしたいです。
取得資格:AWS認定は7つ、ITサービスマネージャ、ITIL v3 Expert、等
2020, 2021 APN AWS Top Engineers 受賞
2022 AWS Partner Ambassador 受賞
好きなAWSサービス:AWS Amplify / Amazon Cognito / AWS Step Functions / AWS CloudFormation

広野 祐司をフォローする
クラウドに強いによるエンジニアブログです。
SCSKは専門性と豊富な実績を活かしたクラウドサービス USiZE(ユーサイズ)を提供しています。
USiZEサービスサイトでは、お客様のDX推進をワンストップで支援するサービスの詳細や導入事例を紹介しています。
その他技術ナレッジ
TechHarmony
タイトルとURLをコピーしました