JavaScript | 基礎構文：比較・論理 – 論理演算子の優先順位

JavaScript JavaScript
2025.12.13
スポンサーリンク

論理演算子の「優先順位」を一言でいうと

論理演算子の優先順位は、
「!、&&、|| が混ざっているとき、どの順番で計算されるかのルール」 です。

JavaScript では基本的に

!（NOT）
→ &&（AND）
→ ||（OR）

この順に優先して評価されます。

ここが重要です。
人間の目は「左から順に読んで」判断しがちですが、
JavaScript は「優先順位」に従って勝手にカッコを入れて評価します。
このギャップが、「え、なんでこの条件 true になるの？」というバグの正体です。

まずはシンプルな優先順位を頭に入れる

基本ルール：NOT ＞ AND ＞ OR

論理演算子だけに絞ると、優先順位はこうです。

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

つまり、同じ式の中に ! と && と || が全部混ざっていたら、
まず ! が一番先に処理され、
次に && が処理され、
最後に || が処理されます。

例えば：

const result = !a && b || c;
JavaScript

これは JavaScript 的には

const result = ((!a) && b) || c;
JavaScript

と同じ意味になります。

比較演算子との関係

> < >= <= === などの「比較演算子」は、
&& や || よりも先に評価されます。

例えば：

x > 5 && x < 10
JavaScript

は

(x > 5) && (x < 10)
JavaScript

と解釈されます。

ここが重要です。
「比較 → NOT → AND → OR」というイメージを持っておくと、
だいたいの式の評価順が頭の中で追えるようになります。
ただし、完全に暗記して頼るよりも、カッコで明示してしまうほうが安全 です。

具体例で優先順位の「罠」を体験する

例1：! と && と || が混ざった式

次の式を見てください。

const a = true;
const b = false;
const c = true;

const result = !a && b || c;
console.log(result);
JavaScript

直感で「どう評価されるか」を一度考えてみてください。

優先順位に従って分解してみると：

  1. !a が先
  2. その結果と b で &&
  3. その結果と c で ||

つまりこう評価されます。

const result = ((!a) && b) || c;
// a = true → !a = false

// false && b → false
// false || c → c（true）

console.log(result); // true
JavaScript

「!a && b の部分が false でも、最後に || c が true なので、全体は true」となります。

ここが重要です。
!a && b || c を目で見たとき、
「a が false で、かつ b が true か、または c が true」と読み解けるかどうか。
自信がなければ、自分でカッコを付けて意味を固定してから書く のが良い習慣です。

例2：AND と OR の優先順位

const a = true;
const b = false;
const c = false;

console.log(a || b && c);
JavaScript

「a か b で c で…」と混乱しそうですが、
優先順位は && が先なので、

a || (b && c)
JavaScript

として評価されます。

b && c → false && false → false
a || false → true || false → true

結果は true です。

もし、あなたが本当は

(a || b) && c
JavaScript

という意味で書きたかったなら、
優先順位まかせでは完全に違う条件になってしまいます。

ここが重要です。
AND と OR が並んだら、「どっちを先にグループ化したいか」を必ず自分でカッコで示す。
優先順位に頼って省略するのは、「自分にも他人にも優しくない書き方」だと思ってください。

優先順位を「味方にする」カッコの使い方

基本方針：意味をはっきりさせるためにカッコを使う

例えば次のような条件式：

if (!isLoggedIn && isAdmin || isGuest) {
  // ...
}
JavaScript

ぱっと見て意味が分かりますか？
正直かなり厳しいと思います。

優先順位に従うと、

  1. !isLoggedIn
  2. !isLoggedIn && isAdmin
  3. その結果と isGuest を OR

つまり

if ((!isLoggedIn && isAdmin) || isGuest) {
  // ログインしていない管理者、またはゲスト
}
JavaScript

という意味になります。

これを「狙って」書いているのだとしても、
読み手にはかなり不親切です。

少し分解してみましょう。

const isAdminWhileLoggedOut = !isLoggedIn && isAdmin;

if (isAdminWhileLoggedOut || isGuest) {
  // ...
}
JavaScript

もしくは、カッコを使って意味をハッキリさせるだけでもかなり違います。

if ((!isLoggedIn && isAdmin) || isGuest) {
  // ...
}
JavaScript

ここが重要です。
優先順位を「覚える」のではなく、
“自分が意図した優先順位をカッコで固定する” というスタンスが大事です。
カッコを増やすことを「ダサい」と思わなくていい。
むしろ、「意味が一目で伝わる条件式」が一番かっこいいです。

範囲条件は必ず AND とカッコで

数学のノリで、

1 < x < 10
JavaScript

