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

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

どうも、当ブログ(とあるエンジニアのエソラゴト)を運営している、エンジニアのエソラ(@ya6madev)です。

普段はSIer企業でDXとかAI開発をしながら、自社サービスの開発をしています。

CSV→JSONへの変換が簡単に出来るライブラリの使い方

個人開発をしている時に、「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に設定を組み込みます。

具体的には以下のように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

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

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

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

またフロントエンドについてもっと学びたいという方には、Udemyがおすすめです。

よろしければ以下の記事もご確認をお願いします。

関連記事

[afTag id=7893] 未経験からフロントエンドエンジニアになりたい人が多い 近年のエンジニア人気によって、未経験からエンジニアになりたい人が多いようです。 私 フロントエンドエンジニアとは、フロントエンド(ブ[…]

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

もし、「面白かった」、「参考になった」という方がいましたら、以下のソーシャルボタンからシェア頂けると泣いて喜びます!!

エソラ
エソラ
またブログランキングにも参加しています。
よろしければ、ポチッとお願いしまーす!

それでは、良いエンジニアライフをお過ごし下さい!

スキマ時間で効率的に読書をしたいなら、聴く読書「Audible」が最強!

読者
技術の勉強もしないと、どんどんと周りに置いてかれてしまう…
ビジネス書も読まないと、良いサービスが作れない…
自己啓発書も読んでおかないと、出世ができない…でも、そんな時間が自分にはない!
そんな悩みを抱えているのであれば、Audibleが解決策になるかも知れません!
\今なら30日間無料体験!聴く読書で効率的に勉強して、スキルアップしたいなら!/

聴く読書「Audible」がヤバイ!!

AudibleはAmazonが提供している「オーディオブック・サービス」です。
読者
つまり書籍の内容をナレーターが読んでくれるってこと?
そういうことです!
ということで、通勤をしながら、家事育児をしながら読書ができるので、
忙しい人にぴったりです!
書籍のラインナップも豊富で、どんどん新しい書籍が追加されていっているよ!
\今なら30日間無料体験!聴く読書で効率的に勉強して、スキルアップしたいなら!/

Audibleのメリット

読者
良さそうだと思うけど、聴く読書って本当に効果あるの?
聴くだけで本当に頭に入るの?
例えば、音楽を何気なく聴いていると、自然と歌詞が頭に入っているという経験はない?
読者
あるね〜
好きな音楽をヘビロテで聴いていると、自然と歌えるようになっているね!
そうそう!
そんな感じで何度も聴いていれば自然と頭に入っていくよ!
メリットをまとめていくと以下のような感じだね!
読者
なるほど〜!
忙しくても手軽に読書ができて、
記憶にも残りやすく、
当たり前だけど、目を使わないので目にも優しいんだね!
\今なら30日間無料体験!聴く読書で効率的に勉強して、スキルアップしたいなら!/

今なら30日間、無料体験!

読者
試してみたいと思ったけど、本当に自分に必要なサービスなのか分からないな〜
じゃあ、30日間なら無料で体験ができるから、
無料体験期間で使いまくって、合わなければ辞めたら?
無料期間内にサービスを停止したら、お金はかからないよ!
読者
なるほど〜
じゃあ、気軽に始めてみるか!
無料期間内に辞めても、一冊は無料でプレゼントされるから、
一冊もらう目的で登録しても良いと思うよ!
読者
神やん!
さっそく登録してみるよ〜
\今なら30日間無料体験!聴く読書で効率的に勉強して、スキルアップしたいなら!/
最新情報をチェックしよう!