先生と生徒の会話形式で理解しよう

生徒

「JavaScriptで条件分岐を書いていると、ifの中にifを書いて、どんどん入れ子になってしまいます。これって良くないですか？」

先生

「そうですね。それを多段ネストと呼びます。深くなるとコードが読みにくくなり、バグも見つけにくくなります。」

生徒

「どうすれば入れ子を避けて、読みやすく書けますか？」

先生

「条件分岐を早期リターンやガード節、switch文などを使うことでシンプルに書くことができます。順番に見ていきましょう！」

1. 多段ネストとは何か

多段ネストとは、if文やfor文の中にさらにif文があり、それが何層にも重なっている状態です。例えば、以下のようなコードです。


if (user) {
  if (user.age > 18) {
    if (user.active) {
      console.log("利用可能なユーザーです");
    }
  }
}


利用可能なユーザーです

このように深くなると、どの条件がどこで終わるのか見にくくなり、コードの理解が難しくなります。

2. 早期リターンを使ってネストを減らす

早期リターンとは、条件に合わない場合はすぐに処理を抜ける方法です。こうすることで、ネストを減らして読みやすくできます。


function checkUser(user) {
  if (!user) return;
  if (user.age <= 18) return;
  if (!user.active) return;
  console.log("利用可能なユーザーです");
}

checkUser({age: 20, active: true});


利用可能なユーザーです

この方法を使うと、条件を一つずつ確認し、問題があれば処理を抜けるため、コードの見通しが良くなります。

3. ガード節を使う

ガード節とは、特定の条件に合わない場合は処理を止める書き方です。早期リターンと似ていますが、特に関数の冒頭で条件を確認することを指します。


function processOrder(order) {
  if (!order) return console.log("注文がありません");
  if (!order.items || order.items.length === 0) return console.log("商品がありません");

  console.log("注文処理を開始します");
}

processOrder({items: ["apple"]});


注文処理を開始します

ガード節を使うことで、不要な入れ子を避け、条件ごとの処理が明確になります。

4. switch文を活用する

条件が複数の値に分かれる場合は、switch文を使うとネストを減らせます。


let status = "active";

switch(status) {
  case "active":
    console.log("アクティブな状態です");
    break;
  case "inactive":
    console.log("非アクティブな状態です");
    break;
  case "pending":
    console.log("保留中の状態です");
    break;
  default:
    console.log("不明な状態です");
}


アクティブな状態です

switch文を使うことで、if文の多段ネストを避けつつ、複数の条件をすっきり書けます。

5. 三項演算子を使う

簡単な条件分岐であれば、三項演算子を使って1行で書くこともできます。


let score = 75;
let result = score >= 60 ? "合格" : "不合格";
console.log(result);


合格

三項演算子は条件が少ない場合に有効ですが、複雑になりすぎると逆に読みにくくなるので注意が必要です。

6. ネストを避けるメリット

コードが読みやすくなる
バグを見つけやすくなる
メンテナンスがしやすくなる
条件分岐の理解が容易になる

早期リターンやガード節、switch文、三項演算子を適切に使うことで、多段ネストを避け、簡潔でわかりやすい条件分岐のコードを書くことができます。

JavaScriptの条件式で多段ネストを避ける書き方テクニック