【JavaScript】AND・OR・NOT演算子の使い方｜論理演算子と??・?.まで完全解説

この記事で学べること

• 論理演算子（&&・||・!）の基本と評価ルール
• 短絡評価（ショートサーキット）の仕組みと活用法
• 論理演算子が「値を返す」メカニズム
• Null合体演算子（??）と || の違い
• Optional Chaining（?.）の使い方
• フォームバリデーション・権限チェック等の実務パターン
• falsyな値・演算子の優先順位・よくあるミス

ポイント：falsyな値は6つだけ

false、0（と -0）、""（空文字列）、null、undefined、NaN の6つがfalsyです。それ以外はすべてtruthy（空配列 [] や空オブジェクト {} もtruthy）です。

// falsyな値（6つ）
Boolean(false);      // false
Boolean(0);          // false
Boolean('');         // false（空文字列）
Boolean(null);       // false
Boolean(undefined);  // false
Boolean(NaN);        // false

// truthyな値（上記以外すべて）
Boolean(1);          // true
Boolean('hello');    // true
Boolean([]);         // true（空配列もtruthy!）
Boolean({});         // true（空オブジェクトもtruthy!）
Boolean('0');       // true（文字列の"0"はtruthy!）

const age = 25;
const hasLicense = true;

// 両方の条件を満たすかチェック
if (age >= 18 && hasLicense) {
  console.log('運転できます');
}
// => "運転できます"

// 3つ以上の条件も連結可能
const user = { age: 20, isVerified: true, country: 'JP' };

if (user.age >= 18 && user.isVerified && user.country === 'JP') {
  console.log('サービスを利用できます');
}
// => "サービスを利用できます"

// 左辺がfalsyなら右辺は実行されない
false && console.log('表示されない');
// 何も表示されない（右辺が評価されない）

true && console.log('表示される');
// => "表示される"（左辺がtruthyなので右辺も評価）

// 実用例：オブジェクトの存在チェック
const user = null;
user && console.log(user.name);
// userがnull（falsy）なので右辺は実行されず、エラーにならない

// 左辺がfalsyなら → 左辺の値を返す
0 && 'hello';         // 0
'' && 'hello';        // ""
null && 'hello';      // null
undefined && 'hello'; // undefined

// 左辺がtruthyなら → 右辺の値を返す
1 && 'hello';         // "hello"
'abc' && 42;          // 42
true && 'world';      // "world"

// 3つ以上の場合：最初のfalsyを返す。全部truthyなら最後の値
1 && 2 && 3;            // 3（全部truthy → 最後の値）
1 && 0 && 3;            // 0（最初のfalsyで止まる）
1 && '' && 3;           // ""（最初のfalsyで止まる）

const day = 'Saturday';

// どちらかの条件を満たせばOK
if (day === 'Saturday' || day === 'Sunday') {
  console.log('週末です');
}
// => "週末です"

// 3つ以上の条件
const ext = '.png';

if (ext === '.jpg' || ext === '.png' || ext === '.gif') {
  console.log('画像ファイルです');
}
// => "画像ファイルです"

// 左辺がtruthyなら → 左辺の値を返す（右辺は無視）
'hello' || 'world';    // "hello"
1 || 2;                 // 1
true || false;          // true

// 左辺がfalsyなら → 右辺の値を返す
0 || 'default';         // "default"
'' || 'fallback';      // "fallback"
null || '代わりの値';   // "代わりの値"

// 3つ以上の場合：最初のtruthyを返す。全部falsyなら最後の値
0 || '' || 'hello';     // "hello"（最初のtruthy）
0 || '' || null;         // null（全部falsy → 最後の値）

// 関数の引数にデフォルト値を設定
function greet(name) {
  name = name || 'ゲスト';
  console.log('こんにちは、' + name + 'さん');
}

greet('太郎');     // "こんにちは、太郎さん"
greet();            // "こんにちは、ゲストさん"（undefinedはfalsy）
greet(null);        // "こんにちは、ゲストさん"（nullもfalsy）

// 設定値の読み込み
const config = {};
const port = config.port || 3000;
console.log(port); // 3000（config.portはundefined → falsy）

注意：|| によるデフォルト値設定には落とし穴があります。0 や ""（空文字列）も falsy なので、これらを有効な値として使いたい場合は意図しない動作になります。この問題を解決するのが後述のNull合体演算子（??）です。

