アクセスありがとうございます!次は「とあるエンジニアのエソラゴト」で検索して頂けると嬉しいです!

VueでCSV→JSON変換は「vue-papa-parse」を使うのがすごく便利だった

はじめに

個人開発をしている時に、「Vueを使い、CSVファイルをアップロードすると、JSON形式に変換してくれる処理」を書きました。

「CSV→JSONへの変換が簡単に出来るライブラリの使い方」について、Google検索してもあまり良い記事がなかった。。。

ということで、「vue-papa-parse」というライブラリがすごく使いやすかったので、今回はその共有となります。

非常に簡単に変換処理が書くことが出来ました!

vue-papa-parseの使い方はこの記事でマスター出来ます!

最終的には、以下のようなものを目指します。

既に存在しているライブラリを使うことで、非常に短いソースコードで目的の処理が書けますので、是非ともこのライブラリの使い方をチェックしてみて欲しいと思います!

vue-papa-parseの使い方

vue-papa-parseのインストール

vue-papa-parseをインストールするには、以下のコマンドをMacの場合はターミナル、Windowsの場合はコマンドプロンプトで打ち込んで下さい。

# npmを使う場合
npm i vue-papa-parse

# yarnを使う場合
yarn add vue-papa-parse

すると、package.jsonに以下の行が追加されます。

{
略
  "dependencies": {
    "bootstrap-vue": "^2.11.0",
    "core-js": "^3.6.4",
    "vue": "^2.6.11",
    "vue-papa-parse": "^1.3.0"
  },
略
}

これで、インストールが完了しました。

vue-papa-parseの設定

インストールしたら、main.jsに設定を組み込みます。

具体的には以下のようにします。

import Vue from "vue";
import App from "./App.vue";
import VuePapaParse from "vue-papa-parse";
import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Vue.use(VuePapaParse);
Vue.use(BootstrapVue);
Vue.use(BootstrapVueIcons);
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");

3行目にimport文を足して、8行目にプラグインの使用を許可する命令を追加しました。

これで、vue-papa-parseの設定は完了です!

いざ、試してみる!

では、vue-papa-parseを試します。

formにCSVファイルをアップロードして、そのCSVファイルの内容をJSON形式に変換します。

ファイル名は「FileInput.vue」で、サンプルコードは以下になります!

<template>
  <div>
    <b-form @submit="onSubmit">
      <b-form-file
        v-model="file"
        :state="Boolean(file)"
        accept=".csv"
        placeholder="Choose a file or drop it here..."
        drop-placeholder="Drop file here..."
      ></b-form-file>

      <b-button type="submit" variant="primary">Submit</b-button>
    </b-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      csvData: {},
    };
  },
  methods: {
    onSubmit(evt) {
      evt.preventDefault();
      this.$papa.parse(this.file, {
        header: true,
        complete: function(results) {
          this.csvData = results.data;
          console.log(this.csvData);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>

CSVのファイルをJSON形式に変換して、コンソールログに出力しています。

JSON形式にしたあとは、それをPOSTメソッドで投げて、DB登録するなり好きにして下さい!

また、App.vueは以下のようになります。

<template>
  <div>
    <FileInput />
  </div>
</template>

<script>
import FileInput from "./components/FileInput.vue";

export default {
  name: "App",
  components: {
    FileInput,
  },
};
</script>

<style></style>

これで上記のgifの通りのことが出来たと思います!

もし同じように出来ていなかったら、何か設定にミスがあるかと思いますので、この記事をよく見直して下さい!

すごく簡単だったvue-papa-parse

いかがだったでしょうか?

ライブラリをインストールして、すごく簡単にCSVからJSON形式に変換が出来たと思います。

JavaScriptは少し癖がありますけど、便利なライブラリがたくさんあり、サクッと書けるなぁ〜という印象を受けました!

ぜひとも、この便利なライブラリを使ってみて下さい!

最新情報をチェックしよう!

Vueについて知りたいの最新記事8件