はじめに

どうも、小トロです～

フロントエンドのフレームワークVueでできたことをメモ用に記事にしました。

今回はcsvファイルを直接読み込む方法についてです！

はじめに
事前準備
実装

事前準備

csvファイルを直接読み込む前にいくつかVueに設定が必要です。

まずは、必要なライブラリモジュールをインストールしましょう。

①csv-loaderのインストール

csv-loaderは、csvファイルを読み込むのに必要なライブラリモジュールなのでこれをインストールします。

# npm install csv-loader

②papaparseのインストール

続いてpapaparseは、csvファイルを読み込んだ後パース(解析)してくれるライブラリモジュールです。

これを入れることで、プログラム上でcsvデータを扱うことができます。

# npm install papaparse

③vue.config.jsの作成

そしてcsv-loaderをvueに認識してもらうためにvue.config.jsを作成します。

module.exports = {
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /.csv$/,
                    loader: 'csv-loader'
                }
            ]
        }
    }
}

④jest-csv-transformer.jsの作成

vueではjestを使ってテストを作成すると思います。

csvをインポートしたプログラムのテストをjestで立ち上げる際、jestがcsvインポートを認識しないといけないです。

それを解決させるために作成します。

const Papa = require("papaparse");

module.exports = {
    process(fileContent) {
        return (
            "module.exports = " + JSON.stringify(Papa.parse(fileContent).data) + ";"
        );
    },
};

⑤jest.config.jsの作成

jest-csv-transformer.jsをjestに読み込ませるための設定ファイルです。

jest-csv-transformer.jsと同様にテストで必要になります。

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  transform: {
    "^.+\.csv$": "./jest-csv-transformer.js",
  }
}

これで事前準備が完了です。

実装

実装はかなり簡単にできます。

import csv from "../../csv/prod.csv";

export const getCsv = () => {
    return csv;
};

この状態のcsvデータは配列で参照できます。

SHOW Toro TIME

ゲームや技術的なこと、最近の気になることをどんどん書いていくブログです

【Vue】Vue.jsのお勉強メモ③(csvファイルを直接読み込む方法)