JavaScript論理演算子の基礎と実践：&&、||、?? の使い分けと短絡評価の活用方法

JavaScriptにおける論理演算子は、単なる条件分岐の補助ツールにとどまらず、コードの簡潔性や安全性を高めるための極めて重要な要素です。

現代のフロントエンド開発やNode.jsを用いたバックエンド開発において、これらの演算子を正確に使い分けることは、バグの混入を防ぎ、メンテナンス性の高いコードを記述するために欠かせません。

本記事では、基本的な論理演算子の仕組みから、短絡評価の応用、そして比較的新しいNull合体演算子や論理代入演算子の実践的な活用方法までを詳しく掘り下げていきます。

開発現場で即座に役立つ知識を整理し、2026年の標準的なコーディングスタイルに基づいた最適な実装パターンを学んでいきましょう。

JavaScriptにおける論理演算子の基本概念

JavaScriptの論理演算子には、主に論理積（AND）、論理和（OR）、論理否定（NOT）の3種類が存在します。

これらの演算子は、複数の条件を組み合わせたり、特定の条件に基づいて処理を分岐させたりする際に頻繁に使用されます。

まずは、それぞれの基本的な動作と真偽値の扱いについて確認していきましょう。

論理積（&&）の仕組み

論理積（AND）演算子は、&&という記号で表されます。

この演算子は、左辺と右辺の両方が真（true）である場合にのみ、真の結果を返します。

JavaScriptの仕様では、単に真偽値を返すだけでなく、最後に評価された値をそのまま返すという特徴があります。

// 両方がtrueの場合
const result1 = true && true;
console.log(result1);

// 片方がfalseの場合
const result2 = true && false;
console.log(result2);

// 値を返す性質の確認
const result3 = "Hello" && "World";
console.log(result3);

true
false
"World"

論理和（||）の仕組み

論理和（OR）演算子は、||という記号で記述します。

この演算子は、左辺または右辺のどちらか一方が真（true）であれば、全体として真の結果を返します。

論理積と同様に、最初に真と判定された値を返し、どちらも偽（false）の場合は最後の値を返します。

// 片方がtrueの場合
const result1 = true || false;
console.log(result1);

// 両方がfalseの場合
const result2 = false || false;
console.log(result2);

// デフォルト値としての活用
const username = "" || "Guest";
console.log(username);

true
false
"Guest"

論理否定（!）の仕組み

論理否定（NOT）演算子は、!記号を用いて、真偽値を反転させます。

真（true）は偽（false）に、偽（false）は真（true）に変換されます。

また、!!のように2つ重ねることで、任意の値を明示的に真偽値型（Boolean）に変換するテクニックも広く使われています。

const isAdmin = true;
console.log(!isAdmin);

const count = 0;
// 0はFalsyなので、!countはtrue、!!countはfalseになる
console.log(!!count);

false
false

Truthy（真に近い）とFalsy（偽に近い）の理解

JavaScriptの論理演算子をマスターするためには、Boolean型以外の値がどのように判定されるかを知る必要があります。

JavaScriptでは、すべての値が「Truthy」か「Falsy」のいずれかに分類されます。

条件式において偽（false）として扱われるFalsyな値は、以下の表の通り限定的です。

これら以外の値、例えば空の配列 [] や空のオブジェクト {}、”0″ という文字列などはすべてTruthyとして扱われる点に注意が必要です。

この仕様を正しく理解していないと、意図しない条件分岐が発生し、デバッグの難しいバグの原因となります。

短絡評価（ショートサーキット評価）の活用

論理演算子 && と || は、結果が確定した時点で評価を打ち切る「短絡評価」という性質を持っています。

これを利用することで、if文を使わずに簡潔なコードを書くことが可能になります。

AND演算子によるガード節の実装

&& 演算子は、左辺が偽であれば右辺を評価しません。

これを利用して、オブジェクトが存在する場合にのみメソッドを実行する「ガード節」のような書き方ができます。

const user = {
  getName: () => "田中太郎"
};

// userが存在する場合のみgetName()を実行する
const name = user && user.getName();
console.log(name);

const guest = null;
// guestはnull（Falsy）なので、getNameは実行されずnullが返る
const guestName = guest && guest.getName();
console.log(guestName);

"田中太郎"
null

OR演算子によるデフォルト値の設定

|| 演算子は、左辺が真であれば右辺を評価しません。

これを利用して、変数が未定義や空の場合にデフォルト値を代入する処理がよく記述されます。

function greet(name) {
  const displayName = name || "匿名希望";
  console.log("こんにちは、" + displayName + "さん");
}

greet("佐藤");
greet("");

"こんにちは、佐藤さん"
"こんにちは、匿名希望さん"

ただし、この手法には数値の0や空文字もデフォルト値に置き換わってしまうという注意点があります。

Null合体演算子（??）の登場と重要性