// true/false の反転
!true;          // false
!false;         // true

// 条件の否定
const isLoggedIn = false;

if (!isLoggedIn) {
  console.log('ログインしてください');
}
// => "ログインしてください"

// truthyな値をfalseに変換
!'hello';       // false（文字列はtruthy → 反転してfalse）
!42;            // false
![];            // false（空配列もtruthy → false）

// falsyな値をtrueに変換
!0;             // true
!'';            // true
!null;          // true
!undefined;     // true

// !!で任意の値をbooleanに変換
!!'hello';      // true（"hello" → false → true）
!!0;            // false（0 → true → false）
!!null;         // false
!!undefined;    // false
!!1;            // true
!![];           // true
!!{};           // true

// Boolean()と同じ結果
!!'hello' === Boolean('hello'); // true
!!0 === Boolean(0);             // true

// 実用例：APIレスポンスの存在チェック
const data = fetchData();
const hasData = !!data;  // booleanとして保存

!! vs Boolean() どちらを使うべき？

どちらも結果は同じですが、Boolean() の方が意図が明確です。チームのコーディング規約に合わせましょう。!! はコードが短いため、条件式の中でよく使われます。

// || はfalsyな値すべてでデフォルト値を使う
0 || 10;          // 10 （0はfalsy → 意図しない！）
'' || 'default';  // "default"（空文字もfalsy → 意図しない！）
null || 10;       // 10

// ?? はnull/undefinedのときだけデフォルト値を使う
0 ?? 10;          // 0  （0はnullでもundefinedでもない → そのまま）
'' ?? 'default';  // "" （空文字もそのまま）
false ?? true;     // false（falseもそのまま）
null ?? 10;       // 10 （nullなのでデフォルト値を使う）
undefined ?? 10;  // 10 （undefinedなのでデフォルト値を使う）

// ユーザー設定の読み込み（0や空文字を有効な値として扱う）
const userSettings = {
  volume: 0,       // 0は「ミュート」として有効な値
  nickname: '',    // 空文字は「ニックネーム未設定」として有効
  theme: null,      // nullは「未設定」
};

// || だと0や空文字がデフォルト値に置き換わってしまう
const vol1 = userSettings.volume || 50;     // 50（0がfalsyなので意図しない！）
const nick1 = userSettings.nickname || '匿名'; // "匿名"（空文字がfalsyなので意図しない！）

// ?? なら正しく動く
const vol2 = userSettings.volume ?? 50;     // 0（意図通り）
const nick2 = userSettings.nickname ?? '匿名'; // ""（意図通り）
const theme = userSettings.theme ?? 'light';  // "light"（nullなのでデフォルト値）

const user = {
  name: '太郎',
  address: {
    city: '東京'
  }
};

// 従来の書き方（&&で安全にアクセス）
const city1 = user && user.address && user.address.city;
console.log(city1); // "東京"

// Optional Chainingを使った書き方
const city2 = user?.address?.city;
console.log(city2); // "東京"

// 存在しないプロパティにアクセスしてもエラーにならない
const zip = user?.address?.zipCode;
console.log(zip);  // undefined（エラーにならない）

// nullのオブジェクトでも安全
const guest = null;
console.log(guest?.name);           // undefined
console.log(guest?.address?.city);  // undefined

const user = {
  getName() { return '太郎'; },
  scores: [80, 90, 100]
};

// メソッド呼び出し
user.getName?.();        // "太郎"
user.getAge?.();         // undefined（メソッドが無くてもエラーにならない）

// 配列アクセス
user.scores?.[0];        // 80
user.grades?.[0];        // undefined

// ??と組み合わせてデフォルト値を設定
const city = user?.address?.city ?? '不明';
console.log(city); // "不明"（addressがないのでundefined → ??でデフォルト値）

ポイント：?. と ?? の組み合わせが最強

user?.address?.city ?? '不明' のように、?. で安全にアクセスしつつ ?? でデフォルト値を設定するパターンは、モダンJavaScriptで非常によく使われます。