と書きたくなりますが、JavaScript では別物になります。

JavaScript 的には：

(1 < x) < 10
JavaScript

と解釈され、

  1. 1 < x が true / false になる
  2. その true / false を数値（true → 1, false → 0）に変換して
  3. それが 10 より小さいかを比較

というわけのわからない式になります。

正しい書き方は必ずこうです。

1 < x && x < 10
JavaScript

もしくは、分かりやすくカッコで囲んで書いても良いです。

(1 < x) && (x < 10)
JavaScript

ここが重要です。
「不等号を 2 つ並べる」書き方は JavaScript では使えない。
必ず AND とカッコで「2 つの条件」に分けて書く。
これも優先順位の“罠”にハマらないための大事なルールです。

NOT（!）の優先順位と「どこにかけるか」の設計

NOT は一番強い（先に処理される）

! は論理演算子の中で一番優先順位が高いので、
式の中にあれば真っ先に評価されます。

!a && b
JavaScript

は

(!a) && b
JavaScript

です。

問題は、「式全体を否定したいのか、一部だけを否定したいのか」が曖昧になる場面です。

例：否定をどこにかけるかで意味が変わる

// 1. 「(A かつ B) ではない」
!(a && b)

// 2. 「A ではない かつ B ではない」
!a && !b
JavaScript

1 は「どちらか一方でも false なら true」
2 は「両方 false のときだけ true」
全く意味が違います。

例えば、a と b がどちらも true のとき：

  1. a && b → true → !true → false
  2. !a && !b → false && false → false

ここは同じですが、

a = true, b = false の場合：

  1. a && b → false → !false → true
  2. !a && !b → false && true → false

と分かれます。

ここが重要です。
否定したい「範囲」を明確にするために、
! を使うときは必ずカッコとセットで考える癖をつけてください。
!(...) なのか !a && !b なのかで、論理的な意味がまったく変わります。

現実的な結論：「全部覚えよう」としなくていい

使うべき優先順位の“最小セット”

正直な話、演算子の優先順位表を全部暗記する必要はありません。
実務で本当に意識したいのは、これくらいです。

  1. 比較演算子（> < === など）は、論理演算子より先に評価される
  2. 論理演算子の中では ! → && → || の順に強い
  3. それ以外は、迷ったらカッコで明示する

例えば、このくらいの感覚で十分です。

  • x > 0 && x < 10 は (x > 0) && (x < 10)
  • !a && b || c は ((!a) && b) || c
  • a || b && c は a || (b && c)

一番大事なのは「読みやすさ」

次の 2 つの条件式を比べてみてください。

// パターンA
if (!a && b || c) { ... }

// パターンB
const needCheck = !a && b;
if (needCheck || c) { ... }

// パターンC
if ((!a && b) || c) { ... }
JavaScript

どちらが「意味を想像しやすいか」。
書いた本人でさえ、1 週間後に A の意味をパッと説明するのは難しいはずです。

ここが重要です。
優先順位の話は、「JavaScript がどう解釈するか」という話であって、
「自分がどう書くべきか」の最終ゴールは「読みやすさ」です。
“優先順位を知った上で、あえてカッコで明示する” というのが、一番賢い使い方です。

初心者として論理演算子の優先順位で本当に押さえてほしいこと

比較演算子（> < === など）は、&& や || より先に評価される。
論理演算子の中では ! → && → || の順で優先順位が高い。

a || b && c は a || (b && c) として評価される。
AND と OR が混ざったら、自分が意図したグループにカッコをつける。

! は強いので、どこを否定したいのかをカッコで明確にする。
!(a && b) と !a && !b は全く別物。

数学のような 1 < x < 10 は NG。
必ず 1 < x && x < 10 と2つの条件＋ANDで書く。

ここが重要です。
優先順位を完璧に暗記しようとするより、
「自分と他人が一発で意味を理解できるようにカッコで補強する」ことに意識を使ってください。
その上で、! → && → || というざっくりした順番だけ頭に入れておけば、
論理演算子まわりのバグにはほとんど困らなくなります。

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

const a = true;
const b = false;
const c = true;

console.log(!a || b && c);          // これはどう評価される？
console.log((!a || b) && c);        // 上と同じ意味か？

const x = 5;
console.log(1 < x && x < 10);       // これは何を意味している？

const isLoggedIn = false;
const isAdmin = true;
console.log(!isLoggedIn && isAdmin || false);   // カッコを付けて説明してみる
JavaScript

それぞれの式に、自分でカッコを足しながら「日本語の条件」に翻訳してみてください。
その作業そのものが、優先順位を本当に“自分のもの”にする一番の近道です。

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