「もしユーザー名が入力されていて、かつパスワードも正しいならログインさせる」
「もし日曜日、または祝日ならお店を休みにする」
現実のルールには、このように複数の条件が組み合わさったものがたくさんあります。これまでのif文だけでは、一つの条件しか判定できませんでしたが、「論理演算子」を使えば、これらをたった一行でスマートに記述できるようになります。
本記事では、3つの主要な演算子&&、||、!の使い方はもちろん、実務でよく使われるテクニックまでを詳しく解説します。
論理演算子とは？「条件を連結する」ための道具
論理演算子とは、複数の条件式を「つなげたり」「ひっくり返したり」するための記号のことです。
JavaScriptでは、主に以下の3種類を使います。
- &&（論理積/AND）：「〜かつ〜」
- ||（論理和/OR）：「〜または〜」
- !（論理否定/NOT）：「〜ではない」
これらを使うことで、『JavaScriptのif文とは？条件分岐の書き方と使い方を初心者向けに解説』で学んだ条件分岐を、より複雑で実用的なものへと進化させることができます。
「&&（AND）」の使い方：すべての条件が正しいとき
&&は、左側の条件と右側の条件がどちらもtrue（正しい）ときにだけ、全体としてtrueを返します。
基本の書き方
const age = 25;
const hasLicense = true;
// 「20歳以上」かつ「免許を持っている」場合
if (age >= 20 && hasLicense === true) {
console.log("車を運転できます");
}3つ以上の条件をつなげる
&&は2つだけでなく、いくつでもつなげることができます。
// 「20歳以上」かつ「免許あり」かつ「お酒を飲んでいない」
if (age >= 20 && hasLicense && !isDrunk) {
console.log("運転OKです");
}すべての条件がtrueにならない限り、処理は実行されません。
「||（OR）の使い方：どれか一つでも正しいとき
||は、左側と右側の条件のうち、少なくともどちらか一方がtrueであれば、全体としてtrueを返します。
基本の書き方
const day = "Sunday";
// 「土曜日」または「日曜日」の場合
if (day === "Saturday" || day === "Sunday") {
console.log("今日はお休みです！");
}どちらもtrueの場合はどうなる？
||は、「どちらか一方が正しい、または両方が正しい」ときにtrueとなります。両方の条件が満たされていても問題なく処理が実行されます。
解説：&&と||の違い
ここまでで「&&」と「||」それぞれの意味を見てきましたが、初心者の方がよく混乱するのがこの2つの違いです。
まずは、シンプルに押さえましょう。
- &&（AND）：すべての条件を満たす必要がある（厳しい条件）
- ||（OR）：どれか1つ満たせばOK（ゆるい条件）
&&（AND）の場合
「ユーザー名もパスワードも正しいときだけログインできる」
const isUserValid = true;
const isPasswordCorrect = true;
if (isUserValid && isPasswordCorrect) {
console.log("ログイン成功");
}||（OR）の場合
「土曜日または日曜日ならお休み」
const day = "Sunday";
if (day === "Saturday" || day === "Sunday") {
console.log("今日はお休みです");
}&&と||の比較
// &&：両方必要（厳しい）
if (A && B) {
// AもBもtrueのときだけ実行
}
// ||：どちらかでOK（ゆるい）
if (A || B) {
// AかBのどちらかがtrueなら実行
}もし「&&」と「||」の違いに迷った場合
- 条件を「厳しくしたい」→ &&
- 条件を「ゆるくしたい」→ ||
この違いを理解できると、if文での条件分岐が一気に書きやすくなります！
「!（NOT）」の使い方：条件を逆転させる
!は、その直後に続く条件の結果を「真逆」にします。
基本の書き方
const isLoggedIn = false;
// 「ログインしていない（falseの逆 ＝ true）」場合
if (!isLoggedIn) {
console.log("ログインしてください");
}読みやすさへの配慮
!isFull（満員ではない）のように、直感的に理解できる変数名と組み合わせるのがコツです。
if文や三項演算子との実践的な組み合わせ
優先順位をカッコ（）で指定する
複数の演算子を混ぜる場合、カッコを使って「どの条件をひとまとめにするか」を指定します。
// 「20歳以上」で、かつ「会員である、またはクーポンを持っている」
if (age >= 20 && (isMember || hasCoupon)) {
console.log("割引適用！");
}三項演算子で結果を代入する
『JavaScriptの三項演算子とは？if文との違いと使い方を初心者向けに解説』で解説している「三項演算子」と一緒に使うと、さらにコードが短くなります。
const canEnter = (age >= 18 && hasTicket) ? "入場OK" : "入場不可";やってはいけない！論理演算子の「NG例」
条件を連結しすぎて読みづらい
// 【NG例】一目で理解できない
if (a === 1 && b === 2 || c === 3 && d === 4 && e === 5) { ... }解決策：変数に切り出す
一度結果を変数に入れて、名付けをすることで劇的に読みやすくなります。
const isUserValid = (a === 1 && b === 2);
const isDataReady = (c === 3 && d === 4 && e === 5);
if (isUserValid || isDataReady) { ... }実務でよくある！論理演算子の「賢い使い方」まとめ
実は、論理演算子にはif文以外でも使われる「短絡評価（たんらくひょうか）」というテクニックがあります。
デフォルト値を設定する（||の活用）
const inputName = "";
const userName = inputName || "名無しさん"; // 空なら右側の値が採用されるデータがある時だけ処理する（&&の活用）
// userが存在する場合のみ、右側の処理を実行する
user && console.log(user.name);まとめ
論理演算子は、プログラムに「複雑な判断」をさせるための知恵です。
- &&（AND）は、すべてが正しい時にtrueになる。
- ||（OR）は、どれが一つでも正しい時にtrueになる。
- !（NOT）は、条件の結果をひっくり返す。
- 連結しすぎず、変数を使って整理するのがプロの書き方。
まずは「AかBか」の単純な組み合わせから試してみてください。複雑な条件をたった一行で制御できる楽しさを知れば、開発効率は格段にアップします！
