ryokatsu.dev

CSVを簡単に扱えるPapa Parse

小ネタ。

業務で、jsonをCSVにパースしてダウンロードを行う処理が必要になった。（フロントエンドで）

今まで愚直に以下のような構成でコーディングしていた。

  1. jsonをcsv用の文字列に編集（mapとかforEachを使って一個ずつ処理していく）
  2. 変換、拡張子、出力ファイル名などのconfigを作っておく
  3. BLOBに変換するnew Blob([csv], { type: 'text/csv;charset=utf-8;' });
  4. 隠しaタグを用意してあげてブラウザからダウンロードさせる

これを書くと結構なコード量になる。

そんな中会社の同僚にPapa Parseというライブラリを教えてもらった。

これがだいぶ優秀だった。

https://www.papaparse.com/

ドキュメントが詳しいのとDEMOが分かりやすいので、一度目を通せば何ができるかがすぐ分かる。

CSV to JSON

  • ローカルファイルの解析（csvアップロード）
  • リモートファイルの解析（url）
  • 文字列解析

JSON to CSV

  • 解析のオプションが結構ある

しかもこのライブラリ型定義ファイルまであった！

https://www.npmjs.com/package/@types/papaparse

Vue.jsでCSVダウンロードする

今回Vue.jsでとりあえずcsvダウンロードはできるものを作った。

まずは、ライブラリを取得する。（型定義必要であれば@typesもインスコ）

yarn add papaparse @types/papaparse

今回は、itemsというデータの中に入っている情報をcsvにパースした。 ※itemsの中にはfetchしてきたjsonデータなどが入っている想定

<button
  @click="csvExport"
>
  CSV出力
</button>

...javascript

import Papa from 'papaparse'
data() {
  return {
    items: [
      {id: 123456, name: "Ryo", hoge: "hoge"},
      {id: 000000, name: "Taro", hoge: "hoge"},
      {id: 987654, name: "Jiro", hoge: "hoge"}
    ]
  }
},

methods: {
  csvExport(): void {
    const csv: string = Papa.unparse(this.items)
    const blob = new Blob([csv], { type: 'text/csv' })
    const link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = 'Result.csv'
    link.click()
  }
}

ボタンクリックするとcsvがダウンロードされる。

Papa.unparse(this.items)だけでパースができるので、コード量は短い。unparseメソッドは第2引数で、configを設定できる。もう少し細かい設定も可能。

超強力なライブラリだった。アップロード時の解析も精度を見たかったので、デモ画面で大きめのcsvをアップロードしても ちゃんと解析されていたしパフォーマンスも悪くなかった。 マルチスレッドには対応していないとのこと。

管理画面とかで、必ずと言っていい程csvをダウンロードしたいというニーズはあると思う。 本来はサーバー側で、作った方が良さそうではあるが、フロントエンドだけでサクッと作るならこのライブラリはとても良い。