JavaScriptでCSVファイルを読み込む方法

ここではJavaScriptからCSVファイルを読み込む方法について説明します。

JavaScriptではJSON形式のファイルがよく使われますが、CSVファイルも互換性の高さから様々な場面で利用されます。ここでは、以下のようなsample.csvを文字列として読み込み、使いやすい二次元配列に変換するプログラムについて説明します。

sample.csv

サンプルプログラム

プログラムは、大きく分けてCSVファイルを読み込む処理と、読み込んだCSVファイルの中身を配列に変換する処理からなります。

はじめに実行されるのは最終行のgetCSV()です。getCSV()では、XMLHttpRequest()を使ってCSVファイルを文字列として読み込んだ後、convertCSVtoArray()を呼んでいます。

XMLHttpRequest()はHTTPを使って他のリソースを取得します。ここでは、new演算子で生成したオブジェクトのメソッドであるopen()、send()を使ってリソースを指定し、リクエストを発行しています。onloadは「読み込み完了」を意味するイベントで、読み込みが終了したらconvertCSVtoArray()を呼び出します。CSVファイルの中身はresponseTextに入っているので、これを引数として渡します。

convertCSVtoArray()は、引数として渡されたCSVデータを改行とカンマを区切りとした二次元配列に変換する処理を行います。responseTextはテキストデータなので、split()を使ってまず改行区切りで行を単位とした配列を生成します。同様に、各行についてカンマを区切りとした配列を生成することで、結果的にresultは次のような二次元配列となります。

上記のプログラムでは、alert()で配列の任意の要素を表示しています。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集

購読

平日・毎朝更新中