【JavaScript】条件判定に変数を使う方法｜複雑な条件の分解・フラグ変数・早期リターン・ガード節・可読性を高める実践テクニック

// 何をチェックしているか読み解くのに時間がかかる
if (user.age >= 18 && user.country === 'JP' && !user.isBanned && user.role !== 'guest') {
  showPremiumContent();
}

const isAdult       = user.age >= 18;
const isDomestic    = user.country === 'JP';
const isActiveUser  = !user.isBanned;
const isLoggedIn    = user.role !== 'guest';

const canViewPremium = isAdult && isDomestic && isActiveUser && isLoggedIn;

if (canViewPremium) {
  showPremiumContent();
}

const isAdmin = user.role === 'admin' || user.role === 'superadmin';

// 1つの変数を複数箇所で使い回せる
if (isAdmin) showAdminMenu();
if (isAdmin) allowDataExport();
if (isAdmin) enableUserManagement();

// NG: 条件をその都度書くと変更漏れのリスクがある
// if (user.role === 'admin' || user.role === 'superadmin') showAdminMenu();
// if (user.role === 'admin' || user.role === 'superadmin') allowDataExport(); ...

// 技術的な条件をそのまま書くと、後から読んだときに意図が不明瞭
if (items.length > 0 && totalPrice >= 3000 && couponCode !== null && !isHoliday) {
  applyFreeShipping();
}

// 各条件をビジネス用語で命名して意図を明確化
const hasItems          = items.length > 0;
const meetsMinOrder     = totalPrice >= 3000;    // 3000円以上で送料無料
const hasCoupon         = couponCode !== null;
const isEligibleDay     = !isHoliday;            // 祝日は対象外

const qualifiesForFreeShipping = hasItems && meetsMinOrder && (hasCoupon || isEligibleDay);

if (qualifiesForFreeShipping) {
  applyFreeShipping();
}

// 段階ごとに変数を作ることで、どの段階で失敗したかも追いやすい
const isFormValid    = form.checkValidity();
const isNetworkOk    = navigator.onLine;
const isNotSubmitting = !isSubmitting;

// 全条件が揃ったときだけ送信可能
const canSubmit = isFormValid && isNetworkOk && isNotSubmitting;

submitBtn.disabled = !canSubmit;

// どの条件が失敗しているか個別に確認できる
if (!isFormValid)     showError('入力内容を確認してください');
if (!isNetworkOk)     showError('オフライン状態です');
if (!isNotSubmitting) showError('送信中です。しばらくお待ちください');

function processOrder(order) {
  if (order) {
    if (order.items.length > 0) {
      if (order.user.isVerified) {
        if (!order.isCancelled) {
          // ようやくメインロジック
          chargePayment(order);
          sendConfirmationEmail(order);
        }
      }
    }
  }
}

function processOrder(order) {
  // 無効な状態を先に弾く（ガード節）
  if (!order)                 return;
  if (order.items.length === 0) return;
  if (!order.user.isVerified)  return;
  if (order.isCancelled)       return;

  // メインロジックはフラットに書ける
  chargePayment(order);
  sendConfirmationEmail(order);
}

function processOrder(order) {
  const isValidOrder     = order && order.items.length > 0;
  const isUserVerified   = order?.user?.isVerified;
  const isNotCancelled   = !order?.isCancelled;

  if (!isValidOrder)    return;
  if (!isUserVerified)  return;
  if (!isNotCancelled)  return;

  chargePayment(order);
  sendConfirmationEmail(order);
}

// 'active' をあちこちで書くと typo が起きやすい
if (user.status === 'actve') { // typo！バグになる
  showDashboard();
}

// 状態を定数にまとめる（Object.freeze で変更を防ぐ）
const USER_STATUS = Object.freeze({
  ACTIVE:   'active',
  INACTIVE: 'inactive',
  PENDING:  'pending',
  BANNED:   'banned',
});

// 使うときは定数経由（タイポしても JS がエラーを出す）
if (user.status === USER_STATUS.ACTIVE) {
  showDashboard();
}

// 複数状態の一括チェック
const VIEWABLE_STATUSES = [USER_STATUS.ACTIVE, USER_STATUS.PENDING];
const canView = VIEWABLE_STATUSES.includes(user.status);

if (canView) showContent();

// switch 文（長くなりやすい）
function getStatusLabel(status) {
  switch (status) {
    case 'active':   return '有効';
    case 'inactive': return '無効';
    case 'pending':  return '審査中';
    case 'banned':   return '凍結';
    default:         return '不明';
  }
}

// オブジェクトマップ（コンパクト）
const STATUS_LABELS = {
  active:   '有効',
  inactive: '無効',
  pending:  '審査中',
  banned:   '凍結',
};

function getStatusLabel(status) {
  return STATUS_LABELS[status] ?? '不明';
}

// 処理（関数）もマップできる
const ACTIONS = {
  'click':  () => console.log('クリックされました'),
  'hover':  () => console.log('ホバーされました'),
  'submit': () => console.log('送信されました'),
};

function handleEvent(type) {
  const action = ACTIONS[type];
  if (action) action();
}

const isAdult      = user.age >= 18;
const isDomestic   = user.country === 'JP';
const isActiveUser = !user.isBanned;

// 各条件を個別に確認できる
console.log({ isAdult, isDomestic, isActiveUser });
// { isAdult: true, isDomestic: false, isActiveUser: true }
// → isDomestic が false なのが原因とすぐわかる

const canViewPremium = isAdult && isDomestic && isActiveUser;
console.log('canViewPremium:', canViewPremium); // false