はじめに
JavaScriptで複雑な条件分岐を記述する場合、switch文やif-elseを使うのが一般的です。しかし、各条件に複数行の処理や一時変数が含まれる場合、コードが非常に読みにくくなります。
そこで本記事では、関数とMapを組み合わせて条件ごとの処理を整理するテクニックを紹介します。各処理を独立した関数に分けることで、読みやすさ・保守性が格段に向上します。
読みにくい典型例:switch文の肥大化
function handleEvent(eventType, data) {
switch (eventType) {
case 'login':
const username = data.username;
const time = new Date();
console.log(`[LOGIN] ${username} at ${time.toISOString()}`);
break;
case 'logout':
const logoutTime = new Date();
console.log(`[LOGOUT] User ${data.username} logged out at ${logoutTime.toISOString()}`);
break;
case 'error':
console.error(`[ERROR] Code: ${data.code}, Message: ${data.message}`);
break;
default:
console.warn('Unknown event type:', eventType);
}
}
問題点:
- 条件ごとの処理が長くなると読みづらい
-
caseごとに変数を宣言するとスコープが不明瞭 - ロジック変更のたびに
switch全体を見直す必要がある
解決策:関数 + Map による整理
各条件を独立した関数にし、それをMapで管理することで、コードをシンプルかつ柔軟に記述できます。
1. 関数に切り出す
function handleLogin(data) {
const username = data.username;
const time = new Date();
console.log(`[LOGIN] ${username} at ${time.toISOString()}`);
}
function handleLogout(data) {
const logoutTime = new Date();
console.log(`[LOGOUT] User ${data.username} logged out at ${logoutTime.toISOString()}`);
}
function handleError(data) {
console.error(`[ERROR] Code: ${data.code}, Message: ${data.message}`);
}
2. Mapに登録して一元管理
const handlers = new Map([
['login', handleLogin],
['logout', handleLogout],
['error', handleError]
]);
3. Mapから関数を呼び出す
function handleEvent(eventType, data) {
const handler = handlers.get(eventType);
if (handler) {
handler(data);
} else {
console.warn('Unknown event type:', eventType);
}
}
メリットまとめ
| 項目 | 関数+Map | switch/if |
|---|---|---|
| 処理の見通し | 各処理が独立していて読みやすい | 複数行になると見通しが悪い |
| 保守性 | 関数単位で変更しやすい | 巨大なswitchブロックが壊れやすい |
| テストしやすさ | 各関数を個別にテスト可能 | caseごとに切り出しづらい |
| スコープ管理 | 関数スコープ内で完結 | ブロックスコープが曖昧になりやすい |
まとめ
switchやifは簡単な条件分岐には便利ですが、処理が複雑になると保守性や可読性に大きな影響を与えます。
- 複数行の処理や変数宣言が必要な場合
- 処理をテスト・再利用したい場合
- 条件分岐が動的に変わる場合
このようなケースでは、**関数とMapを活用することで、ロジックをスッキリ整理することができます。