JavaScript | 基礎構文：条件分岐 – 条件の分解

条件の分解とは何か

「条件の分解」とは、複雑な条件式を一度に書くのではなく、小さな条件に分けて整理することです。初心者がいきなり長い if 文を書くと、読みづらくなりバグの原因になります。条件を分解すると、コードが理解しやすくなり、意図も明確になります。

なぜ条件を分解するのか

読みやすさを向上させる

複雑な条件をそのまま書くと「何を判定しているのか」が分かりにくくなります。分解して変数に名前をつけることで、コードを読む人が意図を理解しやすくなります。

バグを減らす

条件を分けて書くと、どこで判定が失敗しているかを確認しやすくなります。デバッグが簡単になります。

基本的な分解の方法

例題1：年齢と会員判定

const age = 20;
const isMember = true;

// 複雑な条件を一度に書くと分かりにくい
if (age >= 18 && isMember) {
  console.log("成人の会員です");
}

// 条件を分解して変数にする
const isAdult = age >= 18;
const isAdultMember = isAdult && isMember;

if (isAdultMember) {
  console.log("成人の会員です");
}

const age = 20;
const isMember = true;

// 複雑な条件を一度に書くと分かりにくい
if (age >= 18 && isMember) {
  console.log("成人の会員です");
}

// 条件を分解して変数にする
const isAdult = age >= 18;
const isAdultMember = isAdult && isMember;

if (isAdultMember) {
  console.log("成人の会員です");
}

isAdult や isAdultMember といった変数名を使うことで、条件の意味がはっきりします。

例題2：入力チェック

const input = "";

// 複雑に書くと読みにくい
if (input === "" || input === null || Number.isNaN(Number(input))) {
  console.log("不正な入力です");
}

// 分解して整理
const isEmpty = input === "";
const isNull = input === null;
const isNotNumber = Number.isNaN(Number(input));

if (isEmpty || isNull || isNotNumber) {
  console.log("不正な入力です");
}

const input = "";

// 複雑に書くと読みにくい
if (input === "" || input === null || Number.isNaN(Number(input))) {
  console.log("不正な入力です");
}

// 分解して整理
const isEmpty = input === "";
const isNull = input === null;
const isNotNumber = Number.isNaN(Number(input));

if (isEmpty || isNull || isNotNumber) {
  console.log("不正な入力です");
}

小さな条件に分けることで「空か」「nullか」「数値でないか」をそれぞれ確認でき、理解しやすくなります。

段階的に判定する方法

条件を分解すると「段階的に判定する」書き方もできます。大きな条件を先に判定し、その中でさらに細かい条件を確認します。

例題3：ログインと権限チェック

const loggedIn = true;
const role = "user";

if (loggedIn) {
  const isAdmin = role === "admin";
  const isEditor = role === "editor";

  if (isAdmin || isEditor) {
    console.log("編集ページにアクセスできます");
  } else {
    console.log("権限がありません");
  }
} else {
  console.log("ログインしてください");
}

const loggedIn = true;
const role = "user";

if (loggedIn) {
  const isAdmin = role === "admin";
  const isEditor = role === "editor";

  if (isAdmin || isEditor) {
    console.log("編集ページにアクセスできます");
  } else {
    console.log("権限がありません");
  }
} else {
  console.log("ログインしてください");
}

「ログインしているか」を先に判定し、その中で「権限があるか」を分解して確認しています。

注意点とコツ

変数名に意味を持たせる

isAdult や isEmpty のように、条件の意味を表す名前をつけるとコードが読みやすくなります。

ネストを深くしすぎない

分解してもネストが深くなると読みにくいので、必要に応じて else if や関数に分けると整理できます。

デバッグしやすくなる

分解した条件を console.log で確認すれば、どの判定が失敗しているかすぐに分かります。

まとめ

• 条件の分解は「複雑な条件を小さな条件に分ける」こと。
• 読みやすさが向上し、バグを減らせる。
• 変数に意味のある名前をつけると意図が明確になる。
• 段階的に判定することで、コードの流れを整理できる。

初心者は「長い条件を一度に書かず、分けて名前をつける」と覚えると理解しやすいです。