先日クライアントワークで、CSVで管理しているデータをサイト上に表示させたいというような要件があり、いろいろ調べてみるとJavaScriptで出来そうという情報が見つかったので試してみました。CSVとは半角コンマで区切られた値のことで、詳しくはこちらの記事「データ分析や登録などで使用するCSVファイルを扱う時の注意点まとめ」でもまとめていますのでご参考に。
今回は、外部ファイルとして別のディレクトリにあるCSVファイルをHTTPで読み込み、その値をHTML上で確認できるように表組みでまとめていきます。ここではサンプルとしてこのようなデータのCSVファイルを使っています。
【CSV】
名前,性別,年齢,血液型,趣味 山田,男性,35,A,ドライブ 田中,女性,29,B,読書 中村,男性,47,AB,ゴルフ 村本,女性,38,O,料理
この値がそのまま表組みで表示されるようなイメージですね。フロントエンドでデータを取扱う際には、一般的にはJSON形式が多いかと思いますが、CSVでは文字列として扱うので、データを加工するために少し手間をかける必要があります。それでは早速コードを見ていきます。
（参考記事）
「fetch APIで外部のJSONデータを取得する」
「外部のJSONデータをjQueryを使ってHTMLへ出力する」
XMLHttpRequestで外部CSVデータを読み込む
まずは外部のCSVデータを読み込むところから見ていきます。確認用として値の出力先に適当なHTML要素を作成しておきます。そしてCSVを読み込む処理を書いていきます。CSVを読み込むのにHTTP通信で行いますが、今回は、XMLHttpRequest()を使います。XMLHttpRequestのイベントハンドラである、「open()」の第一引数にはHTTPのリクエストメソッドのGETを指定し、第二引数には送信するソースファイルのURLを指定します。第三引数は「true」を指定すると非同期通信とすることができます。続けて「send()」でリクエストを送信します。
【HTML】※一部抜粋
<div id="output_csv"></div>
【javascript】
const outputElement = document.getElementById('output_csv');
function getCsvData(dataPath) {
const request = new XMLHttpRequest();
request.addEventListener('load', (event) => {
const response = event.target.responseText;
outputElement.innerHTML = response;
});
request.open('GET', dataPath, true);
request.send();
}
getCsvData('./example.csv');
リクエストがロードされた時に、「responseText」でレスポンスの中身である文字列を返すようにします。この中にはCSVのデータが文字列として含まれています。これら一連の処理を関数として定義しておきます。ここでは引数にCSVファイルのパスを指定できるようにしています。
この処理を実際にブラウザで確認してみます。HTML上にはCSVのデータが文字列として出力され、コンソールでもCSVの値が確認することができます。ちなみにXMLHttpRequestでHTTP通信を行う場合には、ローカルファイルですとクロスオリジンの制約でエラーとなりますので、localhostを起動したり、ウェブサーバー上で確認するようにします。
CSVの文字列から配列に変換
先ほどのコードでCSVデータを取得できましたが、データとしては1つの文字列となっているので、データを加工する場合にはいろいろと不便です。そこでCSVデータを文字列から配列に変換していきます。ここでは配列変換用に新たな関数を定義し、先ほどの関数内で呼び出すようにしていきます。
【javascript】
const outputElement = document.getElementById('output_csv');
function getCsvData(dataPath) {
const request = new XMLHttpRequest();
request.addEventListener('load', (event) => {
const response = event.target.responseText;
convertArray(response);
});
request.open('GET', dataPath, true);
request.send();
}
function convertArray(data) {
const dataArray = [];
const dataString = data.split('n');
for (let i = 0; i < dataString.length; i++) {
dataArray[i] = dataString[i].split(',');
}
outputElement.innerHTML = dataArray;
}
getCsvData('./example.csv');
文字列を配列に変換する関数では、まず空の配列を用意していき、その中に値を入れていることで配列に変えていきます。今は1つの文字列となっていますので、まずは改行文字である「n」で分割します。これがCSVでの表組みの行単位になります。そして各行ごとに、カンマごとにデータをバラバラにしていき、1つづつ配列に代入していきます。これで配列データが出来上がります。ブラウザ上に出してみると、見た目は文字列と変わりませんが、コンソールではきちんと配列型のデータになっているのが確認できます。
CSVデータを表組みでHTML上に出力
データが配列になったので、あとは値に対してHTMLとして出力する処理を繰り返していきます。過去記事「JavaScriptで配列を扱う時によく使うメソッド＃2【配列データに対して繰り返し処理を行う】」でまとめています「forEach()」メソッドを使います。今回は表組みでの出力を行いますので、HTML側にtable要素を用意しておき、trとtdタグで囲まれる形で出力していきます。入れ子になっているのは1つ目のループで行単位の処理を行い、2つ目で値ごとの処理をしている形になります。
【HTML】※一部抜粋
<table> <tbody id="output_csv"></tbody> </table>
【javascript】
const outputElement = document.getElementById('output_csv');
function getCsvData(dataPath) {
const request = new XMLHttpRequest();
request.addEventListener('load', (event) => {
const response = event.target.responseText;
convertArray(response);
});
request.open('GET', dataPath, true);
request.send();
}
function convertArray(data) {
const dataArray = [];
const dataString = data.split('n');
for (let i = 0; i < dataString.length; i++) {
dataArray[i] = dataString[i].split(',');
}
let insertElement = '';
dataArray.forEach((element) => {
insertElement += '<tr>';
element.forEach((childElement) => {
insertElement += `<td>${childElement}</td>`
});
insertElement += '</tr>';
});
outputElement.innerHTML = insertElement;
}
getCsvData('./example.csv');
ブラウザで確認してみると、このような形でエクセルなどの表計算ソフトと同じような表組みで表示されているのが確認できます。HTMLタグも出力されているのがわかります。
今回は外部のCSVデータを読み込んで、値をHTML上に展開していく方法をまとめました。JSON形式とは異なり、CSVの場合にはエクセルなどの表計算ソフトで管理できますので、クライアントさんにとっては扱いやすいのかもしれません。ただし、JavaScriptで処理する場合には少し手間になるので、ぜひ覚えておきたいですね。
（参考にさせて頂いたサイト）
JavaScriptでCSVファイルを読み込む方法
