JavaScriptの論理演算子を初心者向けにやさしく解説
最初は少し抽象的に感じるかもしれませんが、論理演算子は「条件を組み合わせるためのつなぎ言葉」です。動く例で体感しながら覚えましょう。
論理演算子の3つの基本
- AND（そして）
&&: ふたつとも「OK」なら「OK」 - OR（または）
||: どちらかが「OK」なら「OK」 - NOT（じゃない）
!: 真偽をひっくり返す
直感でわかる例
const age = 15;
const hasTicket = true;
// AND: 年齢が18以上「かつ」チケットあり
console.log(age >= 18 && hasTicket); // false（年齢条件NG）
// OR: 年齢が18以上「または」保護者同伴
const withParent = true;
console.log(age >= 18 || withParent); // true（保護者同伴でOK）
// NOT: 禁止フラグを「じゃない」にする
const isBanned = false;
console.log(!isBanned); // true（禁止じゃない）
ショートサーキット評価（途中で判断を打ち切る）
&&は左側が false なら右側を見ない||は左側が true なら右側を見ない- その結果として、単なる true/false だけでなく、値そのもの が返ることがあります
例題1：安全に実行する
const user = null;
// 左が null（false扱い）なので右側は評価されず、結果は null
console.log(user && user.name); // null（エラーにならない）
例題2：デフォルト値を入れる
let inputName = ""; // 空文字は false扱い
const nameToShow = inputName || "ゲスト";
console.log(nameToShow); // "ゲスト"
例題3：条件が通るときだけ実行
const isLoggedIn = true;
isLoggedIn && console.log("ようこそ！"); // "ようこそ！" が表示される
真（true）っぽい値・偽（false）っぽい値
JavaScriptでは「見た目が値でも、条件の中では真偽っぽく扱われる」ものがあります。
- 偽（false）とみなされる値:
0, “”（空文字）, null, undefined, NaN, false - それ以外は基本「真（true）」扱い:
例：“A”, 1, [], {}, 関数, 日付 など
例題：どれが表示される？
console.log(0 || "代わり"); // "代わり"（0はfalse扱い）
console.log("A" && "B"); // "B"（左がtrue扱いなので右の値が返る）
console.log(null && "実行されない"); // null
console.log(undefined || "初期値"); // "初期値"
console.log(!"テキスト"); // false（文字列はtrue扱い→NOTで反転）
優先順位（どれが先に評価される？）
- 強い順:
!（NOT） →&&（AND） →||（OR） - 迷ったら 括弧
()を使うと読みやすく安全
例題：同じに見えて結果が違う
console.log(true || false && false); // true（&&が先→false && false は false、true || false は true）
console.log((true || false) && false); // false（括弧でORを先に→true && false は false）
実用パターン（すぐ使える）
- デフォルト値の設定（OR）
function greet(name) {
const safeName = name || "ゲスト";
console.log(`こんにちは、${safeName}さん`);
}
greet(""); // こんにちは、ゲストさん
greet("太郎"); // こんにちは、太郎さん
- 存在する場合だけアクセス（AND）
const config = { theme: { color: "blue" } };
// 左が存在しなければ右は評価されないので安全
const color = config && config.theme && config.theme.color;
console.log(color); // "blue"
- 条件が真のときだけ処理（AND）
const isDebug = false;
isDebug && console.log("デバッグログ"); // 表示されない
- 必須入力チェック（ANDとORの組み合わせ）
function canSubmit(name, email) {
// name と email が両方「空じゃない」なら送信可能
return !!name && !!email;
}
console.log(canSubmit("山田", "")); // false
console.log(canSubmit("山田", "a@b.com")); // true
つまずきやすいポイントと回避策
- 空文字や 0 も「偽扱い」になる
入力値で 0 が有効なのに||で上書きしないよう注意。
const qty = 0;
const safeQty = qty || 1; // 0が偽扱い→意図せず1になる（NGの場合あり）
// 回避：null/undefined のときだけ置き換えたいなら、??（Null合体演算子）を使う
const safeQty2 = qty ?? 1; // 0は保持される → 0
- 深いオブジェクトアクセスは安全に
obj && obj.a && obj.a.bの形は伝統的。モダンJSなら?.（オプショナルチェーン）も便利。
const color = config?.theme?.color; // 未定義なら undefined で止まる
練習問題
- 条件分岐の組み合わせ
// ルール：
// ・会員（isMember）が true なら入場OK
// ・会員でなくても、招待状（hasInvite）があればOK
// ・ただし、出入り禁止（isBanned）が true なら絶対NG
const isMember = false;
const hasInvite = true;
const isBanned = false;
// ここに条件式を書いて、"入場OK" か "入場NG" を表示してみてください
- デフォルト表示名
// name が空文字や undefined のときに "ゲスト" を表示する変数 displayName を作ってください
const name = "";
// 例：const displayName = ??? ;
- 安全なネストアクセス
const settings = { ui: { fontSize: 14 } };
// settings.ui.fontSize が存在するときだけ値を取り出す式を書いてください（AND で）
答え合わせが必要なら、あなたのコードを書いて見せてください。意図や使いたい場面に合わせて、もっとぴったりの書き方も一緒に考えます。どこでつまずいたか、正直に教えてくれたらそこを丁寧にほぐします。
解答と解説
① 入場条件の判定
問題文:
- 会員（isMember）が true なら入場OK
- 会員でなくても、招待状（hasInvite）があればOK
- ただし、出入り禁止（isBanned）が true なら絶対NG
const isMember = false;
const hasInvite = true;
const isBanned = false;
if (!isBanned && (isMember || hasInvite)) {
console.log("入場OK");
} else {
console.log("入場NG");
}
解説:
!isBanned→ 出入り禁止でないこと(isMember || hasInvite)→ 会員か招待状あり- 2つを
&&でつなぐことで「禁止されていなくて、かつ条件を満たす」場合のみOKになります。
② デフォルト表示名
問題文:
name が空文字や undefined のときに “ゲスト” を表示する
const name = "";
const displayName = name || "ゲスト";
console.log(displayName); // "ゲスト"
解説:
||は左側が「falseっぽい値（空文字、null、undefinedなど）」なら右側を返します。- そのため
nameが空なら"ゲスト"が代わりに使われます。
③ 安全なネストアクセス
問題文:settings.ui.fontSize が存在するときだけ値を取り出す
const settings = { ui: { fontSize: 14 } };
const fontSize = settings && settings.ui && settings.ui.fontSize;
console.log(fontSize); // 14
解説:
&&は左が false なら右を評価しません。- そのため
settingsが null/undefined ならそこで止まり、エラーにならずnullやundefinedが返ります。 - モダンJavaScriptでは
settings?.ui?.fontSizeと書くのが一般的ですが、練習として&&を使った書き方を覚えておくと理解が深まります。
まとめ
- 複数条件を組み合わせるときは
&&と||を整理して考える - デフォルト値を入れるときは
||が便利 - 存在チェックには
&&を使うと安全