JavaScriptでCSVを読み込み、HTMLのTable要素の表として表示させます。

今回は例として以下のCSVを用意しました。番号、都道府県、年齢、職業、性別の値を持っているものとします。

1,東京都,24歳,学生,その他
2,北海道,35歳,会社員,女性
3,神奈川県,30歳,自営業,男性
4,大阪府,15歳,学生,女性
5,沖縄県,29歳,会社員,男性

HTML側ではベースとなるtable要素を用意しておきます。

<table id="tableCSV">
<tr>
 <th>番号</th>
 <th>都道府県</th>
 <th>年齢</th>
 <th>職業</th>
 <th>性別</th>
</tr>
</table>

以下が実行コードのJavaScriptとなります。

async function loadCSV() {
 const data = await fetch("data.csv");
 const resCSV = await data.text();
 const dataCSV = resCSV.trim().split(/\r\n|\n/).map(line => line.split(','));
 const htmlData = dataCSV.map(data => `<tr><th>${data[0]}</th><td>${data[1]}</td><td>${data[2]}</td><td>${data[3]}</td><td>${data[4]}</td></tr>`).join('');
 document.getElementById('tableCSV').insertAdjacentHTML('beforeend',htmlData);
}
loadCSV();

仕組みとしては外部のCSVファイルをテキストとして読み込んだ後、その値を1行毎分割し配列に変換します。さらにその配列をカンマで区切ってまた配列に変換し、その値をHTMLに埋め込んで表示処理をさせます。

実行した画面は以下のようになります。見た目はCSSで調整ください。

注意点としては、文字エンコーディングがHTML側と同じ（UTF-8等）でないと、マルチバイトの文字を読み込んだ際に文字化けしてしまうことです。正常に処理するために外部ファイル、JavaScript、HTMLの文字コードを一致させるようにしましょう（とくにMicrosoftExcelでCSV形式で保存するとデフォルトではShift_JISとなってしまうため）。

おしまい♥