Vue.jsでCSVを読み込んで表示する。


# はじめに

Vue.jsでCSVを読み込んで表示するまでの過程を書きました。


# 環境の情報
OS
macOS Big Sur 11.3

### バージョンなど

```
%  vue -V
@vue/cli 5.0.8
```

```
$ node -v
v18.0.0
```

```
$ npm -v
8.6.0
```



# 注意
最新の状態を確認して下さい。

# 参考さまはこちら
https://www.npmjs.com/package/csv-parser
https://docs.github.com/ja/get-started/writing-on-github/editing-and-sharing-content-with-gists/creating-gists

# 最終更新日
2023年7月14日


# 行ったこと

プロジェクトは問題なく起動する前提です。

##### csv-parserをインストールします。

```
% npm install csv-parser
```
csv-parser はパッケージです。
Node.js の環境で CSV ファイルをパース（解析）します。
CSV ファイルからデータを読み込み、オブジェクトとして扱うことができます。


##### stream-browserifyをインストールします。

```
% npm install stream-browserify
```
stream-browserifyはパッケージです。
Node.js の stream モジュールをブラウザ環境で使うことができるようにします。
stream モジュールは、ストリーム（データの連続的なフロー）の処理をサポートするための基本的な機能があります。


##### csvtojsonをインストールします。

```
npm install csvtojson
```

csvtojsonはモジュールです。
CSVの形式のデータをJavaScriptのオブジェクト形式（JSON）に変換するためにあります。

##### vue.config.jsファイルに以下を追加します。

```my-project/vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})


//ここに追加
module.exports = {
  configureWebpack: {
    resolve: {
      fallback: {
        stream: require.resolve('stream-browserify')
      }
    }
  }
};
```


Webpackの設定（configureWebpack）を変えて、stream-browserifyパッケージを使えるようにするためです。
ブラウザ環境でもストリームを使えるようになります。


##### ルーティング作ります。

ルーティングは（省略して）こんな感じです。

```router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import CSV from '@/components/CSV.vue'

const routes = [
  {
    path: '/csv',
    name: 'csv',
    component: CSV
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router
```

##### 表示はこのようになります。

```components/CSV.vue
<template>
  <div>
    <table>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
      <tr v-for="record in records" :key="record">
        <td v-for="field in record" :key="field">{{ field }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from 'axios';
import { csv } from 'csvtojson';

export default {
  data() {
    return {
      headers: [],
      records: [],
    };
  },
  mounted() {
    axios.get('sample.csv')
      .then(response => {
        csv()
          .fromString(response.data)
          .then(jsonArray => {
            this.headers = Object.keys(jsonArray[0]);
            this.records = jsonArray;
          });
      })
      .catch(error => {
        console.error(error);
      });
  },
};
</script>
```

画面が問題なく表示されていることを確認してください。

![スクリーンショット 2023-07-14 20.26.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/fa816e51-10f6-1261-e342-68b04174ce5f.png)


CSVファイルをどこかに作ってみます。
試しにこちらを作ってみます。

https://gist.github.com/


![スクリーンショット 2023-07-14 20.20.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/ee2b54dc-5129-cf35-106c-76466cf0e58c.png)

![スクリーンショット 2023-07-14 20.20.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/ed3ccfe5-2df3-e6cf-149f-65d970011699.png)


こちらへ書き換えます。


```components/CSV.vue
axios.get('https://gist.githubusercontent.com/user/XXXXXXXX/sample.csv')
```

# 終わりに

じゃーん！

![スクリーンショット 2023-07-14 20.27.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/f9701f91-ba4b-0f3c-01a4-52a214272231.png)