JavaScript | 基礎構文:比較・論理 – 論理 OR

JavaScript JavaScript
スポンサーリンク

論理 OR を一言でいうと

論理 OR(オア)は、
「条件 A または 条件 B のどちらか一方でも満たされていれば OK(true)」にする演算子 です。

記号は ||(縦棒2つ)を使います。

  • 「A または B」
  • 「A B」

という日本語とセットで覚えてください。

ここが重要です。
論理 AND(&&)が「A かつ B(両方必要)」だとすると、
論理 OR(||)は「A または B(どちらかでよい)」です。
条件を「ゆるくする」「範囲を広げる」ときに使う演算子 だと意識してください。


基本の形:true / false 同士の OR

OR の真理値表(ルールの核)

条件 A と条件 B があったとき:

  • A か B のどちらかが true → 結果は true
  • 両方 false のときだけ → false

コードで見るとこうなります。

console.log(true  || true);   // true
console.log(true  || false);  // true
console.log(false || true);   // true
console.log(false || false);  // false
JavaScript

たった 1 つでも true が混ざれば、全体として true。
「1つでも OK なら OK」というのが OR の本質です。

if 文での基本パターン

「土曜日 または 日曜日なら休み」という条件を考えます。

const day = "Saturday";

if (day === "Saturday" || day === "Sunday") {
  console.log("休みです");
} else {
  console.log("平日です");
}
JavaScript

ここでは

  • day === "Saturday" が true
  • day === "Sunday" は false

ですが、

true || false → 全体として true なので、「休みです」が表示されます。

ここが重要です。
OR は「どれか 1 つでも条件を満たせばよい」場面で使います。
「A か B のどちらかなら許可」「複数のうち、1 つでも当てはまれば OK」という状況を思い浮かべてください。


実用イメージ:条件を「ゆるく」する OR

例1:年齢が 65 歳以上 または 学生なら割引

const age = 17;
const isStudent = true;

if (age >= 65 || isStudent) {
  console.log("割引が適用されます");
} else {
  console.log("通常料金です");
}
JavaScript

ここでは、

  • age >= 65 → false
  • isStudent → true

なので、false || true → true、割引になります。

もし age = 70, isStudent = false でも、
true || false → true なので、やはり割引です。

例2:入力チェックで「どちらか片方だけ必須」パターン

「メールアドレス 電話番号のどちらか片方は必須」というフォームチェック。

const email = "";
const phone = "090-1234-5678";

if (email !== "" || phone !== "") {
  console.log("連絡先は入力されています");
} else {
  console.log("メールか電話のどちらかは入力してください");
}
JavaScript

どちらかが空でなければ OK。
両方とも空のときだけエラーです。

ここが重要です。
AND(&&)で条件を足すと「厳しく」なり、
OR(||)で条件を足すと「ゆるく」なります。
「この条件でもいいし、あの条件でもいい」という発想が浮かんだら、OR の出番です。


JavaScript 特有のポイント①:短絡評価(ショートサーキット)

左側が true なら、右側は評価しない

|| には、
「左側が true(あるいは truthy)なら、右側は評価しない」
という性質があります(AND のときとは逆向き)。

これを「短絡評価(ショートサーキット)」といいます。

function heavy() {
  console.log("heavy() が実行された");
  return true;
}

console.log(true || heavy());   // true
JavaScript

この場合、左側がすでに true なので、
heavy() は呼ばれません(ログも出ません)。

false || heavy() なら、左が false なので heavy() が実行されます。

if 条件の中でのイメージ

const isHoliday = true;
const isPaidLeave = false;

if (isHoliday || isPaidLeave) {
  console.log("仕事は休み");
}
JavaScript

ここでは isHoliday が true なので、
JavaScript は isPaidLeave を見る必要がありません。

「もう true が確定しているなら、これ以上の判定は不要」という合理的な動きをします。

ここが重要です。
短絡評価を理解しておくと、「右側が評価されないケース」を前提にした書き方ができるようになります。
ただし、その性質を複雑に利用しすぎると、かえって読みづらくなるので注意が必要です。


JavaScript 特有のポイント②:|| の戻り値は true / false だけではない

「左が truthy なら左、falsy なら右」を返す

JavaScript の || は、
必ずしも true / false を返すわけではありません。

ルールはこうです。

  • 左側が「真っぽい値(truthy)」なら、左側の値を返す
  • 左側が「偽っぽい値(falsy)」なら、右側の値を返す
console.log(true  || "ABC");   // true
console.log(false || "ABC");   // "ABC"

