リファクタリングとは？

After：振る舞いはそのまま、中身を分割したコード

同じ「今日の売上合計を表示する」機能ですが、 日付計算・集計ロジック・描画処理を それぞれ独立した関数に切り出しています。 結果として、テスト・再利用・仕様変更がしやすい形になります。

// ---- ドメイン寄りの小さな関数群 --------------------------

function formatDateYYYYMMDD(date) {
	const yyyy = date.getFullYear();
	const mm = ('0' + (date.getMonth() + 1)).slice(-2);
	const dd = ('0' + date.getDate()).slice(-2);
	return `${yyyy}-${mm}-${dd}`;
}

function formatCurrencyJPY(amount) {
	return amount
		.toString()
		.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

/**
 * 売上配列から、指定した日付の合計金額を計算する
 * @param {Array<{date: string, amount: number}>} sales
 * @param {string} targetDate YYYY-MM-DD
 */
function calculateTotalSalesForDate(sales, targetDate) {
	return sales
		.filter((row) => row.date === targetDate)
		.reduce((sum, row) => sum + row.amount, 0);
}

/**
 * API から全売上一覧を取得する
 * @returns {Promise<Array<{date: string, amount: number}>>}
 */
function fetchAllSales() {
	return fetch('/api/sales').then((res) => {
		if (!res.ok) {
			throw new Error('API error');
		}
		return res.json();
	});
}

/**
 * 計算結果を DOM に描画する
 * @param {HTMLElement} container
 * @param {number} total
 */
function renderTodaySales(container, total) {
	if (total === 0) {
		container.innerHTML = '<p>本日の売上はありません。</p>';
		return;
	}
	const formatted = formatCurrencyJPY(total);
	container.innerHTML =
		'<p>本日の売上合計：<strong>' +
		formatted +
		'</strong> 円</p>';
}

// ---- UI 側：イベントハンドラは「流れ」を組み立てるだけ --------

document.getElementById('show-today-sales').addEventListener('click', function () {
	const resultEl = document.getElementById('today-sales-result');
	resultEl.textContent = '読み込み中...';

	const todayStr = formatDateYYYYMMDD(new Date());

	fetchAllSales()
		.then((sales) => {
			const total = calculateTotalSalesForDate(sales, todayStr);
			renderTodaySales(resultEl, total);
		})
		.catch((err) => {
			console.error(err);
			resultEl.innerHTML =
				'<p class="error">売上の取得に失敗しました。</p>';
		});
});
			

イベントハンドラは「読み込み中表示 → データ取得 → 集計 → 描画」という 処理の流れだけを表現し、 個々のロジックは専用の関数に追い出されています。 「対象日付を変える」「期間合計にする」「グラフ表示にする」といった変更も、 関数単位で見通しよく修正できます。