function validateForm(form) {
  const errors = [];

  // AND: すべての条件を満たす必要がある
  if (!form.name || form.name.length < 2) {
    errors.push('名前は2文字以上で入力してください');
  }

  // メールアドレスの形式チェック
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!form.email || !emailRegex.test(form.email)) {
    errors.push('有効なメールアドレスを入力してください');
  }

  // パスワードの複数条件チェック
  if (
    form.password.length >= 8 &&
    /[A-Z]/.test(form.password) &&
    /[0-9]/.test(form.password)
  ) {
    console.log('パスワードOK');
  } else {
    errors.push('パスワードは8文字以上、大文字と数字を含めてください');
  }

  return errors;
}

function canEditPost(user, post) {
  // 管理者 または 投稿者本人 なら編集可能
  return user.role === 'admin' || user.id === post.authorId;
}

function canAccessDashboard(user) {
  // ログイン済み かつ メール認証済み かつ (管理者 または 編集者)
  return (
    user.isLoggedIn &&
    user.isEmailVerified &&
    (user.role === 'admin' || user.role === 'editor')
  );
}

// 使用例
const user = { isLoggedIn: true, isEmailVerified: true, role: 'editor' };
console.log(canAccessDashboard(user)); // true

// && を使った条件付きレンダリング
function UserProfile({ user, isLoading }) {
  return (
    <div>
      {isLoading && <p>読み込み中...</p>}

      {user && (
        <div>
          <h2>{user.name}</h2>
          <p>{user.email}</p>
        </div>
      )}

      {/* || でデフォルト表示 */}
      <img src={user?.avatar || '/default-avatar.png'} />

      {/* 三項演算子との使い分け */}
      {user?.isAdmin ? <AdminPanel /> : <UserPanel />}
    </div>
  );
}

Reactで&&を使うときの注意

{count && <p>{count}件</p>} のように数値を左辺にすると、countが0のとき画面に「0」が表示されてしまいます。{count > 0 && <p>{count}件</p>} のように、明示的にbooleanにしましょう。

// 悪い例：ネストが深くなる
function processOrderBad(order) {
  if (order) {
    if (order.items.length > 0) {
      if (order.isPaid) {
        // メイン処理...
      }
    }
  }
}

// 良い例：ガード節で早期リターン
function processOrderGood(order) {
  if (!order) return;
  if (order.items.length === 0) return;
  if (!order.isPaid) return;

  // メイン処理（ネストなし！）
  console.log('注文を処理します');
}

let x = 5;

// = は代入（バグの原因！）
if (x = 10) {  // xに10を代入。10はtruthy → 常にtrue!
  console.log(x); // 10（xが書き換わっている）
}

// == は緩い比較（型変換あり）
5 == '5';      // true（文字列"5"を数値5に変換して比較）
0 == false;    // true（falseを数値0に変換して比較）
'' == false;   // true
null == undefined; // true

// === は厳密比較（型変換なし） ← 推奨！
5 === '5';     // false（型が違う）
0 === false;   // false（型が違う）
null === undefined; // false（型が違う）

ポイント：常に === を使おう

特別な理由がない限り、比較には===（厳密等価演算子）を使いましょう。== は暗黙の型変換により予想外の結果になることがあります。ESLintの eqeqeq ルールで強制するのがベストプラクティスです。

// && は || より優先順位が高い
true || false && false;
// ↓ 内部的にはこう評価される
true || (false && false);
// true || false => true

// 意図が「(true || false) && false」なら括弧が必要
(true || false) && false;
// true && false => false

// 実務例：括弧で意図を明確に
const canAccess =
  (role === 'admin' || role === 'editor') && isActive;
// ↑ 管理者か編集者 かつ アクティブ

注意：?? と || / && は直接混在できない

a || b ?? c のように ?? と ||（または &&）を括弧なしで併用するとSyntaxErrorになります。必ず (a || b) ?? c のように括弧で囲みましょう。

この記事のまとめ

• &&（AND）は両方trueのときtrue。短絡評価で左辺がfalsyなら右辺を無視
• ||（OR）はどちらかがtrueならtrue。デフォルト値の設定に便利
• !（NOT）は真偽値を反転。!!でboolean変換ができる
• ??（Null合体）は || と違い、0や空文字を有効な値として扱う
• ?.（Optional Chaining）でネストしたプロパティに安全にアクセスできる
• && は || より優先順位が高い。迷ったら括弧を使う
• 比較は常に ===（厳密等価演算子）を使い、falsyな値の6つを覚えておく