前述の || 演算子によるデフォルト値設定の問題を解決するために導入されたのが、Null合体演算子 ?? です。

この演算子は、左辺が null または undefined の場合にのみ右辺を返します。

つまり、数値の0や空文字を有効な値として扱いたい場合に非常に有効です。

|| と ?? の動作比較

以下のコード例で、その違いを明確に確認してみましょう。

const score = 0;

// OR演算子の場合：0はFalsyなので、右辺が採用される
const resultOR = score || 100;

// Null合体演算子の場合：0はnull/undefinedではないので、左辺が採用される
const resultNullish = score ?? 100;

console.log("ORの結果:", resultOR);
console.log("Nullishの結果:", resultNullish);

ORの結果: 100
Nullishの結果: 0

現代のJavaScript開発（2026年時点）では、単なる存在チェックに基づくデフォルト値設定には ?? を使用することが推奨されています。

これにより、「設定値が0だったのにデフォルト値に上書きされた」といった計算ミスを防ぐことができます。

論理代入演算子によるコードの効率化

ES2021で導入された論理代入演算子は、論理演算と代入を組み合わせた短縮記法です。

これらを使うことで、変数の書き換え処理をより直感的に記述できます。

各論理代入演算子の役割

• &&= : 左辺がTruthyな場合に、右辺の値を代入する。
• ||= : 左辺がFalsyな場合に、右辺の値を代入する。
• ??= : 左辺がNullish（nullまたはundefined）な場合に、右辺の値を代入する。

let config = { timeout: 0, title: "" };

// timeoutがnull/undefinedの場合のみデフォルト値を設定
config.timeout ??= 3000;

// titleがFalsy（空文字など）の場合にデフォルト値を設定
config.title ||= "Untitled";

console.log(config);

{ timeout: 0, title: "Untitled" }

このように、オブジェクトのプロパティを初期化する際に、冗長なif文を排除してスマートに記述できるのがメリットです。

実践的な使い分けのガイドライン

多くの演算子が存在するため、どの場面でどれを使うべきか迷うことがあるかもしれません。

判断基準を明確にするためのガイドラインを以下にまとめます。

条件に応じた実行（実行制御）

特定の条件が満たされたときだけ関数を呼び出したい場合は、&& を使用します。

ReactなどのUIライブラリにおいて、特定のフラグが立っているときにだけコンポーネントを表示する処理でも多用されます。

値のフォールバック（デフォルト値）

変数が空（nullやundefined）の可能性がある場合に安全な値を確保したいなら、?? を優先してください。

一方で、古いブラウザへの対応が必要なレガシーなプロジェクトや、明示的に空文字や0を「無効な値」として扱いたい場合には || が適しています。

オプショナルチェイニングとの組み合わせ

現代のJavaScriptでは、オプショナルチェイニング ?. と論理演算子を組み合わせるパターンが非常に強力です。

深い階層にあるプロパティに安全にアクセスしつつ、取得できなかった場合のデフォルト値を設定する流れは、標準的な実装パターンとなっています。

const apiResponse = {
  data: {
    settings: null
  }
};

// settingsがnullなので、?. 以降は評価されず、?? によってデフォルト値が入る
const theme = apiResponse.data?.settings?.theme ?? "light";
console.log(theme);

"light"

論理演算子を使用する際の注意点とベストプラクティス

論理演算子は強力ですが、多用しすぎるとコードの可読性を損なう恐れがあります。

以下のポイントに注意して、クリーンなコードを維持しましょう。

複雑な条件式の分割

1つの行に && や || を何個も連結させると、優先順位がわかりにくくなります。

複雑な論理式は、意味のある単位で変数に切り出すか、括弧 () を使って明示的に優先順位を示すべきです。

演算子の優先順位に配慮する

特に ?? は && や || と直接混ぜて書くことが禁止されており、構文エラーになります。

これらを併用する場合は、必ず括弧で囲む必要があります。

// エラーになる例
// const value = a && b ?? c; 

// 正しい例
const value = (a && b) ?? c;

パフォーマンスへの影響

論理演算子の短絡評価は、パフォーマンスの最適化にも寄与します。

重い処理を伴う関数呼び出しを条件式の右辺に配置することで、不要な計算を避けることができます。

条件が複雑な場合は、計算コストが低い判定を左辺に配置するのが定石です。

まとめ

JavaScriptの論理演算子は、言語の進化とともにその利便性を高めてきました。

基本的な && や || の短絡評価に加え、Null合体演算子 ?? や論理代入演算子を適切に使い分けることで、コードの堅牢性は劇的に向上します。

特に「Falsyな値」と「Nullishな値」の違いを正確に把握することは、意図しない挙動を防ぐための第一歩です。

今回解説したテクニックを日々の開発に取り入れ、簡潔で読みやすく、かつ安全なプログラムを目指してください。

2026年のJavaScript開発においても、これらの基礎知識は変わらず最重要のスキルセットであり続けるでしょう。