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

JavaScript JavaScript
2025.12.13
スポンサーリンク

条件の分解を一言でいうと

「条件の分解」は、
“ごちゃごちゃした if の条件を、意味のある小さな塊に分けて整理すること” です。

  • 1 行でなんとか書けるけど、読むときに「うっ…」となる長い条件
  • 自分で書いたのに、数分後に見返すと意味が分からない条件

こういうものを、小さく・意味ごとに区切り直す作業 が「条件の分解」です。

ここが重要です。
条件分岐は「動けばいい」ではなく、“読んで理解できるかどうか” が勝負 です。
難しい条件ほど、「分解してから組み立てる」癖をつけると、一気にレベルが上がります。

まず「悪い例」を見てみる

典型的な読みにくい if 文

いきなりですが、こんなコードを見てください。

if (
  age >= 18 &&
  isMember &&
  isEmailVerified &&
  (!isBanned || isAdmin) &&
  (country === "JP" || country === "US")
) {
  console.log("フル機能を利用できます");
}
JavaScript

動きとしては正しいかもしれません。
でも、初心者どころか経験者でも、一発で意味を理解するのはきついです。

  • どこまでが「会員条件」なのか
  • どこからが「凍結チェック」なのか
  • 国の条件はどこに書いているのか

一瞬で読み取るのは難しいですよね。

ここが重要です。
「1 行に書けるかどうか」よりも、「ひとかたまりずつ意味が理解できるかどうか」のほうが圧倒的に大事です。
そのためにやるのが「条件の分解」です。

ステップ1：日本語で“段階”に分けてみる

いったんコードから離れて、条件を言葉にする

さっきの if を、まず日本語にしてみましょう。

フル機能を使えるのは
「18 歳以上」
かつ「会員」
かつ「メール認証済み」
かつ「（凍結されていない、または管理者）」
かつ「国が日本かアメリカ」

この時点で、なんとなく「段階」に分かれているのが見えます。

  • 基本条件（年齢・会員・メール認証）
  • アカウント状態（凍結かどうか）
  • 国の条件

この 3 つくらいの「意味の塊」に分けて考えられそうです。

段階ごとにラベルをつけてみる

日本語ベースで、こんなラベルを考えてみます。

  • age >= 18 かつ isMember かつ isEmailVerified
    → 「条件1：フル条件を満たした会員か？」
  • !isBanned || isAdmin
    → 「条件2：凍結されていないか、特例の管理者か？」
  • country === "JP" || country === "US"
    → 「条件3：対象国か？」

こうやって日本語で整理しておくと、
コードにするときに「どこで分けるか」が自然に見えてきます。

ここが重要です。
条件の分解は、“いきなりコードをいじる” ところから始めません。
一度「自然な日本語」に戻して、
「どんな塊に分けられるか？」を考えるところから始めるのが、いちばん効きます。

ステップ2：小さな条件に分解して変数にする

条件ごとに「意味のある名前」をつける

さっきの段階を、そのままコードに落とし込んでいきます。

const isAdultMember =
  age >= 18 &&
  isMember &&
  isEmailVerified;

const isAllowedStatus =
  !isBanned || isAdmin;

const isTargetCountry =
  country === "JP" || country === "US";
JavaScript

そして、最終的な if をこう書き直します。

if (isAdultMember && isAllowedStatus && isTargetCountry) {
  console.log("フル機能を利用できます");
}
JavaScript

before / after で読みやすさを比較する

元のコード：

if (
  age >= 18 &&
  isMember &&
  isEmailVerified &&
  (!isBanned || isAdmin) &&
  (country === "JP" || country === "US")
) {
  console.log("フル機能を利用できます");
}
JavaScript

分解後のコード：

const isAdultMember =
  age >= 18 &&
  isMember &&
  isEmailVerified;

const isAllowedStatus =
  !isBanned || isAdmin;

const isTargetCountry =
  country === "JP" || country === "US";

