論理演算子

生田 陸人
監修
LuaGate エンジニア / 現役エンジニア
編集 LuaGate編集部

このレッスンで分かること

  • && (AND) / || (OR) / ! (NOT) で複数の条件をまとめられます
  • JavaScript の論理演算子は短絡評価で動き、左右どちらかの値を返します
  • 最小例は age >= 18 && isMember

論理演算子 とは

&& || ! で複数の条件をひとつの式にまとめ、if の中身をスッキリ書けるようになろう。

論理演算子で「複数の条件」をまとめる

現実のプログラムでは、ひとつの判定だけで十分な場面はほとんどありません。「年齢が 18 以上、かつ 会員である」「ログイン済み、または ゲストモードである」「isAdmin が true でない」。こうした複数条件をひとつの式にまとめるための道具が論理演算子です。

JavaScript の論理演算子は && (AND)、|| (OR)、! (NOT) の 3 つ。どれも左右の boolean を組み合わせて boolean を返す、ように見えますが、実は JavaScript ならではの 短絡評価 と truthy/falsy 評価 という個性があります。これを知っているかで、書けるコードのレベルが大きく変わります。

論理演算子は「複数の判定をひとつにまとめる接着剤」です。接着の仕方によって、結果は厳しくも甘くもなります。

3 つの論理演算子の基本

3 種類を最初にざっと整理します。

演算子意味真になる条件
&&AND (かつ)左右がともに truthy
||OR (または)左右の少なくとも片方が truthy
!NOT (否定)元が falsy のとき

動きを確かめるコードはこのとおりです。

JavaScript

const a = true; const b = false; console.log(a && b); // false 両方 true ではない console.log(a || b); // true 片方 true console.log(!a); // false 反転 console.log(!b); // true 反転

複数組み合わせれば、より複雑な条件も書けます。

JavaScript

const age = 22; const isMember = true; const canEnter = age >= 20 && isMember; console.log(canEnter); // true

age >= 20 は true、isMember も true なので、&& の左右がともに true で canEnter は true になります。

短絡評価 (short-circuit) の威力

JavaScript の && || は、結果が確定したら右側を評価しない という賢い動きをします。これを短絡評価と呼びます。

  • false && x — 左が false の時点で全体は false で確定するので x は評価されない
  • true || x — 左が true の時点で全体は true で確定するので x は評価されない

この仕組みのおかげで、安全なヌルチェックが書けます。

JavaScript

const user = null; if (user && user.name === "Naoki") { console.log("Hi, Naoki"); }

user が null のとき、左の user は falsy なので右側の user.name は 実行されません。もし && がなければ null の .name でエラーになるところを、論理演算子が水際で守ってくれます。

「軽い判定 → 重い判定」「ヌルチェック → 中身検査」の順で書く、というのが短絡評価の鉄則です。

Mermaid で AND の流れを追う

今回の課題、「age >= 18 かつ isMember が true のとき入場可」を流れ図にすると次のとおりです。

diagram (will load when visible)

図の流れを順序リストで書き直すと、次の通りです。

  1. age >= 18 を評価する
  2. 偽であれば false を返して終了する (短絡評価)
  3. 真であれば isMember を評価する
  4. 偽であれば false を返す
  5. 真であれば true を返す

この図がそのまま age >= 18 && isMember の式と対応します。&& は「全部の関所を通った人だけが true のゴールに到達できる」イメージです。

truthy / falsy と論理演算子

JavaScript の論理演算子は、厳密には boolean 以外の値も受け取れます。0 "" null undefined NaN の 5 つは falsy で、それ以外は truthy です。

JavaScript

console.log(0 || "default"); // "default" 0 は falsy console.log("hi" || "default"); // "hi" console.log("abc" && 123); // 123 左が truthy なので右を返す

