JavaScript | 論理演算子

了では、論理演算子（&&, ||, !） の理解を深めるために、
初心者にもわかりやすい レベル別（初級・中級・上級）練習問題＋解答・詳しい解説 を紹介します。

初級（基礎確認・意味の理解）

問題1

次の式は「真（true）」と「偽（false）」のどちらになりますか？

true && false

true && false

解答：false
解説： &&（AND）は「両方とも true」でないと true にならない。
1つでも false があると結果は false。

問題2

次の式の結果は？

true || false

true || false

解答：true
解説： ||（OR）は「どちらか一方でも true」なら true。
最初が true なので右側は評価されず、結果は true。

問題3

次の式の結果を答えてください。

!true

!true

解答：false
解説： ! は否定。true を反転して false にする。

問題4

次の式は「真」か「偽」か？

!(5 > 3)

!(5 > 3)

解答：false
解説：

1. (5 > 3) → true
2. !true → false

問題5

次の if 文は実行されますか？

let age = 25;
if (age > 18 && age < 30) {
  console.log("若者です！");
}

let age = 25;
if (age > 18 && age < 30) {
  console.log("若者です！");
}

解答：実行される（表示される）
解説：

• age > 18 → true
• age < 30 → true
  両方 true なので全体も true。条件成立！

中級（値の評価と短絡評価）

問題6

次の式の結果は？

console.log(0 || "OK");

console.log(0 || "OK");

解答：”OK”
解説：

• 0 は falsy（偽）
• 左が falsy なので右側が返る。
  || は「左がダメなら右を返す」。

問題7

次の式の結果は？

console.log("Hello" && "World");

console.log("Hello" && "World");

解答：”World”
解説：

• "Hello" は truthy → 左がOKなら右の結果を返す。
• よって "World" が返る。

問題8

次の式の結果は？

console.log(null && "Yes");

console.log(null && "Yes");

解答：null
解説：
&& は「左が falsy の場合は左を返す」。
null は falsy なので右を見ずに null が返る。

問題9

次の式の結果は？

console.log("" || 0 || "done");

console.log("" || 0 || "done");

解答：”done”
解説：
順に評価して最初の truthy を返す。

• "" → falsy
• 0 → falsy
• "done" → truthy（ここで評価終了）

問題10

次の式の結果は？

console.log(!"hello");

console.log(!"hello");

解答：false
解説：

• "hello" は truthy（真）
• !true → false

上級（実践的な使い方と応用）

問題11

次の式の結果は？

let user = "";
console.log(user || "ゲスト");

let user = "";
console.log(user || "ゲスト");

解答：”ゲスト”
解説：
空文字 "" は falsy → 右側 "ゲスト" が返る。
これは「入力がないときにデフォルト値を設定する」定番テクニック。

問題12

次の式の結果は？

let a = 10;
let b = 0;
console.log(a && b);

let a = 10;
let b = 0;
console.log(a && b);

解答：0
解説：

• a は truthy（10）
• なので右側 b を返す。
  結果：0（falsy）

問題13

次の式の結果は？

console.log(!!0);

console.log(!!0);

解答：false
解説：

• !0 → true
• !!0 → false
  「!!」で boolean に変換するテクニック。

問題14

次の if 文は実行される？

let x = null;
if (x && x.length > 0) {
  console.log("OK");
}

let x = null;
if (x && x.length > 0) {
  console.log("OK");
}

解答：実行されない
解説：
x が null（falsy）なので右の x.length は評価されない（安全！）。
このように && を使うと「存在チェック」を兼ねられる。

問題15

次の式の結果は？

let score = 70;
console.log(!(score >= 80));

let score = 70;
console.log(!(score >= 80));

解答：true
解説：

• (score >= 80) → false
• !false → true
  つまり「80以上ではない」＝true。

まとめ表（覚え方）

さらに練習したい人向け（発展課題）

1. && と || を組み合わせて、「ログイン済み かつ 管理者」または「特別招待コードを持っている」なら OK という条件式を作ってみよう。
2. falsy の値（0, "", null, undefined, NaN）を一覧で試して、どれがどう評価されるか console.log() で確認してみよう。
3. input || "default" と input ?? "default" の違いを実験して理解しよう。

ログインチェック・フォームバリデーションなどを作る小さな実践課題

では、「論理演算子の理解を実際の場面で使う」ための
小さな実践課題を、初級 → 中級 → 応用 の3段階で用意。

それぞれに「やること」「考え方」「解答例」を示します。

初級課題：ログインチェック

やること

ユーザー名とパスワードが両方入力されているか確認しよう。
どちらか一方でも欠けていたらエラーにしたい。

考え方

• 「両方とも入力されている」＝ username && password
• && の短絡評価で、どちらかが falsy（空文字など）なら false になる。

💻 コード

let username = "Alice";
let password = "";

if (username && password) {
  console.log("ログイン成功！");
} else {
  console.log("エラー：ユーザー名またはパスワードが未入力です。");
}

let username = "Alice";
let password = "";

if (username && password) {
  console.log("ログイン成功！");
} else {
  console.log("エラー：ユーザー名またはパスワードが未入力です。");
}

✅ 結果

password が空なので、else のメッセージが表示されます。
→ 両方埋まっていないと進めないロジック。

中級課題：年齢による入場制限

やること

• 18歳以上または「保護者同伴」であれば入場OK
• どちらも満たさない場合は入場NG

考え方

• 「A か B のどちらかがOK」→ || を使う
• 条件を読みやすくするために括弧で囲もう

💻 コード

let age = 16;
let withParent = true;

if (age >= 18 || withParent) {
  console.log("入場できます！");
} else {
  console.log("18歳未満かつ保護者なしのため入場できません。");
}

let age = 16;
let withParent = true;

if (age >= 18 || withParent) {
  console.log("入場できます！");
} else {
  console.log("18歳未満かつ保護者なしのため入場できません。");
}

✅ 結果

withParent が true なので「入場できます！」。
→ || の「どちらかOK」を実感できます。

応用課題：フォーム送信の安全チェック

やること

送信ボタンを押す前に、次の条件をチェックする：

• 名前とメールアドレスが 両方入力されている（&&）
• メールアドレスが 「@」を含む
• どれか1つでも欠けたら「送信できません」

考え方

論理演算子を組み合わせて、複数の条件を1行でまとめる。
ただし複雑になりすぎないように括弧を活用する。

💻 コード

let name = "Halu";
let email = "haluexample.com"; // ← @ がない

if (name && email && email.includes("@")) {
  console.log("送信完了！");
} else {
  console.log("エラー：入力内容を確認してください。");
}

let name = "Halu";
let email = "haluexample.com"; // ← @ がない

if (name && email && email.includes("@")) {
  console.log("送信完了！");
} else {
  console.log("エラー：入力内容を確認してください。");
}

✅ 結果

email.includes("@") が false なので「エラー：入力内容を確認してください。」

発展課題（チャレンジ）

次のような条件を満たす処理を書いてみよう👇

「年齢が 18 歳以上 かつ ログイン済み」
または 「管理者アカウント（isAdmin）」の場合にだけ
「アクセス許可」と表示する。

🔧 ヒント

条件をまとめるとこうなる：

(age >= 18 && loggedIn) || isAdmin

(age >= 18 && loggedIn) || isAdmin

さらに発展したい人へ

このあと練習しておくと役立つテーマ：

• デフォルト値の代入（|| と ?? の違い）
• オプショナルチェイニング（user?.name）
• 三項演算子（条件 ? A : B）との組み合わせ