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

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

AND 演算子（論理積 &&）

基本的な使い方

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のときのみ「運転できます！」と表示されます。

JSX での活用

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

const isLoggedIn = true;

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

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

OR 演算子（論理和 ||）

基本的な使い方

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には「ゲスト」が代入されます。

JSX での活用

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

const user = null;

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

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

まとめ

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

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