つまり || は「左が falsy なら右、それ以外は左」、&& は「左が falsy なら左、それ以外は右」を返します。デフォルト値の指定や、null チェックを 1 行で書くテクニックとしてよく使われます。ただし 0 や "" を「正常な値」として扱いたいときは、後で学ぶ ?? のほうが安全です。

論理演算子は 必ずしも boolean を返さない という点だけは覚えておいてください。実用上の真偽は変わりませんが、戻り値の型は左右の値のどちらかになります。

よくある間違い

論理演算子の落とし穴を 3 つ紹介します。

  • & | (ビット演算) と && || の混同 — & や | は数値のビット演算で、短絡評価が効きません。boolean の条件式には && || を 2 個重ねて使うこと
  • ! の付け忘れ・付け過ぎ — 「ログインしていないとき」は !isLoggedIn です。!!isLoggedIn と書くと値を boolean に変換するテクニックになり、意味が変わります
  • 優先順位の勘違い — && は || よりも優先順位が高いです。a || b && c は a || (b && c) の意味になります。意図が分かりづらいときは迷わず () で囲むこと

もうひとつ、長い条件式を 1 行に詰め込みすぎるのもよくあるアンチパターンです。const canVote = age >= 18 && isCitizen; のように名前付きの変数に分けると、if 文がぐっと読みやすくなります。

条件式に意味を持たせたいときは boolean の 名前付き変数 にする、これが読みやすいコードのコツです。

この章のポイント

ここまでの要点 && (AND) / || (OR) / ! (NOT) は短絡評価。falsy は 0 "" null undefined NaN の 5 つ。& | (ビット演算) と混同しない。

やってみよう

それでは課題に取り組みましょう。canEnter(age, isMember) を完成させて、age が 18 以上 かつ isMember が true なら true、それ以外は false を返してください。

書き方の方針は次のとおりです。

  • return age >= 18 && isMember; のシンプルな 1 行で書く
  • 余裕があれば || を使った逆向きの書き方 (return !(age < 18 || !isMember);) も書いてみる
  • どちらの書き方でも、テストケースの結果が同じになることを確認する

論理演算子は if 文・三項演算子・短絡代入と組み合わせて真の力を発揮します。ここで && || の感覚を体に染み込ませておくと、後続の章がぐっと楽になります。

よくある質問

Q. && と || はどんな順序で評価されますか？

A. && は左から評価し、最初に false が出た時点で残りをスキップします（短絡評価）。|| は最初に true が出た時点でスキップします。これを使うと if (obj && obj.value) のように null チェックと値参照を 1 行で書けます。

Q. and / or の戻り値は true / false ですか？

A. Python の and / or は短絡評価し、真偽ではなく実際の値を返します。例えば 0 or 'default' は 'default'、'name' and 'value' は 'value' です。JavaScript も同様で、a || b はデフォルト値の代入によく使われます（nullish 合体 ?? の方が安全な場面もあり）。

Q. not と != はどう違いますか？

A. not は真偽の反転（not True → False）で、!= は不等値の判定です。x != 0 と not (x == 0) は同じ結果ですが、後者は二重否定で読みにくくなるため != を使うのが基本です。条件全体を反転したいときだけ not を使ってください。

次のレッスン

次は 三項演算子で簡潔に で、&& || ! で複数の条件をひとつの式にまとめ、if の中身をスッキリ書けるようになろう を学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

  1. 論理演算子 の要点を自分の言葉で説明できる
  2. このレッスンの最小コード (または操作手順) を見ずに書ける
  3. 練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. 論理演算子 とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

要件

  1. 関数名は canEnter、引数は age と isMember の 2 つにすること
  2. 比較は >= を使い、結合は && を使うこと
  3. 戻り値は必ず boolean (true または false) にすること

入出力例

test-cases.txt

canEnter(20, true) → true canEnter(20, false) → false canEnter(17, true) → false canEnter(18, true) → true canEnter(17, false) → false

ヒント

main.js
main.js
学習モード

メモ

論理演算子

⌘S で保存