JavaScript | 複数条件をまとめる（AND && / OR ||）

ここでは「&&」「||」を実際のアプリ開発でどう使うかを、3つの実践シーンで具体的に見ていきます。
初心者でもわかるように、一歩ずつ解説します。

実践例①：フォームバリデーション（入力チェック）

🧩 シチュエーション

ユーザー登録フォームで、名前とメールアドレスの入力をチェックしたい。
どちらかが空ならエラーを表示する。

let name = "田中";
let email = "";

if (!name || !email) {
  console.log("エラー: 名前とメールアドレスを入力してください");
} else {
  console.log("登録完了！");
}

let name = "田中";
let email = "";

if (!name || !email) {
  console.log("エラー: 名前とメールアドレスを入力してください");
} else {
  console.log("登録完了！");
}

✅ ポイント解説

• !name は「name が空文字なら true」。
• !email も同じ。
• ||（または）を使って「どちらかが未入力ならエラー」を簡単に書けます。
• 両方入力済みのときだけ「登録完了！」が表示されます。

💡 現場ではこのロジックを送信ボタンのクリックイベントで使います。

document.querySelector("#submit").addEventListener("click", () => {
  if (!name || !email) alert("すべての項目を入力してください！");
});

document.querySelector("#submit").addEventListener("click", () => {
  if (!name || !email) alert("すべての項目を入力してください！");
});

実践例②：複雑な権限チェック（管理画面アクセス）

🧩 シチュエーション

管理画面にアクセスできるのは、

• 管理者（isAdmin）
  または
• 一般ユーザーでも「ログイン済み」かつ「プレミアム会員（isPremium）」の場合

let isAdmin = false;
let isLoggedIn = true;
let isPremium = true;

if (isAdmin || (isLoggedIn && isPremium)) {
  console.log("管理画面にアクセス可能");
} else {
  console.log("アクセス権限がありません");
}

let isAdmin = false;
let isLoggedIn = true;
let isPremium = true;

if (isAdmin || (isLoggedIn && isPremium)) {
  console.log("管理画面にアクセス可能");
} else {
  console.log("アクセス権限がありません");
}

✅ ポイント解説

• && と || を組み合わせると、「条件のグループ化」ができます。
• かっこ () を忘れずに！
  これがないと意図と違う評価順序になりがちです。
• この条件は人間の言葉にすると： 「管理者」または「ログインしていて、しかもプレミアム会員ならOK」

実践例③：短絡評価（遅延実行・安全な呼び出し）

A) 関数を安全に呼び出す（&&）

let user = {
  name: "Alice",
  showMessage: function() {
    console.log("こんにちは " + this.name + " さん");
  }
};

// user が null の可能性があるとき
user && user.showMessage(); 

let user = {
  name: "Alice",
  showMessage: function() {
    console.log("こんにちは " + this.name + " さん");
  }
};

// user が null の可能性があるとき
user && user.showMessage(); 

✅ ポイント

• user が null や undefined のときは user.showMessage() が実行されない。
• && の短絡評価により、「安全に」関数を呼べます。
• ES2020以降なら user?.showMessage() とも書けます（より安全）。

B) 高コストな処理を「必要なときだけ実行」（&&）

let shouldRun = false;

function heavyProcess() {
  console.log("💥 重い処理を実行中...");
}

shouldRun && heavyProcess();  // false のため呼ばれない

let shouldRun = false;

function heavyProcess() {
  console.log("💥 重い処理を実行中...");
}

shouldRun && heavyProcess();  // false のため呼ばれない

✅ ポイント

• shouldRun が false なら右側の heavyProcess() は実行されません。
• 条件によって処理をスキップする省エネテクニック。

C) デフォルト値設定（||）

function greet(name) {
  name = name || "ゲスト";
  console.log("こんにちは、" + name + "さん！");
}

greet("太郎");   // → こんにちは、太郎さん！
greet("");       // → こんにちは、ゲストさん！

function greet(name) {
  name = name || "ゲスト";
  console.log("こんにちは、" + name + "さん！");
}

greet("太郎");   // → こんにちは、太郎さん！
greet("");       // → こんにちは、ゲストさん！

✅ ポイント

• || を使って「左側が falsy のとき右を使う」。
• 空文字 '' も falsy 扱いになるので、実際には ?? を使うほうが安全。 name = name ?? "ゲスト"; // null or undefined のときだけ置き換える

応用例④（中級）：ログイン＋年齢制限チェック

let user = { loggedIn: true, age: 17 };

if (user.loggedIn && user.age >= 18) {
  console.log("成人向けコンテンツへようこそ");
} else if (user.loggedIn && user.age < 18) {
  console.log("18歳未満は制限されています");
} else {
  console.log("ログインしてください");
}

let user = { loggedIn: true, age: 17 };

if (user.loggedIn && user.age >= 18) {
  console.log("成人向けコンテンツへようこそ");
} else if (user.loggedIn && user.age < 18) {
  console.log("18歳未満は制限されています");
} else {
  console.log("ログインしてください");
}

✅ 説明

• && を使って「ログイン済み かつ 年齢条件」のような複合条件を作れます。
• 条件分岐を順番に整理して考えるのがコツです。

まとめ（実践テクニックのコツ）

練習問題（実践形式）

1. 「ユーザーがログイン済み かつ メール認証済み」なら「マイページへ進む」、それ以外なら「ログインしてください」と表示する。
2. 「管理者」または「一般ユーザーでも購入済み」なら「ダウンロード可能」。
3. config.debug が true のときだけ showLog() を実行する。
4. 名前が空なら '名無しさん' を使う。ただし空文字は falsy なので ?? を使って安全に処理。

See the Pen Conditional Operator Demo App by MONO365 -Color your days- (@monoqlo365) on CodePen.

アプリの概要

「年齢」と「ログイン状態（チェックボックス）」を入力して、
条件に応じてメッセージを出すアプリです。

• ログイン済み かつ 年齢が18歳以上 → ✅「成人向けコンテンツへようこそ」
• ログイン済み かつ 18歳未満 → ⚠️「18歳未満は利用できません」
• ログインしていない → 🔒「ログインしてください」

また、|| を使った「デフォルト名」も同時に体験できます。

学べることまとめ

See the Pen Conditional Operator Demo App by MONO365 -Color your days- (@monoqlo365) on CodePen.