JavaScript | 基礎構文：条件分岐 – 複雑な条件式

JavaScript JavaScript
2025.12.13
スポンサーリンク

複雑な条件式を一言でいうと

「複雑な条件式」は、
「いくつかの条件を組み合わせて “このときだけ true にしたい” を表現した式」 です。

例えば、

  • 「ログインしていて、かつ管理者」
  • 「点数が 70 以上 90 未満」
  • 「土日で、かつ祝日ではない」

こういう“現実の条件”は、1 個の比較だけでは表現できません。
そこで 論理演算子（&&, ||, !）やかっこ () を組み合わせて、条件式を組み立てていきます。

ここが重要です。
複雑な条件式は、「たくさんの条件を書けばいい」という話ではなく、
“頭の中の日本語の条件” を、読みやすい JavaScript に翻訳できるかどうか の勝負です。

まずは土台：比較演算子の組み合わせ

単体の条件式（比較）のおさらい

複雑にする前に、まずは「単体の条件式」がしっかり分かっていることが前提です。

age >= 18      // 18歳以上か
score === 100  // ちょうど100点か
x !== 0        // 0ではないか
price < 1000   // 1000より小さいか
JavaScript

これらはそれぞれ true か false を返す式 です。
if 文では、こういう「Yes/No の質問」を書くと考えてください。

if (age >= 18) {
  console.log("大人です");
}
JavaScript

範囲条件を作る（例：70点以上90点未満）

「70 以上 90 未満」のような条件は、1 個の比較式では書けません。
2 つの条件を「かつ（AND）」でつなぐ必要があります。

const score = 75;

if (score >= 70 && score < 90) {
  console.log("Bランクです");
}
JavaScript

ここでは、

  • score >= 70 が true で、
  • なおかつ score < 90 も true のときだけ、
  • 全体として true になります。

ここが重要です。
「範囲条件」は、
「下限の条件」と「上限の条件」を && でつなぐ のが定型パターンです。
日本語で「〜以上 かつ 〜未満」と言っているかを、必ず意識してください。

AND / OR / NOT（&&, ||, !）をしっかり掴む

&&（AND）: 両方 true のときだけ true

if (isLoggedIn && isAdmin) {
  console.log("管理者ページを表示");
}
JavaScript

これは、「ログインしていて、なおかつ管理者」のときだけ実行されます。

  • true && true → true
  • それ以外（片方でも false） → false

なので、

  • 「A であり、かつ B」
  • 「A かつ B が両方そろったときだけ」

という意味になります。

||（OR）: どちらかが true なら true

if (isHoliday || isWeekend) {
  console.log("お休みです");
}
JavaScript

これは、「祝日 か 土日 なら休み」という条件です。

  • true || true → true
  • true || false → true
  • false || true → true
  • false || false → false

なので、

  • 「A または B のどちらか一方でも成り立てば OK」
  • 「A でも B でも両方でも構わない」

という意味になります。

!（NOT）: true と false を逆転させる

if (!isLoggedIn) {
  console.log("ログインしてください");
}
JavaScript

!isLoggedIn は、「ログインしていない」という条件になります。

  • !true → false
  • !false → true

「〜でないとき」「〜じゃないとき」を書きたいときに使います。

ここが重要です。
複雑な条件式の 90% は、
単純な比較式を && / || / ! でつなぐだけ です。
「A で、かつ B」「A または B」「A ではない」の 3 パターンを、まず自分の言葉で説明できるようにしてください。

実践的な複合条件の例

例1：入場条件（年齢とチケット）

条件：

  • 年齢が 18 歳以上
  • かつ チケットを持っている
const age = 20;
const hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log("入場できます");
} else {
  console.log("入場できません");
}
JavaScript

ロジック：

  • age >= 18 → 「18 歳以上か？」
  • hasTicket → 「チケットを持っているか？」
  • && でつなぐ → 「両方満たしているときだけ OK」

例2：割引対象（学生 または シニア）

条件：

  • 「学生 か シニアなら 割引対象」というルール。
const isStudent = false;
const age = 70;
const isSenior = age >= 65;

if (isStudent || isSenior) {
  console.log("割引対象です");
} else {
  console.log("通常料金です");
}
JavaScript

ロジック：

  • isStudent → 学生か？
  • isSenior → 65 歳以上か？
  • || でつなぐ → 「どちらか一方でも true なら OK」

例3：「ログインしていない か 期限切れ」のときだけ警告

const isLoggedIn = false;
const isExpired = true;

if (!isLoggedIn || isExpired) {
  console.log("再ログインが必要です");
}
JavaScript

ロジック：

  • !isLoggedIn → 「ログインしていない」
  • isExpired → 「期限切れになっている」
  • どちらか一方でも true → 再ログインが必要

ここが重要です。
複雑に見える条件も、
「日本語で分解 → 単純な条件式に分ける → && / || / ! で組み立てなおす」
というステップを踏めば、必ず整理できます。
一発でコードにしようとしないで、いったん日本語で分ける癖をつけましょう。

