if文の代替：短絡評価（`&&`）

JSXでは、条件によって一部の要素だけを描画したい場面が多くあります。そんなとき、通常の if 文ではなく、JavaScriptの「短絡評価（&&）」を使うと、コードを簡潔に記述できます。

基本構文

{条件 && 表示したいJSX}

• 条件が true のときのみ、右側のJSXが評価（=描画）されます。
• 条件が false のときは、何も描画されません。

使用例

export const WelcomeMessage = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
  return (

<div>
      {isLoggedIn && 
<p>ようこそ、ユーザーさん！</p>}
    </div>
  );
};

• isLoggedIn が true のときのみ、メッセージが表示されます。
• false のときは `

  ` 要素は描画されません。

⚠ 値が , null, undefined, '' のときの注意

JavaScriptでは , null, undefined, ''（空文字）などの「Falsy」な値も false として扱われるため、意図せず描画されないことがあります。

const count = 0;

{count && 
<p>カウント: {count}</p>} // → 何も表示されない！

✅ 解決策: 三項演算子を使う

{count !== 0 ? 
<p>カウント: {count}</p> : null}

もしくは条件を厳密に書く：

{count > 0 && 
<p>カウント: {count}</p>}

✅ 使いどころの目安