if文での条件分岐

if 文を使った条件分岐は、複雑なロジックや複数条件を扱う場合に適しています。JSXの中に直接書けないため、分岐の結果を変数に格納してから描画するのが一般的です。

✅ 基本構文

export const Greeting = () => {
  const isLoggedIn = true;

  let message;
  if (isLoggedIn) {
    message = "ようこそ！";
  } else {
    message = "ログインしてください";
  }

  return 
<div>{message}</div>;
};

💡 コンポーネントの分岐も可能

const LoggedInUser = () => 
<p>こんにちは、ユーザーさん</p>;
const Guest = () => 
<p>ゲストとして閲覧中</p>;

export const Welcome = () => {
  const isLoggedIn = false;

  let content;
  if (isLoggedIn) {
    content = <LoggedInUser />;
  } else {
    content = <Guest />;
  }

  return 
<div>{content}</div>;
};

❗ 複雑なロジックにはif文を使う

複雑な分岐ロジックや処理が絡む場合、if 文の方が読みやすく、保守性も高くなります。

export const StatusMessage = ({ status }: { status: "success" | "error" | "loading" }) => {
  let content;

  if (status === "success") {
    content = 
<p>処理が完了しました。</p>;
  } else if (status === "error") {
    content = 
<p>エラーが発生しました。</p>;
  } else {
    content = 
<p>読み込み中です...</p>;
  }

  return 
<div>{content}</div>;
};

✅ まとめ

• JSX内で直接 if 文は使えないため、変数を事前に用意する。
• 複雑な条件ロジックを記述する場合は、if 文での分岐が可読性に優れる。
• 三項演算子 との使い分けが重要。