書き方で理解が変わる：かっこの役割

演算子の優先順位（! → && → ||）

JavaScript では、複数の論理演算子が並んだときの評価順は、

  1. !（NOT）
  2. &&（AND）
  3. ||（OR）

の順です。

例えば：

if (a || b && c) { ... }
JavaScript

これは

if (a || (b && c)) { ... }
JavaScript

と同じ意味になります。
&& のほうが || より先に計算されるからです。

かっこで「意図したグループ」をはっきりさせる

とはいえ、「優先順位を全部覚えてる前提」で書くと、読み手に優しくありません。
初心者のうちは、読み手（＝未来の自分）が一瞬で理解できるように、かっこを積極的に使う のがおすすめです。

// 例：ログインしていて管理者、またはゲスト
if ((isLoggedIn && isAdmin) || isGuest) {
  console.log("アクセスを許可");
}
JavaScript

こう書くと、

  • 左側 (isLoggedIn && isAdmin) → 「ログイン済みの管理者」
  • それに || isGuest → 「もしくはゲスト」

という意図が一目で伝わります。

かっこを足すことで「自分の頭」も整理される

例えば、次のような条件を書く必要があるとします。

「20 歳以上 かつ 会員」
または
「クーポンを持っている」

日本語のままだと、

「(20 歳以上 かつ 会員) または (クーポンあり)」

これを素直にコードにすると：

if ((age >= 20 && isMember) || hasCoupon) {
  console.log("割引適用");
}
JavaScript

ここが重要です。
複雑な条件式は、「かっこなしで短く書くこと」より、「かっこで意味の塊を見せること」のほうが大事です。
“何をひとかたまりとして考えているのか” を、かっこで可視化するイメージを持ってください。

条件式が「読めない」「テストしにくい」と感じたときの対処

中間変数に分解して「ラベル」を付ける

条件が長くなってしまったときは、
一度 小さな条件式に分解して変数にする と、一気に読みやすくなります。

例：

「18 歳以上の会員 かつ メール認証済み」
または
「管理者」

const isAdultMember = age >= 18 && isMember;
const isVerified = isEmailVerified;
const isAdminUser = isAdmin;

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

isAdultMember や isAdminUser という名前が、条件の意味を説明してくれるラベル になっています。

極端にネストした if を「条件式」にまとめる

もし、こんなコードを書いていたら：

if (age >= 18) {
  if (isMember) {
    if (isEmailVerified) {
      console.log("フル機能OK");
    }
  }
}
JavaScript

これを、

if (age >= 18 && isMember && isEmailVerified) {
  console.log("フル機能OK");
}
JavaScript

と 1 行にまとめたほうが、むしろすっきりします。

逆に、条件式のほうが長くなりすぎたら、
いったん分割して中間変数にしたほうが読みやすくなります。

ここが重要です。
「ネストした if を 1 行の条件式にまとめる」
「逆に、長い条件式を分割してラベルを付ける」
この両方ができると、状況に応じて読みやすさをコントロールできるようになります。
大切なのは、“自分が一度で理解できる形” に整えることです。

初心者として「複雑な条件式」で本当に押さえてほしいこと

複雑な条件式も、土台は「単純な true / false の比較式」。
それを &&（かつ）、||（または）、!（〜でない）で組み合わせているだけ。

範囲条件は、「下限」と「上限」を && でつなぐ。
例：score >= 70 && score < 90。

演算子の優先順位は基本的に ! → && → || だが、
読みやすさのためにかっこ () を積極的に使って「意味の塊」をはっきりさせる。

長くなって読みにくい条件は、中間変数に分解して「名前（ラベル）」を付けると理解しやすくなる。
逆に、ネストしすぎた if は、1 行の条件式にまとめるほうが読みやすい場合もある。

ここが重要です。
複雑な条件式は、「難しいものを書く場所」ではなく、
“現実の条件を丁寧に翻訳してあげる場所” です。
コードにする前に、
「日本語でどう言えるか？」
「どの部分が一つの塊（グループ）になっているか？」
を考えてみてください。
その一手間が、そのまま「読みやすい条件式」につながります。

もし練習したくなったら、次のような日本語の条件を、自分で JavaScript の if 条件にしてみてください。

  1. 「年齢が 18 歳以上 かつ 会員 かつ メール認証済み のときだけ、動画を視聴できる」
  2. 「ログインしていない または アカウントが凍結されている場合は、ログイン画面にリダイレクトする」
  3. 「スコアが 90 以上 なら A、70 以上 90 未満 なら B、50 以上 70 未満 なら C、それ以外は D」
    （これは if / else if で分けつつ、各行の条件式に注目して書いてみる）

自分の日本語をどう分解し、どう && / || / ! に落とし込むか——
そこを楽しめるようになったら、条件分岐はもう怖くなくなります。

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