はじめに
- Vueを使ったアプリでCSVデータを取り込んで、オブジェクトにして使いたい！
- CSVを取り込んでデータに変換ってどうするの？
そんな悩みを抱えていませんか？
アプリで会員データや商品リストなど、CSVファイルをアプリで利用する場面はよくあります。
ただ、いざ実装してみると難しくて手が止まった人も多いのではないでしょうか？
この記事では、「CSVデータをアプリ内で使いたい！」という方に向けて、Papa Parse というライブラリを使ったシンプルな方法をお伝えします。
できること
たとえば、以下のようなCSVデータがあるとします。
"名前", "年齢", "職業" // ヘッダー
"太郎", 18, "学生"
"花子", 19, "学生"
スプシに書き出したので、よかったらダウンロードして使ってください。
これをオブジェクトに変換して、他のコードで使える状態を目指します。
[
{ name: "太郎", age: "18", job: "学生" },
{ name: "花子", age: "19", job: "学生" }
]
// 例
> data.name
"太郎"
P.S
実際にVueアプリを作りました。実際触ってみると、完成をイメージしやすいと思います↓
対象読者
この記事は以下のような方を対象としています。
- VueやJavaScript(TS)を使ってる
- アプリでCSVデータを使いたい
できるだけわかりやすく解説してるので、学びたての人でも読めますよ。
使用技術
- Vue.js
- JavaScript
- (TypeScript化したコードも載せてます)
コード例
事前準備
papaparseをインストールしておきましょう。
npm install papaparse
また、以下のコードに処理を追加します。
import Papa from "papaparse";
function importCSV() {
// ここに処理を書く
}
1. CSVデータを読み込む
parseメソッドを使うと、CSVを読めます。
import Papa from "papaparse";
// csvDataを受け取って、オブジェクトに変換する
function importCSV(csvData) {
const { data } = Papa.parse(csvData, {
header: true,
skipEmptyLines: true
});
return data;
}
// dataは以下になります↓
// [
// { "名前": "太郎", "年齢": "18", "職業": "学生" },
// { "名前": "花子", "年齢": "19", "職業": "学生" }
// ]
2. ヘッダーを英語に変換する
今のままでも良いのですが、キーが日本語だと使いづらいので英語にします。
// before
[
{ "名前": "太郎", "年齢": "18", "職業": "学生" },
{ "名前": "花子", "年齢": "19", "職業": "学生" }
]
> data["名前"]
"太郎"
// after
[
{ name: "太郎", age: "18", job: "学生" },
{ name: "花子", age: "19", job: "学生" }
]
> data.name
"太郎"
日本語ヘッダーを英語に変えるための対応表(header)を定義します。
それを使ってdataの各行のキーを変換します。
import Papa from "papaparse";
// 変換したい英語を書く
const header = {
名前: "name",
年齢: "age",
職業: "job",
};
function importCSV(csvData) {
// CSVを読み込む
const { data } = Papa.parse(csvData, {
header: true,
skipEmptyLines: true,
});
return data.map((row) => convertKeys(row));
}
// キーを英語に変換(複雑なので、コピペOKです)
function convertKeys(row) {
const convertedRow = {};
for (const [originalKey, value] of Object.entries(row)) {
const newKey = header[originalKey] || originalKey;
convertedRow[newKey] = value;
}
return convertedRow;
}
// importCSVが返すデータ
// [
// { name: "太郎", age: "18", job: "学生" },
// { name: "花子", age: "19", job: "学生" }
// ]
完成
これで完成しました。
JavaScript版
import Papa from "papaparse";
// 変換したい英語を書く(みなさんのアプリに応じて変換してください)
const header = {
名前: "name",
年齢: "age",
職業: "job",
};
function importCSV(csvData) {
// CSVを読み込む
const { data } = Papa.parse(csvData, {
header: true,
skipEmptyLines: true,
});
return data.map((row) => convertKeys(row));
}
// キーを英語に変換(複雑なので、コピペOKです)
function convertKeys(row) {
const convertedRow = {};
for (const [originalKey, value] of Object.entries(row)) {
const newKey = header[originalKey] || originalKey;
convertedRow[newKey] = value;
}
return convertedRow;
}
TypeScript版はこちらです↓
import Papa from "papaparse";
type TRecordString = Record<string, string>;
// 変換したい英語を書く(みなさんのアプリに応じて変換してください)
const header: TRecordString = {
名前: "name",
年齢: "age",
職業: "job",
};
function importCSV(csvData: string): TRecordString[] {
// CSVを読み込む
const { data } = Papa.parse<TRecordString>(csvData, {
header: true,
skipEmptyLines: true,
});
return data.map((row) => convertKeys(row));
}
// キーを英語に変換(複雑なので、コピペOKです)
function convertKeys(row: TRecordString) {
const convertedRow: TRecordString = {};
for (const [originalKey, value] of Object.entries(row)) {
// もしheaderで対応があればそれを使い、なければ元のキーを使う
const newKey = header[originalKey] || originalKey;
convertedRow[newKey] = value;
}
return convertedRow;
}
おわりに
この記事では、Papa Parseを使ってCSVデータをオブジェクト化する方法を紹介しました。
またできるだけわかりやすく解説したつもりですが、
- ここがわかりにくかった
- 僕の場合ってどんなコードにしたら良いの？
などあれば、遠慮なくコメントいただけると幸いです！
それでは！