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

では、前回の続きとして「発展チャレンジ３問」の 解答＋図解つきの詳しい解説 を順番に見ていきましょう！
（if文の条件がどう評価されているかを“目で理解”できるように整理します 👇）

🧩 発展問題1：

ユーザーが「会員登録済み」かつ「ログイン中」なら「ようこそ」と表示する

✅ 解答例

let isMember = true;     // 会員登録している
let isLoggedIn = true;   // ログイン中

if (isMember && isLoggedIn) {
  console.log('ようこそ！');
} else {
  console.log('ログインしてください');
}

let isMember = true;     // 会員登録している
let isLoggedIn = true;   // ログイン中

if (isMember && isLoggedIn) {
  console.log('ようこそ！');
} else {
  console.log('ログインしてください');
}

💬 解説

• &&（AND）は「両方 true のときだけ実行」でしたね。
• isMember が true かつ isLoggedIn が true → 「ようこそ！」を表示。
• どちらかが false なら else 側が実行。

🔍 評価の流れ図

┌───────────────┐
│ isMember が true? │
└──────┬────────┘
       │Yes
       ▼
┌───────────────┐
│ isLoggedIn が true? │
└──────┬────────┘
       │Yes
       ▼
   「ようこそ！」出力
       │
       └──→（どちらかがNoなら）「ログインしてください」

🧩 発展問題2：

年齢が18歳未満 または 保護者同意がない場合、「利用できません」と表示する

✅ 解答例

let age = 16;
let hasConsent = false;

if (age < 18 || !hasConsent) {
  console.log('利用できません');
} else {
  console.log('利用できます');
}

let age = 16;
let hasConsent = false;

if (age < 18 || !hasConsent) {
  console.log('利用できません');
} else {
  console.log('利用できます');
}

💬 解説

• || は「どちらかが true なら実行」。
• 条件を読みやすく言うと： 「年齢が18未満」または「保護者同意がない」場合は NG。
• !hasConsent は「保護者同意が ない」という否定です。

🔍 評価の流れ図

┌──────────────┐
│ age < 18 ?   │
└─────┬────────┘
      │Yes → 「利用できません」
      │
      │No
      ▼
┌──────────────┐
│ hasConsent が false? │
└─────┬────────┘
      │Yes → 「利用できません」
      │
      ▼
  「利用できます」

🧩 発展問題3：

入力された nickname が null または undefined のときだけ 'ゲスト' を使う（??を利用）

✅ 解答例

let nickname = null;
let displayName = nickname ?? 'ゲスト';
console.log(displayName);

let nickname = null;
let displayName = nickname ?? 'ゲスト';
console.log(displayName);

💬 解説

• ?? は「左が null または undefined のときだけ右を使う」演算子。
• nickname が空文字 '' や 0 でも、「それは有効値」としてそのまま使われます。
• || では falsy 判定になる値でも、?? なら意図通り動きます。

🔍 評価の流れ図

┌───────────────────────┐
│ nickname が null または undefined ? │
└────────────┬────────────┘
             │Yes
             ▼
         displayName = 'ゲスト'
             │
             └──No→ displayName = nickname

ここで整理！

さらにレベルアップしたい人へ（発展練習）

次のような問題にチャレンジしてみましょう 👇

1️⃣ ユーザーが「管理者（isAdmin）」または「モデレーター（isModerator）」の場合のみ「設定画面」を表示する。
2️⃣ 商品の在庫があり（stock > 0）、かつ販売中（isOnSale === true）のときだけ「購入可能」と表示する。
3️⃣ username が null または undefined のとき '未設定' を表示する（ただし空文字はそのまま表示）。