if (isAdultMember && isAllowedStatus && isTargetCountry) {
  console.log("フル機能を利用できます");
}
JavaScript

後者のほうが、「何をチェックしているか」が圧倒的に分かりやすいはずです。

変数名が“ミニ日本語”になる

isAdultMember を読めば、「18 歳以上で会員で、メール認証済みなんだな」とイメージできます。
isAllowedStatus は、「凍結されていない or 管理者」という意味のかたまりです。
isTargetCountry は「対象国かどうか」がすぐ分かります。

ここが重要です。
「長い条件式」を「意味のある名前の変数」に分解すると、
その変数名自体が“条件の説明書”になってくれます。
実際のコードより、変数名を読むほうが理解が速くなるくらいが理想です。

ステップ3：ネストした if から条件式へ（逆パターンも）

ネストした if を 1 つの条件にまとめる

今度は逆方向。
ネストした if を「1 つの条件」にまとめてみます。

if (age >= 18) {
  if (isMember) {
    if (isEmailVerified) {
      console.log("フル機能を利用できます");
    }
  }
}
JavaScript

これを、「3つの条件がすべて必要」という 1 つの条件式にまとめると：

if (age >= 18 && isMember && isEmailVerified) {
  console.log("フル機能を利用できます");
}
JavaScript

この形のほうが、「全部そろって初めて OK」という意図が素直です。

逆に「条件式が長すぎるときはネストに戻す」という選択肢も

例えば、こういう条件を無理やり 1 行にすると危険です。

if ((age >= 18 && isMember && isEmailVerified) || (isAdmin && !isBanned && (country === "JP" || country === "US"))) {
  // ...
}
JavaScript

この場合は、まず分解するのが先ですが、
どうしても複雑なら、あえて if を段階的に書くほうが読みやすくなることもあります。

let canUseFullFeature = false;

if (age >= 18 && isMember && isEmailVerified) {
  canUseFullFeature = true;
} else if (isAdmin && !isBanned && (country === "JP" || country === "US")) {
  canUseFullFeature = true;
}

if (canUseFullFeature) {
  // ...
}
JavaScript

ここが重要です。
「条件式にまとめる」か「ネストにする」かは、“どちらが読みやすく意図が伝わるか” で選びます。
1 パターンにこだわらず、「分解→再構成」を繰り返しながら、いちばんしっくりくる形を探す感覚が大事です。

よくあるパターン別：条件をどう分解するか

パターン1：範囲条件を「下限」と「上限」に分ける

例えば、「スコアが 70 以上 90 未満」のときだけ B 判定にしたい。

悪い例：

if (score >= 70 && score < 90) {
  console.log("B");
}
JavaScript

これくらいならまだ許容範囲ですが、
もう少し丁寧にするなら、意味ごとの変数にします。

const isOver70 = score >= 70;
const isUnder90 = score < 90;

if (isOver70 && isUnder90) {
  console.log("B");
}
JavaScript

あるいは：

const isBRange = score >= 70 && score < 90;

if (isBRange) {
  console.log("B");
}
JavaScript

「B の範囲」というラベルがつくだけでも、読みやすさが変わります。

パターン2：OR が増えたときのグループ分け

例えば、「サポート対象の国が 4 つある」場合。

悪い例：

if (
  country === "JP" ||
  country === "US" ||
  country === "FR" ||
  country === "DE"
) {
  console.log("サポート対象の国です");
}
JavaScript

これも分解できます。

const isSupportedCountry =
  country === "JP" ||
  country === "US" ||
  country === "FR" ||
  country === "DE";

if (isSupportedCountry) {
  console.log("サポート対象の国です");
}
JavaScript

さらに発展させるなら、「配列 + includes」で書くこともできますが、
今は「意味ごとに分ける」というテーマなので、変数名でラベルを付けるだけでも十分です。

パターン3：否定条件（! を含む条件）の扱い

例えば、「ログインしていない か 凍結されている」ならログイン画面を出したい。