console.log("hello" || "world"); // "hello"(左が truthy)
console.log("" || "default");    // "default"(左が falsy → 空文字は falsy)
console.log(0 || 100);           // 100(0 は falsy)
console.log(123 || 100);         // 123(123 は truthy)
JavaScript

つまり、||

「左が使える値ならそれを使う。ダメなら右を使う」

という 「デフォルト値選択」のような動き をします。

これを使った「デフォルト値」の定番パターン

const inputName = ""; // ユーザー入力(空なら未入力とみなす)

const name = inputName || "名無しさん";

console.log(name); // "名無しさん"
JavaScript

inputName が空文字(falsy)なので、
inputName || "名無しさん""名無しさん" になります。

もし inputName = "太郎" なら、
"太郎" || "名無しさん""太郎" です。

関数引数のデフォルト代入にもよく使われる

function greet(name) {
  const displayName = name || "名無しさん";
  console.log(`こんにちは、${displayName} さん`);
}

greet("太郎"); // こんにちは、太郎 さん
greet("");     // こんにちは、名無しさん さん
greet();       // こんにちは、名無しさん さん(name は undefined → falsy)
JavaScript

ここが重要です。
|| は「真偽の判定」だけでなく、「左がダメなら右を使う」という“値選択”の道具としても使われます。
ただし、0"" も falsy なので、「0 や空文字を有効な値として扱いたい」場合には注意が必要です。


OR と AND の対比で理解を深める

「足す」と「絞る」のイメージ

  • OR(||):条件を “足す” → true になりやすくなる
  • AND(&&):条件を “絞る” → true になりにくくなる

例:年齢で考えると…

const age = 18;

// OR:高校生か大学生か(どちらかでOK)
const isHighSchoolOrCollege =
  age >= 16 && age <= 18   // 高校生 16〜18
  || age >= 19 && age <= 22; // 大学生 19〜22

// AND:20 歳以上 かつ 30 歳未満(20〜29 だけ)
const isIn20s = age >= 20 && age < 30;
JavaScript

OR は「こういう人も OK、ああいう人も OK」と範囲を広げていく方向、
AND は「こういう条件も満たして、さらにこうで…」と絞っていく方向です。

複雑になったら一度「日本語」に戻す

例えば次の条件:

if (isHoliday || isPaidLeave || isCompanyClosed) {
  // お休み
}
JavaScript

日本語にすると、

「休日 または 有給 または 会社休業日のとき」

です。

ここにさらに、

if ((isHoliday || isPaidLeave || isCompanyClosed) && !isSick) {
  // 「休み」で、かつ「体調不良ではない」
}
JavaScript

のように AND と組み合わせるときは、

「(休日か有給か会社休業日)、さらに病気じゃないとき」

と、日本語の「〜か〜か〜で、さらに〜」を思い浮かべると、
演算子の選択を間違えにくくなります。

ここが重要です。
論理式が分からなくなったら、
|| を「〜か〜」
&& を「〜で、かつ〜」
と頭の中で日本語に変換してみてください。
それでも意味が通じない条件式は、大抵どこかがおかしいです。


初心者として論理 OR で本当に押さえてほしいこと

A || B は、「A か B のどちらか一方でも true なら true」。
両方 false のときだけ false。

OR は「条件をゆるくする」「範囲を広げる」演算子。
「A か B ならOK」「どれかに当てはまればよい」という状況で使う。

短絡評価により、左が truthy なら右は評価されない。
これを前提にした書き方はできるが、複雑に使いすぎると読みにくくなるのでほどほどに。

|| は true/false だけでなく、
「左が truthy なら左、falsy なら右」を返す。
この性質を使って「デフォルト値」の代入がよく書かれる。
ただし 0 や空文字も falsy なので、その扱いには注意する。

ここが重要です。
論理 OR は、「これでもいいし、あれでもいい」という許容範囲をコードで表現するための道具です。
“この条件がダメでも、こっちの条件が通れば OK にしたい” と感じたとき、
頭の中で「〜か〜」とつぶやきながら || を置いてみてください。
それを AND と組み合わせていくことで、あなたの「言いたい条件」をそのままコードに落とし込めるようになっていきます。

最後に、小さな練習を置いておきます。
結果を予想してから実行してみてください。

console.log(true  || true);
console.log(true  || false);
console.log(false || true);
console.log(false || false);

console.log("" || "default");
console.log("hello" || "default");
console.log(0 || 42);
console.log(1 || 42);

const email = "";
const phone = "090-1234-5678";
if (email !== "" || phone !== "") {
  console.log("どちらかは入力されている");
}
JavaScript

「なぜそうなるのか」を、自分の言葉で説明できるようになったとき、
論理 OR はもうあなたの武器になっています。

タイトルとURLをコピーしました