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

こんにちは、広野です。

React アプリ内で表示しているテーブルなどの JSON データを、CSV ファイルとしてローカルにダウンロードしたいケースがあります。そんなとき、手作りで画面UIやデータ加工処理を作るのは非常に面倒で、私は react-papaparse というモジュールを使っています。

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

以前、別の記事で react-papaparse を使ったローカル CSV ファイルのインポート、JSON 変換の方法を紹介しましたが、本記事はその逆パターンの紹介になります。

[React] react-papaparse を使ってローカル CSV ファイルを JSON データとしてロードする
React アプリ上でローカル CSV ファイルを読み込ませて、大量データを効率的に一括処理したいケースがあります。画面UIやデータ変換をしてくれる便利なモジュール react-papaparse を紹介します。

やりたいこと

  • React アプリ画面内にある(正確には、アプリのメモリ内にある)JSON データをローカルに CSV でダウンロードしたい。

環境

  • React 18
  • react-papaparse 4.0.2

サンプル画面イメージ

ここでは、以下の公式サイト内で紹介されている CSVDownloader の機能を使用します。

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

公式サイトにはサンプル画面はありませんが、実際に実装すると以下のようなボタンが作成されます。
(デザインはどノーマルすぎるので加工したいですね・・・)

サンプルコード

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

公式サンプルコード

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

実際に書き換えたコード

ダウンロード機能に特化した共用コンポーネントと、ボタンを表示させるコードに分けています。

共用コンポーネント

  • CSVDownloader.js
import * as React from 'react';
import { useCSVDownloader } from 'react-papaparse';

//現在日時取得関数 YYYYMMDDHHMMMのフォーマットで現在日時を取得、ファイル名のsuffixとして付ける
const padZero = (num) => {
  return (num < 10 ? "0" : "") + num;
};
const getCurrentDatetime = () => {
  const now = new Date();
  return "" + now.getFullYear() + padZero(now.getMonth() + 1) + padZero(now.getDate()) + padZero(now.getHours()) + padZero(now.getMinutes());
};

//CSVダウンロード関数 呼び出されるときに、パラメータとしてファイル名prefix、ボタン名、JSONデータをもらう
const CSVDownloader = (props) => {
  const { CSVDownloader, Type } = useCSVDownloader();
  const filename = props.filenameprefix + "_" + getCurrentDatetime();
  return (
    <CSVDownloader type={Type.Button} filename={filename} bom={true} config={{delimiter:","}} data={props.data}>
      {props.buttonname}
    </CSVDownloader>
  );
};

export default CSVDownloader;

ボタンを表示させるコード

ダウンロード用ボタンを表示させたい箇所に、共用コンポーネントを import し、以下のコードを書いてデータ等を渡します。

import CSVDownloader from './CSVDownloader'; //パスはコードの配置場所によって変更する

//中略

<CSVDownloader data={jsondata} filenameprefix="export" buttonname="CSVエクスポート" />

ダウンロード例

ダウンロードしたい JSON データと、ダウンロード後の CSV データの例です。

ダウンロードしたい JSON データ

[
  {
    "menu": "menu1",
    "id": 1,
    "neta": "いか"
  },
  {
    "menu": "menu1",
    "id": 2,
    "neta": "たこ"
  },
  {
    "menu": "menu2",
    "id": 1,
    "neta": "海鮮丼"
  }
]

ダウンロード後の CSV データ

menu,id,neta
menu1,1,いか
menu1,2,たこ
menu2,1,海鮮丼

単純な JSON データであれば、細かい設定なしに簡単に JSON から CSV 変換をしてくれます。

本記事のコード例ですと、ファイル名は export_yyyymmddhhmm.csv になります。

まとめ

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

React アプリ内に JSON データさえあれば、簡単に CSV ダウンロード機能は作れてしまいます。

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

著者について
広野 祐司

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をコピーしました