if (!isLoggedIn || isBanned) {
  console.log("ログイン画面へ");
}
JavaScript

これも、そのままだと少し読みにくいと感じたら分解します。

const isGuest = !isLoggedIn;
const isNotAllowedStatus = isBanned;

if (isGuest || isNotAllowedStatus) {
  console.log("ログイン画面へ");
}
JavaScript

! がある条件は、とくに「名前付き変数」にしてあげると、意味が頭に入りやすくなります。

ここが重要です。
「!」を含む条件は、「〜でない」という日本語のラベルを変数名にしてしまうと一気に読みやすくなります。
!isLoggedIn より、isGuest のほうが、“条件の意味” がダイレクトに伝わります。

条件の分解で本当に得られるもの

テストしやすくなる（1 個ずつ確認できる）

分解前：

if (
  age >= 18 &&
  isMember &&
  isEmailVerified &&
  (!isBanned || isAdmin)
) {
  // ...
}
JavaScript

これをテストするとき、「どの条件で失敗しているか」が分かりにくいです。

分解後：

const isAdultMember = age >= 18 && isMember && isEmailVerified;
const isAllowedStatus = !isBanned || isAdmin;

if (isAdultMember && isAllowedStatus) {
  // ...
}
JavaScript

テストコードやログで、
console.log(isAdultMember, isAllowedStatus);
とすれば、「どっちの条件が false なのか」が一目で分かります。

仕様変更に強くなる

例えば、「対象国にイギリスを追加したい」となったとき。

分解前だと、巨大な if の一部を書き換える必要があります。
分解後なら、isTargetCountry の定義だけを変えてあげれば良い。

const isTargetCountry =
  country === "JP" ||
  country === "US" ||
  country === "UK";
JavaScript

if の本体は一切触らずに済みます。

ここが重要です。
条件を分解しておくと、「どこを書き換えればいいか」が明確になります。
「巨大な if の一部」を直接いじるより、意味ごとに分かれた小さな条件を直すほうが、安全でミスも減ります。

初心者として「条件の分解」で本当に押さえてほしいこと

長くて読みにくい if 条件を見つけたら、まず「日本語で条件を書き出して、意味の塊に分ける」。
「この部分は年齢関連」「この部分は会員かどうか」「この部分は国」などに分解する。

各塊を、単純な条件式にして変数に落とし込む。
名前（isAdultMember, isSupportedCountry など）は、“その条件を一言で説明するラベル” にする。

ネストした if は、1 行の条件式にまとめられることがある。
逆に、1 行が長すぎるなら、ネストや分解に戻して「段階ごと」に分ける。

否定（!）が入る条件は特に読みにくいので、isGuest や isNotAllowed のように、“肯定系の名前” の変数にまとめると分かりやすくなる。

ここが重要です。
条件の分解は、「頭の中のロジックを、人間が読めるコードに翻訳する作業」です。
“動く if 文” を書いて終わりではなく、
「あとから読んだ自分が、1 回で理解できるか？」
「バグったときに、どこが原因かすぐ当たりがつくか？」
を基準に、条件を小さく分けて整えてみてください。
その意識だけで、あなたのコードは一気に“プロっぽく”なります。

練習として、こんなことをやってみると効果的です。

// 練習1:
// 自分でわざと「読みにくい if 条件」を書く。
// 例: age, isMember, isEmailVerified, isBanned, isAdmin, country を適当に組み合わせて if を1行で書く。
// そのあと、それを3〜4個の意味の塊に分解し、変数名を付けて書き直してみる。

// 練習2:
// ネストした if （3段くらい）を書き、
// 「これは1つの条件式にまとめられるか？」を考えて、実際に1行にしてみる。
// before / after を見比べて、どちらが自分には読みやすいか感じてみる。
JavaScript

「条件を分解して、ゆっくり噛み砕いていく」感覚を一度体験すると、
以後 “複雑な条件” を怖がる必要がなくなります。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました