ここではJavaScriptからCSVファイルを読み込む方法について説明します。
JavaScriptではJSON形式のファイルがよく使われますが、CSVファイルも互換性の高さから様々な場面で利用されます。ここでは、以下のようなsample.csvを文字列として読み込み、使いやすい二次元配列に変換するプログラムについて説明します。
sample.csv
|
1 2 3 |
0001,itemA,500yen 0002,itemB,300yen 0003,itemC,400yen |
サンプルプログラム
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
//CSVファイルを読み込む関数getCSV()の定義 function getCSV(){ var req = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成 req.open("get", "sample.csv", true); // アクセスするファイルを指定 req.send(null); // HTTPリクエストの発行 // レスポンスが返ってきたらconvertCSVtoArray()を呼ぶ req.onload = function(){ convertCSVtoArray(req.responseText); // 渡されるのは読み込んだCSVデータ } } // 読み込んだCSVデータを二次元配列に変換する関数convertCSVtoArray()の定義 function convertCSVtoArray(str){ // 読み込んだCSVデータが文字列として渡される var result = []; // 最終的な二次元配列を入れるための配列 var tmp = str.split("\n"); // 改行を区切り文字として行を要素とした配列を生成 // 各行ごとにカンマで区切った文字列を要素とした二次元配列を生成 for(var i=0;i<tmp.length;++i){ result[i] = tmp[i].split(','); } alert(result[1][2]); // 300yen } getCSV(); //最初に実行される |
プログラムは、大きく分けてCSVファイルを読み込む処理と、読み込んだCSVファイルの中身を配列に変換する処理からなります。
はじめに実行されるのは最終行のgetCSV()です。getCSV()では、XMLHttpRequest()を使ってCSVファイルを文字列として読み込んだ後、convertCSVtoArray()を呼んでいます。
XMLHttpRequest()はHTTPを使って他のリソースを取得します。ここでは、new演算子で生成したオブジェクトのメソッドであるopen()、send()を使ってリソースを指定し、リクエストを発行しています。onloadは「読み込み完了」を意味するイベントで、読み込みが終了したらconvertCSVtoArray()を呼び出します。CSVファイルの中身はresponseTextに入っているので、これを引数として渡します。
convertCSVtoArray()は、引数として渡されたCSVデータを改行とカンマを区切りとした二次元配列に変換する処理を行います。responseTextはテキストデータなので、split()を使ってまず改行区切りで行を単位とした配列を生成します。同様に、各行についてカンマを区切りとした配列を生成することで、結果的にresultは次のような二次元配列となります。
|
1 2 3 4 5 |
[ ['0001','itemA','500yen'], ['0002','itemB','300yen'], ['0003','itemC','400yen'] ] |
上記のプログラムでは、alert()で配列の任意の要素を表示しています。
