はじめに

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>

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

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

こちらへ書き換えます。