vueでCSVダウンロードしてみました - アクトインディ開発者ブログ

ohataです

今のプロダクトで管理画面をもう少し充実させたいなと思っていて、せっかくなのでチームの学びも兼ねてvueを導入していこうと思います。ユーザー側の機能に導入する前に、利用者が制限されている管理画面から導入していくのはよくあると思います。せっかくなので最終目標は、[運用で使う人が使いたくてたまらない！]と思うほどの快適なUIを目指していきます。

vueにする理由

Reactなども検討できたのですが、今回はvueにしました

ノウハウがある
- 関係メンバーがサーバーサイドよりの人がほとんどなので、学んでいくために導入事例がある方が安心してチャレンジできる
学習コストの低さ
- 表示部分はデザイナーと一緒に開発していくので、JSXを学習してもらうコストをかけたくない

なんだかんだ言っても、一番のモチベーションは自分がちょっと使った事がありもう少し深く学んでいきたいなーというのが一番大きいです。

追加する機能

管理画面でよく使う機能でCSV(TSV)のダウンロード機能があります。

管理画面内で全て完結すれば良いのですが、別のサービスで統計分析したり営業的な資料をまとめたりするには、データ自体を様々な用途で利用したいことはよくあるので、あると何かと便利な機能です。

また、運用初期段階では要件が明確になっていない事も多いので運用しながら必要機能を検討することもできると思います。

導入

vue-json-to-csv

今回はこちらのnpmを導入しようと思います

https://www.npmjs.com/package/vue-json-to-csv

インストール

npm

npm i vue-json-to-csv

yarn

yarn add vue-json-to-csv

基本パターン

まずは簡単に動作確認してみましょうサンプルそのままですが動作確認していきます

<template>
  <div>
    <vue-json-to-csv :json-data="[
        { name: 'Joe', surname: 'Roe' },
        { name: 'John', surname: 'Doe' }
      ]"
      :labels="{ name: { title: 'First name' } }"
      >
      <button>
        <b>My custom button</b>
      </button>
    </vue-json-to-csv>
  </div>
</template>

<script>
import Vue from 'vue'
import VueJsonToCsv from 'vue-json-to-csv' // eslint-disable-line

Vue.use(VueJsonToCsv)

export default {
  name: 'CsvDownload'
  components: {
    VueJsonToCsv
  }
}
</script>

[My custom button]をクリックするとCSV形式でダウンロードできると思います。ひさびさ使ったのでtemplate直下のルート要素を複数指定しまってエラーになってしまいました。あとimport時に怒られたのですが、サンプルなので // eslint-disable-lineで回避しています

使いそうなパターン

上のサンプルですと、データがハードコーディングになってしまうので、実業務ではほぼ使えないと思いますデータはtemplateと別管理にしたいと思います。

<template>
  <div>
    <div>hoge1234</div>
    <vue-json-to-csv :json-data=json_data :labels=labels>
      <button @click=download>
        <b>My custom button</b>
      </button>
    </vue-json-to-csv>
  </div>
</template>

<script>
import Vue from 'vue'
import VueJsonToCsv from 'vue-json-to-csv' // eslint-disable-line

Vue.use(VueJsonToCsv)

export default {
  name: 'CsvDownload',
  data () {
    return {
      labels: { name: { title: 'First name' } },
      json_data: []
    }
  },
  components: {
    VueJsonToCsv
  },
  methods: {
    download () {
      console.log('OK')
      this.json_data = [
        { name: 'hige', surname: 'Roe' },
        { name: 'John', surname: 'Doe' }
      ]
      this.json_data.push({ name: 'hige', surname: 'Roe', email: 'hogehoge@example.com' })
    }
  }
}
</script>

dowloadというmethodを追加して、フックすることにより非同期でデータを取ってきたり、[labels]指定で出力項目を管理画面上で選択できるようにする事もできます。

まとめ

今回はリハビリを兼ねてvueの動作確認をしてみました。画面上でサクサク変わるのは開発をしていてもやはり楽しいですね！もう少し開発が進んでいったら、応用パターンをいろいろ紹介できればと思います。