はじめに
個人開発をしている時に、「Vueを使い、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の設定
具体的には以下のようにします。
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の設定は完了です！
いざ、試してみる！
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形式に変換が出来たと思います。
ぜひとも、この便利なライブラリを使ってみて下さい！