概要
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の分離とは、
“動作の意味と視覚の責任を切り離し、設計によって両立させるための構造戦略”である。