JavaScriptでCSVをHTML表示



## csvファイルを準備
color.csvという色の情報が書かれたcsvファイルを準備しました。
ちなみに今回はcssで使えるカラーネーム一覧表を作ってみました。（全部書くと長いので省略)

```:color.csv
種類,カラーネーム,カラーコード
赤,indianred,#cd5c5c
,lightcoral,#f08080
,salmon,#fa8072
,darksalmon,#e9967a
,lightsalmon,#ffa07a
```

エクセルで以下の感じに作り、csvで書き出しました。
![スクリーンショット 2020-08-19 14.35.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671043/d0850b02-98a3-215e-3726-a79cdb32aa91.png)

## csvの呼び出し

csvデータを読み込むのにHTTP通信が必要なため、[XMLHttpRequest()](https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)を使います。

```html:html
<div id="color_list"></div>
```

```javascript:javascript
const output_svg = document.getElementById('color_list');

function csv_data(dataPath) {
	const request = new XMLHttpRequest(); // HTTPでファイルを読み込む
	request.addEventListener('load', (event) => { // ロードさせ実行
		const response = event.target.responseText; // 受け取ったテキストを返す
		output_svg.innerHTML = response; // 表示
	});
	request.open('GET', dataPath, true); // csvのパスを指定
	request.send();
}
csv_data('color.csv'); // csvのパス

```


HTTP通信で表示させているため、ローカル環境を作るか、サーバーにアップして確認。

ブラウザではこんな感じに表示されます。

![スクリーンショット 2020-08-19 20.51.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671043/d6bc106a-6b83-db8c-88de-a1c796c92f0b.png)

## 文字列から配列に変換
データ加工するために、文字列から配列に変換します。
改行（\n）分けて、それぞれ配列にしていきます。

```javascript:javascript
const output_csv = document.getElementById('color_list');

function csv_data(dataPath) {
	const request = new XMLHttpRequest(); // HTTPでファイルを読み込む
	request.addEventListener('load', (event) => { // ロードさせ実行
		const response = event.target.responseText; // 受け取ったテキストを返す
		csv_array(response); //csv_arrayの関数を実行
	});
	request.open('GET', dataPath, true); // csvのパスを指定
	request.send();
}

function csv_array(data) {
	const dataArray = []; //配列を用意
	const dataString = data.split('\n'); //改行で分割
	for (let i = 0; i < dataString.length; i++) { //あるだけループ
		dataArray[i] = dataString[i].split(',');
	}
	output_csv.innerHTML = dataArray; //表示
	console.log(dataArray);

}
csv_data('color.csv');

```

ブラウザで確認すると、見た目は変わりませんが、コンソール画面では配列になっているのが確認出来ます。
![スクリーンショット 2020-08-19 21.17.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671043/d05bf8d3-a7c8-a123-0daf-5a7bae53eeb0.png)

## tableタグとして、htmlに出力

[forEach()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)を使って、配列の中身をすべて表示
今回はtableタグを使いたいので、trとtdで囲んで表示させる。

```html:html
<table id="color_list"></table>
```
```css:css
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  font-size: 12px;
  padding: .2em .5em;
  border: solid 1px #ccc;
}
```
```javascript:javascript
const output_csv = document.getElementById('color_list');

function csv_data(dataPath) {
	const request = new XMLHttpRequest(); // HTTPでファイルを読み込む
	request.addEventListener('load', (event) => { // ロードさせ実行
		const response = event.target.responseText; // 受け取ったテキストを返す
		csv_array(response); //csv_arrayの関数を実行
	});
	request.open('GET', dataPath, true); // csvのパスを指定
	request.send();
}

function csv_array(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>';
	});
	output_csv.innerHTML = insertElement; // 表示
}
csv_data('color.csv'); // csvのパス
```

ブラウザで確認すると、表の形式で表示されてます。
![スクリーンショット 2020-08-19 23.15.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671043/2e0cebc9-84d2-f750-eec2-f59b6145fdad.png)


## まとめ
csvはjsonと違って一手間必要だけど、エクセルなどで管理しやすいため色々メリットはあると思いました。
お客さんからのエクセルデータを"ただ表示させたい"的なことがあったので作りましたが、更新頻度が低いのでhtmlで書いたほうが良いような気もします。