&& と || は条件を組み合わせるときの 最重要ツール です。ここでは直感・用法・注意点・よくあるパターンを例と一緒にわかりやすくまとめます。
基本イメージ
A && B（AND）
→ 「A かつ B」が 両方とも真 のときだけ全体が真になる。A || B（OR）
→ 「A または B」の どちらか一方でも真 なら全体が真になる。
書き方の基本（例）
let adult = age >= 20;
let hasTicket = true;
if (adult && hasTicket) {
console.log('入場できます'); // age >= 20 が true かつ hasTicket が true の場合
}
let isWeekend = true;
let isHoliday = false;
if (isWeekend || isHoliday) {
console.log('お休みです'); // 週末か祝日のどちらかなら実行
}
優先順位と括弧
&& は || より優先度が高い（a || b && c は a || (b && c) と同じ）。
複雑な条件では 必ず括弧 () を使って意図を明確にしましょう。
// 読みにくい（注意）
if (isAdmin || isOwner && isActive) { ... } // 意味: isAdmin || (isOwner && isActive)
// 明示的で安全
if (isAdmin || (isOwner && isActive)) { ... }
短絡評価（ショートサーキット） — とても重要
&& と || は 途中で評価を止める（短絡） 性質があります。これを利用して便利なコードが書けます。
A && B：まずAを評価。Aが falsy（偽扱い）ならAを返し、評価を止める。Aが truthy ならBを評価して結果を返す。A || B：まずAを評価。Aが truthy ならAを返し、評価を止める。Aが falsy ならBを評価して返す。
例（デフォルト値）
let name = '';
let display = name || 'ゲスト';
console.log(display); // 'ゲスト'（空文字は falsy のため）
例（安全なプロパティ参照の代替）
let obj = null;
let value = obj && obj.prop; // obj が null のとき obj.prop を評価せず null を返す
※ 現代の JS では
obj?.prop（オプショナルチェイン）がより安全です。
truthy / falsy と組み合わせるときの注意
JavaScriptでは 0、''（空文字）、null、undefined、NaN、false が falsy になります。
そのため || を「デフォルトにする」用途では、0 や '' を有効な値として扱いたい場合に誤動作します。
let count = 0;
let display = count || 10;
console.log(display); // 10 になってしまう（0 を有効値としたいなら NG）
→ こういうときは Nullish coalescing ?? を使う（null または undefined のときだけ代替値を使う）。
実用的パターン（よく使う例）
1) 範囲チェック（AND）
let temp = 22;
if (temp >= 20 && temp <= 25) {
console.log('快適');
}
2) 複数の合格条件（OR）
let hasInvite = false;
let isVIP = true;
if (hasInvite || isVIP) {
console.log('入場可');
}
3) 否定を組み合わせる（NOT と合わせる）
if (!isLoggedIn || !hasPermission) {
console.log('アクセス不可');
}
// 「ログインしていない、または権限を持っていない」場合
副作用に注意（関数呼び出しと短絡）
短絡評価は関数呼び出しの実行可否にも影響します。副作用がある関数を条件に含めると挙動が変わるので注意。
function expensive() {
console.log('重い処理実行');
return true;
}
let flag = false;
if (flag && expensive()) {
// expensive() は呼ばれない（flag が falsy のため）
}
→ && の左が falsy なら右は評価されません（関数呼ばれない）。
De Morgan（ド・モルガン）の法則（条件の反転で役立つ）
複雑な否定を整理できます：
!(A && B)は!A || !B!(A || B)は!A && !B
例：
// 「A と B の両方が満たされない」＝「A が満たされない かつ B が満たされない」
if (!(a && b)) { ... }
if (!a || !b) { ... } // 同じ意味
よくあるミスと対策
=（代入）と==,===（比較）を混同しない：if (x = 5)は NG。- 複雑な条件は 関数に分ける（可読性向上）。例：
if (isAdult(user) && hasPaid(user)) ... ||でデフォルトを取るとき、0や''を有効値にしたければ??を使う（null/undefinedのみ代替）。
練習問題（手を動かそう）
ageが 18 以上 かつhasIDが true のときだけ「入場可」と表示するコードを書いてください。isHolidayまたはisWeekendのどちらかが true なら「休み」と表示するコードを書いてください。scoreがnullまたはundefinedのときだけscore = 0にしたい。||を使う場合と??を使う場合で違いを説明してください（score = 0を有効値としたい例を想定）。
解答＋丁寧な解説
問題1：
ageが 18 以上 かつhasIDが true のときだけ「入場可」と表示するコードを書いてください。
✅ 解答例
let age = 20;
let hasID = true;
if (age >= 18 && hasID) {
console.log('入場可');
} else {
console.log('入場不可');
}
💬 解説
&&は「かつ（AND）」の意味です。age >= 18が true で、かつhasIDも true の場合のみ、
if 文の中の処理が実行されます。- どちらか一方でも false なら、else 側が実行されます。
👉 つまり
「年齢が18歳以上」かつ「身分証あり」の人だけが入場OK！
問題2：
isHolidayまたはisWeekendのどちらかが true なら「休み」と表示するコードを書いてください。
✅ 解答例
let isHoliday = false;
let isWeekend = true;
if (isHoliday || isWeekend) {
console.log('休み');
} else {
console.log('出勤');
}
💬 解説
||は「または（OR）」の意味です。isHolidayまたはisWeekendのどちらか一方が true なら、
if 文の中が実行されます。- 両方 false のときだけ else 側に行きます。
👉 つまり
「祝日」または「週末」ならお休み！
どちらでもない（平日かつ祝日でもない）ときだけ出勤です。
問題3：
scoreがnullまたはundefinedのときだけscore = 0にしたい。||を使う場合と??を使う場合で違いを説明してください。
✅ 解答例（その1：|| を使う）
let score = 0;
let displayScore = score || 0;
console.log(displayScore); // → 0ではなく「0（デフォルト）」が代入される？
💬 解説
|| は「左側が falsy のとき右を使う」動作なので、score が 0（false扱い）だと右側の 0 に置き換えられます。
つまり、0 や空文字でも上書きされてしまう のが欠点です。
✅ 解答例（その2：?? を使う）
let score = 0;
let displayScore = score ?? 0;
console.log(displayScore); // → 0（期待通り）
💬 解説
?? は「左側が null または undefined のときだけ右を使う」ので、score が 0 の場合は そのまま 0 が使われます。
👉 つまり：
| 値 | score || 0 | score ?? 0 |
|—-|—————|—————|
| 0 | 0（右側が使われる） | 0（左側が使われる） |
| null | 0 | 0 |
| undefined | 0 | 0 |
| 'abc' | 'abc' | 'abc' |
?? は「空文字や0を有効値として扱いたいとき」に便利です。
まとめ
| 記号 | 読み方 | 条件の意味 | 使いどころ |
|---|---|---|---|
&& | AND（かつ） | 両方 true のとき true | 両方の条件を満たすとき |
| ` | ` | OR（または） | |
?? | Nullish（ヌル合体） | 左が null/undefined のとき右を使う | デフォルト値設定時に安全 |
まとめ
&&は「かつ」、||は「または」。- 括弧で明示し、短絡評価の性質を理解すること。
||でデフォルト値を取るときは truthy/falsy に注意（必要なら??を使う）。- 複雑になったら分解して関数化すると読みやすく安全です。
発展チャレンジ（自分で試してみよう！）
- ユーザーが「会員登録済み」かつ「ログイン中」なら「ようこそ」と表示。
- 年齢が18歳未満 または 保護者同意がない場合、「利用できません」と表示。
- 入力された
nicknameがnullまたはundefinedのときだけ'ゲスト'を使う（??を利用）。