zip358.com:JavaScript(js)でcsvファイルを読み込み自動計算する(合計sum)2025年度版

おはようございます.本日（2025-10-23）はぽかぽか陽気でした、そんなお昼すぎに記事を書いています、さて”JavaScript(js)でcsvファイルを読み込み自動計算する(合計sum)”がたまに読まれているので、いまの自分ではどんな感じになるのか作ってみたら面倒くさいコードになってしまいましたorz.

自虐ネタになりますが、こう書いた方が汎用的や拡張性があるように思えます.もっと改善は可能です.例えば文字がある列は合計計算をパスして実行するなどを処理を入れることやエレメントが存在しない場合はエラーを起こさないようなコードに置き換えるとか.

まだまだ改善の余地はあると思います、勉強すればするほど昔のコードがダサくなる….昔のコードを見たくない今日このごろです.

2025年度版もあんまり良いとは言えないのは分かっているけどネタ的に来年にも読まれていたら改善した物を書いてみます.

明日へ続く

1,2,3
4,5,6
7,8,9

"use strict";
class CsvCalc
{
	constructor (filename,elementId) 
	{
		this.filename = filename;
		this.elementId = elementId;
		this.datas = null;
		this.sum = [];
	}
	async getData()
	{
		try {
			const response = await fetch(this.filename);
			if (!response.ok) throw new Error(`HTTP Error: ${response.status}`);
			this.datas = await response.text();
		} catch (err) {
			console.error("データ取得エラー:", err);
			this.datas = "";
		}
		return this;
	}
	csvSplit()
	{	
		let separate1 = /\r?\n/;
		let separate2 = ",";
		let datas = (this.datas?.split(separate1))?.map(function(row){
			return (row?.split(separate2))?.map(function(col){
				return col;
			});
		});
		this.datas = datas.filter(row => row.length > 0);
		return this;
	}
	getSum()
	{
		let sum =[];
		for (const data of this.datas) {
            (data).map(function(val,index,array){
                sum[index] = (isNaN(parseInt(sum[index]))?0:parseInt(sum[index])) + parseInt(array[index]);
            });
		}
		this.sum = sum;
		return this;
	}

	printSum()
	{
		document.getElementById(this.elementId).textContent = this.sum.join(',');
	}
}

(async ()=>{
	await (new CsvCalc("math.csv?", "sum"))
		.getData()
		.then(obj => obj.csvSplit().getSum().printSum());
})();