Kindleで技術書が最大70%OFFのセール中!詳しくはこちら

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

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

検索しても、「CSV→JSONへの変換が簡単に出来るライブラリの使い方」について、詳しく書いている記事がありませんでした。ということで、「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に設定を組み込みます。

具体的には以下のように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の設定は完了です!

いざ、CSV→JSON変換を試してみる!

では、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

JavaScriptは少し癖がありますけど、便利なライブラリがたくさんあり、「サクッと書けるなぁ〜」という印象を受けました!ぜひとも、この便利なライブラリを使ってみて下さい!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次
閉じる