短絡評価 — &&と||の隠れた動作

このトピックを終えると

&&と||がtrue/false以外の値を返す仕組みを理解し、実務で条件付きレンダリングとデフォルト値パターンに活用できるようになります。

&&と||はbooleanを返さない

console.log("hello" && "world"); // "world"
console.log(0 || 42);            // 42

他の言語では、&&と||は常にtrue/falseを返します。JavaScriptは違います。オペランドのいずれかをそのまま返します。これを短絡評価と呼びます。

&&の動作

&&は、左側がfalsyの場合に左側を返し、truthyの場合に右側を返します。

false && "hello"   // false — 左側がfalsy、左側を返す
"hi" && "hello"    // "hello" — 左側がtruthy、右側を返す
0 && "hello"       // 0 — 左側がfalsy
"hi" && 0          // 0 — 左側がtruthy、右側を返す

左側がfalsyの場合、右側はまったく実行されません。このことから「短絡」という名前が来ています。

const user = null;
user && console.log(user.name); // userがnullのため、後ろは実行されない

||の動作

||は、左側がtruthyの場合に左側を返し、falsyの場合に右側を返します。

"hello" || "world"  // "hello" — 左側がtruthy、左側を返す
0 || 42             // 42 — 左側がfalsy、右側を返す
"" || "default"     // "default" — 左側がfalsy
null || "fallback"  // "fallback"

「最初のtruthyな値を返す」と考えるとわかりやすいでしょう。

Reactの条件付きレンダリング

Reactで&&を最もよく使うのは、条件付きレンダリングです。

function Dashboard({ user }) {
  return (
    <div>
      {user && <UserProfile user={user} />}
      {user?.isAdmin && <AdminPanel />}
    </div>
  );
}

userが存在する場合、<UserProfile />をレンダリングし、存在しない場合は何もレンダリングしません。if文なしで、1行で条件付きレンダリングができます。

ただし、注意点があります。

{count && <Badge count={count} />}

countが0の場合？&&は0を返します。Reactは0をレンダリングします。画面に"0"が表示されます。これは意図したものではないでしょう。

{count > 0 && <Badge count={count} />}

このようにboolean式を使用すれば安全です。

||でデフォルト値を設定

const name = user.name || "Anonymous";
const theme = config.theme || "light";

||でデフォルト値を設定する一般的なパターンです。ただし、0や""を有効な値として扱う必要がある場合は、??を使用してください。

要点

&&は、左側がfalsyの場合に左側を返し、truthyの場合に右側を返します。 ||は、左側がtruthyの場合に左側を返し、falsyの場合に右側を返します。 Reactで&&を使って条件付きレンダリングする場合、数字の0に注意することを忘れないでください。