今回の記事では、CSVデータを読み込んでブラウザ画面で表示させるサンプルコードを紹介します。
それでは早速紹介していきましょう。
■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】
要件
CSVデータに格納されたユーザーの属性に関するデータを出力したい。
完成形
非常にシンプルではありますが、CSVデータの内容を下記のようなテーブルで出力させます。
実装
結論だけ知りたい方のためにまずはソースコードのみ紹介します。CSVデータの中身も公開します。
CSV読み込みのファイルのパスは適宜書き換えていただく必要がありますが、基本的にはコピペで動作します。
CSV
名前,性別,年齢,趣味
name1,man,21,サウナ
name2,woman,22,筋トレ
name3,man,23,スーパー銭湯
name4,woman,24,瞑想HTML
<table id="output_csv"></table>
<script src="./script.js"></script>CSS
table {
border-collapse: collapse;
}
td {
padding: 3px 10px;
border: 1px solid #333;
}JavaScript
const output_csv_el = document.querySelector('#output_csv');
// CSVの読み込み
function import_csv(csv_path)
{
fetch(csv_path)
.then((res) => {
if(!res.ok) {
console.log('正常にリクエストを処理できませんでした。');
}
return res.text();
})
.then((csv_data) => {
convert_array(csv_data);
})
.catch((error) => {
console.log('エラーが発生しました。');
})
}
// テキストデータを配列に変換
function convert_array(csv_data)
{
let data_array = [];
const data_string = csv_data.split('\n');
for (let i = 0; i < data_string.length; i++) {
data_array[i] = data_string[i].split(',');
}
draw_table(data_array);
}
// テーブル描画
function draw_table(data_array)
{
data_array.forEach(elements => {
const tr = document.createElement('tr');
output_csv_el.appendChild(tr);
elements.forEach(element => {
let td = document.createElement('td');
td.innerText = element
tr.appendChild(td);
});
});
}
import_csv('./js_csv_lesson.csv')■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】
解説
JavaScriptのコードメインで解説を行います。
上記のCSV出力の処理は大きく分けて下記の3フローに分かれています。
- CSVデータの読み込み
- 読み込んだデータを配列に変換
- ループ処理でHTMLを描画
CSVデータの読み込み
function import_csv(csv_path)
{
fetch(csv_path)
.then((res) => {
if(!res.ok) {
console.log('正常にリクエストを処理できませんでした。');
}
return res.text();
})
.then((csv_data) => {
convert_array(csv_data);
})
.catch((error) => {
console.log('エラーが発生しました。');
})
}ファイルの読み込みはfetchメソッドを使用して非同期的に読み込みます。
fetch()について詳しく知りたい方は下記の記事をご覧ください。
【JavaScript】非同期処理の種類と解説② fetch編
ここでやっていることは、正常にCSVファイルを読み込めたら、
テキストに変換して次の処理にデータを渡すだけです。
読み込んだデータを配列に変換
function convert_array(csv_data)
{
let data_array = [];
const data_string = csv_data.split('\n');
for (let i = 0; i < data_string.length; i++) {
data_array[i] = data_string[i].split(',');
}
draw_table(data_array);
}ここでは、読み込んだテキストデータを「改行」を起点に行単位で分割し、
次に行単位に分割されたデータを、「カンマ区切り」で列単位で分割していきます。
処理の後は、下記のような配列が作成されます。
[“name1”, “man”, “21”, “サウナ”]
配列処理が完了したら、最終工程の描画処理に配列を渡します。
ループ処理でHTMLを描画
function draw_table(data_array)
{
data_array.forEach(elements => {
const tr = document.createElement('tr');
output_csv_el.appendChild(tr);
elements.forEach(element => {
let td = document.createElement('td');
td.innerText = element
tr.appendChild(td);
});
});
}受け取った配列をループ処理で描画しています。
行数のループでtr要素を出力した後に、列数のループでtd要素を描画しています。
最後に
CSVデータでのサイト更新は、プログラムさえ組めば、サイト運営で効果的に使用することができます。
CSVに格納したカスタマーレビューや、何らかのデータを表示させ、自動更新を行いたい場合などは、
本記事で紹介したように、サーバー上のCSVデータを読み込んで、配列変換・描画処理をすれば実装できます。
