リファクタリングとは？
AI時代の「AIフレンドリー」改善術を図とコードで解説！

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>';
		});
});
			

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

AI視点: 責務が明確なため、狙い通りの差分提案・局所修正・テスト生成が安定しやすくなります。 また、このリファクタリング済みのコードをAIに渡す際、例えば、

• 『この関数は〇〇の責務に特化しているので、ロジックだけ修正して』
• 『calculateTotalSalesForDate のロジックだけ修正して。I/Oは触らないで。』

After：意図をHTML属性で宣言（htmx）

<button
	hx-get="/profile/summary"
	hx-target="#profile-summary"
	hx-swap="innerHTML">
	プロフィール更新
</button>

<div id="profile-summary"></div>
			

「どこから取得し、どこへ反映するか」がタグ上で読めるため、実装意図が伝わりやすくなります。

AI視点: 目的が属性として明示されるため、修正提案のブレが小さく、差分が安定しやすい形です。

htmxを使った具体的なリファクタリング例はこちら：htmx逆引きレシピ

ロジックを分離した最小例

// 純粋関数: 入力→出力だけを扱う
function calculateSubtotal(items) {
	return items.reduce((sum, item) => sum + item.price * item.qty, 0);
}

// I/O層: 取得や描画はここで扱う
async function showSubtotal() {
	const items = await fetchCartItems();
	const subtotal = calculateSubtotal(items);
	renderSubtotal(subtotal);
}
			

// テスト例（入力→出力）
expect(calculateSubtotal([
	{ price: 1000, qty: 2 },
	{ price: 500, qty: 1 }
])).toBe(2500);
			

純粋関数が中心だと、AIは期待値ベースのテストを作りやすく、失敗時の原因切り分けも速くなります。