概要

UIコードにロジックを詰め込むとは、「すぐ動くコード」にはなるが「壊れやすいコード」にもなる。
それを避けるためには**“ドメインロジックとUI表現を明確に分離し、責務単位で関数を設計する”**という戦略が必要である。

JavaScript（特にフロントエンド）はしばしば「イベントハンドラの中に処理が詰まっている」「UIコンポーネントの中でデータ加工が走っている」といった実装に陥りやすい。

本稿では、関数設計によるロジック分離・再利用性の担保・UIからの切り離しという観点で、責務を意識した設計方法を解説する。

1. UIとロジックが混在した例（アンチパターン）

button.addEventListener("click", () => {
  const price = parseFloat(input.value);
  const tax = price * 0.1;
  const total = price + tax;
  result.textContent = `合計: ${total}円`;
});

❌ DOMイベントの中に取得・計算・表示の全てが混在
❌ 再利用不可 / テスト困難 / 保守性ゼロ

2. ドメインロジックを関数として切り出す

function calculateTotal(price) {
  const tax = price * 0.1;
  return price + tax;
}

✅ 計算に専念する関数
✅ テスト可能 / UIに依存しない

3. UI側は「取得」と「表示」に専念する

button.addEventListener("click", () => {
  const price = parseFloat(input.value);
  const total = calculateTotal(price);
  result.textContent = formatTotal(total);
});

function formatTotal(total) {
  return `合計: ${total}円`;
}

✅ UI側は「入力→ロジック呼び出し→出力表示」のみ
✅ 処理の意味が分かれ、責務が明確化

4. 複雑な構造にも応用できる（例：ユーザーの表示名生成）

function getDisplayName(user) {
  if (user.nickname) return user.nickname;
  return `${user.lastName} ${user.firstName}`;
}

// UIコンポーネント側
usernameElement.textContent = getDisplayName(currentUser);

✅ ロジックはドメインに関係し、UIと切り離せる
✅ 表示形式が変わってもロジックだけ変更すればよい

5. UIロジックも「UI専用関数」として整理

function renderError(message) {
  errorBox.textContent = message;
  errorBox.classList.remove("hidden");
}

function hideError() {
  errorBox.classList.add("hidden");
}

✅ UI制御も直接書かず、構造化することで再利用・保守が容易に
✅ テストも renderError("エラー発生") として可能になる

設計判断フロー

① UIイベントの中にロジックや加工処理が混在していないか？

② ドメインロジックは「UIとは無関係」に抽出できないか？

③ 表示のロジック（format, decorate）は関数に分離されているか？

④ UI制御（show/hide）も関数で整理されているか？

⑤ テストすべき処理がUIに依存しないよう分離されているか？

よくあるミスと対策

❌ UIイベントの中に「取得 → 計算 → 加工 → 表示」が全て書かれている

→ ✅ 関数で分離 / テスト可能に / 保守しやすい構造に分ける

❌ ユーザー名の表示フォーマットが複数箇所にベタ書きされている

→ ✅ getDisplayName() のように1箇所に抽出して一元化

❌ UI更新のたびに直接 DOM を触っていてロジックが分散

→ ✅ renderXXX() などUI制御も構造としてまとめる

結語

ロジックとUIの責務分離とは、「キレイに分ける」ことではない。
それは**“意味ごとに処理を分類し、再利用性・可読性・保守性を支える構造を設計する”**ことである。

ドメイン処理とUI処理を分け
UIは「状態の反映」のみに徹し
すべての処理は「意味のある名前」で構造的に表現する

JavaScriptにおけるロジックとUIの分離とは、
“動作の意味と視覚の責任を切り離し、設計によって両立させるための構造戦略”である。