🥯

【JavaScript】AND 演算子と OR 演算子についてまとめてみた

2025/02/19に公開1件

JavaScript の AND 演算子と OR 演算子について

JavaScript には論理演算を行うための演算子として、AND 演算子（&&）と OR 演算子（||）があります。これらは条件分岐や値の短絡評価などで頻繁に使われます。

AND 演算子（&&）は、両方の条件が真（true）の場合にのみ真（true）を返す演算子です。

console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

以下のように、複数の条件を組み合わせることで、特定の条件を満たしたときだけ処理を実行できます。

const age = 25;
const hasLicense = true;

if (age >= 18 && hasLicense) {
  console.log("運転できます！");
} else {
  console.log("運転できません。");
}

このコードでは、ageが 18 以上で、かつhasLicenseがtrueのときのみ「運転できます！」と表示されます。

React では&&を使って条件付きレンダリングを行うことができます。

const isLoggedIn = true;

function WelcomeMessage() {
  return <div>{isLoggedIn && <p>ようこそ！ログインに成功しました！</p>}</div>;
}

この例では、isLoggedInがtrueのときのみ、メッセージが表示されます。

OR 演算子（||）は、少なくとも 1 つの条件が真（true）であれば、結果が真（true）になる演算子です。

console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

以下のように、デフォルト値を設定するのに使われることが多いです。

const username = "";
const displayName = username || "ゲスト";

console.log(displayName); // "ゲスト"

このコードでは、usernameが空文字（falsy な値）の場合、displayNameには「ゲスト」が代入されます。

React では、||を使ってデフォルト値を設定することができます。

const user = null;

function UserGreeting() {
  return <p>{user || "ユーザーが見つかりません"}</p>;
}

この例では、userがnullまたはundefinedのとき、「ユーザーが見つかりません」と表示されます。

演算子	説明
AND 演算子	両方が`true`のときのみ`true`を返す
OR 演算子	どちらかが`true`なら`true`を返す

AND 演算子（&&）と OR 演算子（||）は、条件分岐やデフォルト値の設定など、さまざまな場面で活用されます。
特に React では、条件付きレンダリングやデフォルトの表示内容を設定する際に頻繁に使うので覚えておくと役に立ちます！

Hidden comment