HOWTO · React
React で CSV ファイルをアップロードして読み取る
この記事では React で CSV ファイルを読み込む方法を紹介します。
このページの内容
この記事では、React.js で CSV ファイルを読み取る方法を学習します。 多くのシナリオでは、React アプリケーションの開発中に、開発者は CSV ファイルからデータを読み取り、それをユーザーの画面に表示する必要があります。
ここでは、React で CSV ファイルを読み取る 2つの異なる方法を学習します。
FileReader を使用して React で CSV ファイルを読み取る
React.js で Vanilla JavaScript の FileReader() を使用して、CSV ファイルを読み取ることができます。
以下の例では、react-file-reader ライブラリを使用してファイルのアップロード ボタンを作成しています。 react-file-reader ライブラリをインストールするには、プロジェクト ディレクトリで以下のコマンドを実行する必要があります。
npm i react-file-reader
ユーザーは、次の構文に従ってファイル アップロード ボタンを作成し、CSV ファイルを読み取ることができます。
<ReactFileReader handleFiles={uploadFile} fileTypes={".csv"}>
<button className="btn">Upload</button>
</ReactFileReader>
アップロードされたファイルを読み取るには、FileReader() クラスのオブジェクトを作成し、オブジェクトを参照として受け取り、ファイルをパラメーターとして渡すことで readAsText() メソッドを呼び出します。
コード例:
// import required libraries
import React from "react";
import ReactFileReader from "react-file-reader";
function App() {
const uploadFile = (files) => {
// Creating the object of FileReader Class
var read = new FileReader();
// when readAsText will invoke, onload() method on the read object will execute.
read.onload = function (e) {
// perform some operations with read data
alert(read.result);
};
// Invoking the readAsText() method by passing the uploaded file as a parameter
read.readAsText(files[0]);
};
return (
<>
<h3> Upload a CSV file to read</h3>
{/* creating the file upload button to upload CSV file */}
<ReactFileReader handleFiles = {uploadFile} fileTypes={".csv"}>
<button className="btn"> Upload </button>
</ReactFileReader>
</>
);
}
export default App;
出力：
上記の出力では、ユーザーが CSV ファイルをアップロードすると、CSV ファイルのコンマ区切りデータを含むアラート ボックスが表示されます。
papaparse ライブラリを使用して React で CSV ファイルを読み取る
papaparse は、ユーザーが React で CSV ファイルを読み取るために使用できるサードパーティ ライブラリです。
papaparse ライブラリをインストールするには、ターミナル経由でプロジェクト ディレクトリに移動し、以下のコマンドを実行します。
npm i papaparse
以下の例では、react-file-reader 外部ライブラリを使用してファイル アップロード ボタンを作成しました。 ユーザーがファイルをアップロードすると、uploadFile() 関数が呼び出されます。
uploadFile() 関数では、ファイルを最初のパラメーターとして渡し、コールバック関数を 2 番目のパラメーターとして渡すことにより、papaparse ライブラリの parse() メソッドを呼び出しました。これは、ファイルの読み取りが完了すると呼び出されます。 .
コード例:
// import required libraries
import React from "react";
import ReactFileReader from "react-file-reader";
import Papa from 'papaparse';
function App() {
const uploadFile = (files) => {
// Using papaparse to parse the CSV file
Papa.parse(files[0], {
complete: function(results) {
// results contain data; users can use the data for some operations.
console.log("Finished:", results.data);
}
});
};
return (
<>
<h3> Upload a CSV file to read using Papaparse</h3>
{/* creating the file upload button to upload CSV file */}
<ReactFileReader handleFiles={uploadFile} fileTypes={".csv"}>
<button className="btn">Upload</button>
</ReactFileReader>
</>
);
}
export default App;
出力：
ユーザーが CSV ファイルを読み取るために外部ライブラリを使用したくない場合、ユーザーは React.js で Vanilla JavaScript の FileReader クラスを使用できます。 さらに、この記事では papaparse 外部 React ライブラリを使用して CSV ファイルを読み取りました。
インターネット上には、papaparse など、ユーザーが必要に応じて使用できるサードパーティ ライブラリが多数あります。
