【初心者〜現場で活躍まで】挫折しないPython勉強方法もっと知る

VueでCSV→JSON変換。vue-papa-parseの使い方

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

検索しても、「CSV→JSONへの変換が簡単に出来るライブラリの使い方」について、詳しく書いている記事がありませんでした。ということで、「vue-papa-parse」というライブラリがすごく使いやすかったので、今回はその共有となります。

非常に簡単に変換処理が書くことが出来ましたので、vue-papa-parseの使い方はこの記事でマスターできます。

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

vue-papa-parseを使うことで、非常に短い行数で書けます。とても便利なので、ぜひマスターして下さい。

この記事を書いた人

エソラ
  • エンジニア歴10数年
  • SIerでDX推進を仕事に
  • Python、AWSを使ったアーキテクチャ設計・アプリ開発が得意
  • 30代、2児の父でサウナ好き
  • [icon-class=”icon-twitter”]Twitter

未経験から、フロントエンドエンジニアになりたい人は以下がピッタリ

目次

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

ここまでお読みいただき、ありがとうございました。

役に立った、面白かったと思ったら、SNSでシェアしてくれると嬉しいです。

エソラ

もし分からないことがあれば、お問い合わせTwitterにご連絡をいただけると嬉しいです。(Twitterの方が返信早いかも…)

\ 更新の励みになるので、ポチッとしてね /

エソラ

他にもスキルアップやキャリアアップの役に立つ情報が満載です。他の記事も読んで、ゆっくりしていってね!

フロントエンドのおすすめ勉強方法

エソラ

フロントエンドの勉強をするなら、Udemyの講座がおすすめです。

Udemyの魅力
  1. 学習コンテンツ量が多いので、未経験から現場で活躍するレベルまで幅広い
  2. 疲れていても、動画で楽に学習出来る
  3. 疑問を気軽に聞けるQAシステムがあり、初心者でも安心
  4. セールが多数開催されるので、の料金は技術書よりも安い場合がある
  5. 30日以内なら、返金も可能

まとめると、「動画で楽に勉強が出来て、質問も出来て、しかも安い」という点が、の魅力です。

フロントエンドのオススメ講座は以下の通り。

フロントエンドの知識が全くないという初心者向け
フロントエンドの知識がある程度ついてきた中級者向け
UI開発に特化したJavaScriptライブラリの使い方を学びたい人向け
現場に出る前にチーム開発に必要なスキルの基礎を学びたい人向け

各講座の詳細については、以下で完全理解できます。

エソラ

効率の良い勉強方法で、楽にスキルアップしましょう。

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

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

コメント

コメントする

目次