JavaScriptにおけるプログラム開発において、条件分岐はロジックの根幹を成す重要な要素です。

特に「AまたはBのどちらかが成り立つ場合」という条件を扱う際に欠かせないのがOR演算子（||）です。

しかし、単純な条件分岐であっても、複数の条件が重なるとコードの可読性が低下したり、予期せぬバグの原因になったりすることもあります。

本記事では、JavaScriptのif文におけるOR演算子の基本的な使い方から、2026年現在のモダンな開発環境で推奨される効率的な記述テクニック、さらには間違いやすい挙動であるショートサーキット評価やNull合体演算子との使い分けまでを詳しく解説します。

目次 [ close ]
  1. JavaScriptにおけるOR演算子の基本概念
    1. ||演算子の仕組みと真偽値の評価
  2. ショートサーキット評価（短絡評価）の活用
    1. 処理の効率化とエラー防止
  3. if文でのOR演算子の実践的な使い方
    1. 複数の値を一括でチェックする
    2. デフォルト値の設定と注意点
  4. OR演算子をよりスマートに記述するリファクタリング技術
    1. Array.prototype.includes() を活用した可読性の向上
    2. 論理和の連鎖を避けるための設計
  5. OR演算子（||）とNull合体演算子（??）の使い分け
    1. Falsyな値による意図しない挙動を防ぐ
  6. まとめ

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

JavaScriptで「または（OR）」を表現するには、||（垂直バーを2つ並べた記号）を使用します。

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

||演算子の仕組みと真偽値の評価

まずは、基本的なif文での使用例を見てみましょう。

以下のコードは、ユーザーの役割（role）が「管理者（admin）」または「編集者（editor）」のいずれかである場合にアクセスを許可する例です。

JavaScript
// ユーザーの権限を定義
const userRole = "editor";

// roleがadminまたはeditorであれば許可
if (userRole === "admin" || userRole === "editor") {
    console.log("管理画面へのアクセスを許可します。");
} else {
    console.log("アクセス権限がありません。");
}
実行結果
管理画面へのアクセスを許可します。

この例では、userRole === "admin"が偽（false）であっても、userRole === "editor"が真（true）であるため、if文の中の処理が実行されます。

JavaScriptのOR演算子がどのように判定を行うかを整理すると、以下の表のようになります。

左辺の評価右辺の評価全体の結果
truetruetrue
truefalsetrue
falsetruetrue
falsefalsefalse

このように、両方の条件がfalseである場合にのみ、全体の結果がfalseになるという点がOR演算子の特徴です。

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

OR演算子を使いこなす上で絶対に理解しておくべき概念がショートサーキット評価（短絡評価）です。

これは、JavaScriptエンジンが効率化のために、結果が確定した時点で評価を打ち切る仕組みを指します。

処理の効率化とエラー防止

OR演算子の場合、左辺の式を評価してtrueであった場合、右辺の式が何であれ全体の結果は必ずtrueになります。

そのため、JavaScriptは左辺がtrueなら右辺を評価しません。

この性質を利用することで、特定の条件下でしか実行したくない処理を安全に記述したり、パフォーマンスを最適化したりすることが可能です。

JavaScript
// 重い処理やエラーの可能性がある関数
function heavyProcess() {
    console.log("重い処理を実行しました。");
    return true;
}

const isAuthorized = true;

// isAuthorizedがtrueなので、heavyProcess()は実行されない
if (isAuthorized || heavyProcess()) {
    console.log("チェックが完了しました。");
}
実行結果
チェックが完了しました。

上記のコードでは、isAuthorizedがすでにtrueであるため、右側のheavyProcess()は呼び出されません。

これにより、無駄な計算リソースの消費を防ぐことができます。

また、オブジェクトの存在確認をしてからプロパティを参照するような場合にも、エラーを防ぐためのテクニックとして古くから利用されてきました。

if文でのOR演算子の実践的な使い方

実際の開発現場では、単純な二択の条件だけでなく、より複雑なケースでOR演算子が必要になります。

ここでは、よくある実装パターンを紹介します。

複数の値を一括でチェックする

例えば、特定の入力値が複数の許可された値のいずれかに該当するかをチェックするシーンです。

JavaScript
const inputDevice = "tablet";

// 複数のデバイスタイプを許容する
if (inputDevice === "mobile" || inputDevice === "tablet" || inputDevice === "desktop") {
    console.log("対応しているデバイスです。");
}
実行結果
対応しているデバイスです。

このように、複数の条件を||で繋ぐことで、いずれかに合致する場合の処理を簡潔に書くことができます。

ただし、条件の数が5つ、10つと増えていく場合は、後述するArray.includes()を用いた手法へのリファクタリングを検討すべきです。

デフォルト値の設定と注意点

