1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

JavaScriptでMapを使ったSwitchの代替方法

1
Last updated at Posted at 2025-01-20

はじめに

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ごとに切り出しづらい
スコープ管理 関数スコープ内で完結 ブロックスコープが曖昧になりやすい

まとめ

switchifは簡単な条件分岐には便利ですが、処理が複雑になると保守性や可読性に大きな影響を与えます

  • 複数行の処理や変数宣言が必要な場合
  • 処理をテスト・再利用したい場合
  • 条件分岐が動的に変わる場合

このようなケースでは、**関数とMapを活用することで、ロジックをスッキリ整理することができます。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?