article 読むトレ #08：その if、散らばってない？

公開日: 2025-06-21著者: Yov in YovStudio

今回のお題コード

AI 「ユーザーの状態によって表示されるメッセージやボタンが変わる処理を書きました！どうですか？」

function showWelcomeMessage(user) {
  if (!user.isLoggedIn) {
    console.log('ようこそ！ログインしてください');
  } else if (!user.isPremium) {
    console.log('ようこそ、無料会員様！');
  } else {
    console.log('ようこそ、プレミアム会員様！');
  }
}

function renderButton(user) {
  if (!user.isLoggedIn) {
    console.log('[ログインしてね]');
  } else if (!user.isPremium) {
    console.log('[アップグレード]');
  } else {
    console.log('[ダッシュボードへ]');
  }
}

function trackEvent(user) {
  if (user.isLoggedIn && user.isPremium) {
    console.log('有料ユーザーのアクセスを記録');
  }
}

// 現在のユーザー（ログイン済みだが有料登録していない）
const currentUser = { isLoggedIn: true, isPremium: false };

showWelcomeMessage(currentUser);
renderButton(currentUser);
trackEvent(currentUser);

どう動く？

さっそく読んでみましょう。

以下のようなサイトで動かしてみてもよいです。

• PlayCode
• CodePen

気になるポイント

このコード、問題なく動きます。 実行結果にはしっかりと、「会員向けのメッセージ」と「有料会員へのアップグレードボタン」が出力されています。

ようこそ、無料会員様！
[アップグレード]

しかし、このコードには「読みやすさ」「メンテしやすさ」で気になることがあります。 たとえば、「ログイン済みだが有料登録していないユーザー」向けの処理を変えたくなったらどうでしょう？

全ての条件を確認し、該当するか読んでいく必要がありますよね。 今回の例は短いのでそうそう見逃しは発生しないですが、処理が長かったり別のファイルにあったりしたら修正が漏れてバグを生むリスクも高まります。

そもそも、「〜だが〜でないユーザー」のように頭の中でイチイチ考えるのも疲れます。ユーザーの状態によって次のように分類できる点を利用するべきでしょう。

どう修正する？

ユーザーの状態を判定する処理を作り、各関数で判定に利用することでグッとわかりやすくなります。

ユーザーの状態を判定する処理

function getUserStatus(user) {
  if (!user.isLoggedIn) {
    return 'guest';
  }
  if (!user.isPremium) {
    return 'free';
  }
  return 'premium';
}

使用例： trackEvent()

function trackEvent(status) {
  if (status === 'premium') {
    console.log('有料ユーザーのアクセスを記録');
  }
}

どうでしょう？
trackEvent() が修正前に比べ、プレミアムユーザーかどうかで処理が変わるというのが一目瞭然ではありませんか？

修正前

function trackEvent(user) {
  if (user.isLoggedIn && user.isPremium) {
    console.log('有料ユーザーのアクセスを記録');
  }
}

今回の読みどころ

• 同じような条件分岐をわかりやすく集約してあるとコードや仕様が見通しやすくなる
• 同じような条件分岐が散らばっていると修正漏れが発生するかもしれない
• 「この条件、またどこかに出てきそうだな」と思ったらまとめるチャンスかもしれない

おまけ：お題コードの修正版

少し長いので折りたたみます。

function getUserStatus(user) {
  if (!user.isLoggedIn) {
    return 'guest';
  }
  if (!user.isPremium) {
    return 'free';
  } 
  return 'premium';
}

function showWelcomeMessage(status) {
  if (status === 'guest') {
    console.log('ようこそ！ログインしてください');
  } else if (status === 'free') {
    console.log('ようこそ、無料会員様！');
  } else {
    console.log('ようこそ、プレミアム会員様！');
  }
}

function renderButton(status) {
  const labels = {
    guest: '[ログインしてね]',
    free: '[アップグレード]',
    premium: '[ダッシュボードへ]',
  };
  // たとえば status が 'guest' の場合、labels['guest'] に対応する '[ログインしてね]' が表示される
  console.log(labels[status]);
}

function trackEvent(status) {
  if (status === 'premium') {
    console.log('有料ユーザーのアクセスを記録');
  }
}

// 現在のユーザー（ログイン済みだが有料登録していない）
const currentUser = { isLoggedIn: true, isPremium: false };

// "free"を取得して後続の処理を行う
const userStatus = getUserStatus(currentUser);
showWelcomeMessage(userStatus);
renderButton(userStatus);
trackEvent(userStatus);