個人開発をしている時に、「Vueを使い、CSVファイルをアップロードすると、JSON形式に変換してくれる処理」を書きました。
検索しても、「CSV→JSONへの変換が簡単に出来るライブラリの使い方」について、詳しく書いている記事がありませんでした。ということで、「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");
これで、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形式に変換して、コンソールログに出力しています。
また、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は少し癖がありますけど、便利なライブラリがたくさんあり、「サクッと書けるなぁ〜」という印象を受けました！ぜひとも、この便利なライブラリを使ってみて下さい！
コメント