JavaScriptでスプレッドシートから直で取得したCSVをparseして使う

Googleのスプレッドシートにはウェブに公開という機能があるんですが、それを使うといい感じにデータソースして使えるんじゃないかと思い試してみました。

概要

スプレッドシートに色々書いたものをデータソースとしてJavaScriptでCSVとして取得、それをいい感じにparseしてオブジェクトとして扱う。

今回は

Nuxt.js
axios
csv-parse

をつかってみます。

手順

スプレッドシート

スプレッドシートをウェブに公開する。

ファイル -> ウェブに公開
f:id:kxn4t:20200426004736p:plain:h350

カンマ区切りを指定して公開
f:id:kxn4t:20200426005956p:plain:w400

このURLを使うとCSV形式で落としてくることができるようになります。便利。

また、parseするときにプロパティ名として使うので、ヘッダー行はいい感じの名前にしておきます。
f:id:kxn4t:20200426011112p:plain:w600

axios

Nuxt.jsなのでaxiosを使いますが、別にXMLHttpRequestとかでもいいと思います。

pageで使うならasyncDataがいいと思いますが、とりあえずmountedで。
こんな感じでひとまず読み込んだ時に取ってこれます。

export default {
  async mounted() {
    try {
      const csv = await this.$axios.$get(
        'スプレッドシートのURL'
      )
      console.log(csv)
    } catch (error) {
      // noop
    }
  }
}

無事csvが返ってきているとコンソールに出るはず。

csv-parse

CSVのparserとしてcsv-parseを使いました。

CSV Parse - Usage

yarn add csv-parse

で、今回は同期的に使いたいので、importはcsv-parse/lib/syncを使う必要があります。

CSV Parse - Sync API

const csvParse = require('csv-parse/lib/sync')

syncを使うと、parseするとparse後のオブジェクトがそのまま返ってくるので使いやすいです。

optionとしてcolumns: trueを指定することで、ヘッダー行の名前がついた状態でparseされます。

this.items = csvParse(csv, { columns: true })

最終的にこうなる

まとめるとこんな感じです。

<script>
const csvParse = require('csv-parse/lib/sync')

export default {
  data() {
    return {
      items: []
    }
  },
  async mounted() {
    try {
      const csv = await this.$axios.$get(
        'スプレッドシートのURL'
      )
      this.items = csvParse(csv, { columns: true })
    } catch (error) {
      // noop
    }
  }
}
</script>