こんにちは、広野です。
React アプリにローカル CSV ファイルを読み込ませて、大量データを効率的に一括処理したいケースがあります。そんなとき、手作りで画面UIやデータ加工処理を作るのは非常に面倒で、私は react-papaparse というモジュールを使っています。
本記事では react-papaparse の実装コード例のみ紹介しますが、今後別記事と組み合わせた続編記事の中で、一連の CSV データ処理アプリ開発例を紹介したいと思います。react-papaparse のインストールについては上記公式サイトをご覧下さい。
やりたいこと
- React アプリ画面内でローカルにある CSV データをロードさせたい。
- ロードした CSV データは JSON データに変換したい。（以降の一括処理に活用）
環境
- React 18
- react-papaparse 4.0.2
サンプル画面イメージ
ここでは、以下の公式デモサイト内にある CLICK AND DRAG UPLOAD の機能を使用します。
サンプルコード
react-papaparse は、v4 からは import したモジュールだけでは動かず、TypeScript で書かれた公式サンプルコードを元に自分でコードを書き換える必要があります。
公式サンプルコード
実際に書き換えたコード
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 アプリにロードするところまでで終わっていますが、実際には後続処理もコーディングする必要があります。それも含めた続編記事を書きますので、後ほどお会いしましょう。
本記事が皆様のお役に立てれば幸いです。