OR演算子はif文の中だけでなく、変数の代入時にも「デフォルト値の設定」として頻繁に利用されます。

JavaScript
function greet(name) {
    // nameが渡されなかった（undefinedだった）場合にデフォルト値を代入
    const userName = name || "ゲスト";
    console.log("こんにちは、" + userName + "さん");
}

greet("田中");
greet();
実行結果
こんにちは、田中さん
こんにちは、ゲストさん

JavaScriptにおいて、undefined、null、0、空文字（""）、NaNはすべてFalsy（偽として扱われる値）です。

OR演算子は左辺がFalsyであれば右辺を返すため、これを利用して「値がない場合の予備」を指定できるのです。

ただし、この手法には注意が必要です。

例えば「数値の0」を正当な入力として受け取りたい場合でも、0はFalsyであるためデフォルト値に上書きされてしまいます。

OR演算子をよりスマートに記述するリファクタリング技術

if文の中に||が大量に並ぶと、コードの可読性が著しく低下します。

2026年のJavaScript開発においては、より宣言的で読みやすい書き方が好まれます。

Array.prototype.includes() を活用した可読性の向上

先ほどのデバイスチェックの例を、includes()メソッドを使って書き換えてみましょう。

JavaScript
const inputDevice = "tablet";
const allowedDevices = ["mobile", "tablet", "desktop"];

// 配列に含まれているかどうかで判定
if (allowedDevices.includes(inputDevice)) {
    console.log("対応デバイスです（includesを使用）。");
}
実行結果
対応デバイスです（includesを使用）。

このように記述することで、「何と比較しているのか」というリストが明確になり、条件が増えた際も配列に要素を追加するだけで済むため、メンテナンス性が劇的に向上します。

また、「条件のデータ」と「判定のロジック」を分離できるのも大きなメリットです。

論理和の連鎖を避けるための設計

複数の条件が複雑に絡み合う場合、if文の中に直接OR演算子を書き込むのではなく、意味のある名前をつけた変数に結果を格納することを検討してください。

JavaScript
// 複雑な条件
const isAdmin = user.role === "admin";
const isTrialUser = user.status === "trial" && user.daysLeft > 0;
const hasPremiumAccess = user.subscription === "premium";

// 変数名によって意図が伝わりやすくなる
if (isAdmin || isTrialUser || hasPremiumAccess) {
    showExclusiveContent();
}

この手法は「説明用変数」と呼ばれ、後からコードを読み返した際に「なぜこの条件分岐があるのか」を即座に理解する助けとなります。

OR演算子（||）とNull合体演算子（??）の使い分け

JavaScriptにはOR演算子と非常によく似た挙動をするNull合体演算子（??）が存在します。

これらを混同すると、バグの原因になります。

Falsyな値による意図しない挙動を防ぐ

OR演算子（||）は、左辺がFalsy（0, “”, false, null, undefined）であれば右辺を評価します。

一方、Null合体演算子（??）は、左辺がnull または undefinedの場合のみ右辺を評価します。

以下の比較例を見てみましょう。

JavaScript
const userCount = 0;

// OR演算子の場合
const resultOR = userCount || 10; 
console.log("ORの結果: " + resultOR); // 0はFalsyなので10になる

// Null合体演算子の場合
const resultNullish = userCount ?? 10;
console.log("Null合体の結果: " + resultNullish); // 0はnull/undefinedではないので0になる
実行結果
ORの結果: 10
Null合体の結果: 0

「値が未定義のときだけデフォルト値を使いたい。しかし、0や空文字はそのまま保持したい」というケースでは、||ではなく??を使うのが正解です。

if文の条件式においても、厳密に「値が存在しないこと」を確認したいのか、単に「真偽値として評価したいのか」によって使い分ける必要があります。

まとめ

JavaScriptのif文におけるOR演算子（||）は、複数の条件を柔軟に組み合わせるための強力なツールです。

本記事で解説した重要ポイントを振り返りましょう。

  • 基本原則：いずれかの条件が真であれば、全体が真となる。
  • ショートサーキット評価：左辺が真であれば右辺を無視するため、処理の効率化やエラー回避に役立つ。
  • リファクタリング：条件が多い場合はArray.includes()を使い、可読性を高める。
  • 演算子の選択：0や空文字を許容したい場合は、OR演算子ではなくNull合体演算子（??）の検討が必要。

これらのテクニックを適切に使い分けることで、JavaScriptのコードはより堅牢で、かつ読みやすいものになります。

特にショートサーキット評価の仕組みを深く理解しておくことは、複雑なフロントエンド開発において意図しない動作を防ぐための大きな武器となるでしょう。

日々のプログラミングの中で、単に「動く」コードを書くだけでなく、OR演算子を戦略的に活用して、より洗練されたコードを追求してみてください。