React 入門：条件付きレンダリングの基本

アプリ開発をしていると「ある条件のときだけ表示したい」「ログインしているかどうかで画面を切り替えたい」といった場面が必ず出てきます。React では、条件付きレンダリング（Conditional Rendering） を使って、状況に応じた UI を柔軟に表示できます。

今回は、その基本的な書き方から応用的なパターンまでを紹介します。

条件付きレンダリングとは？

簡単に言うと「if 文のように条件を指定して、表示する要素を切り替える」仕組みです。React では JSX 内で JavaScript の条件分岐を使えるため、いくつかの方法で実現できます。

方法 1: if 文で条件分岐

最もシンプルなのは、関数コンポーネント内で if を使って返す内容を変える方法です。

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>ようこそ！</h1>;
  } else {
    return <h1>ログインしてください</h1>;
  }
}

<Greeting isLoggedIn={true} /> → 「ようこそ！」
<Greeting isLoggedIn={false} /> → 「ログインしてください」

方法 2: 三項演算子を使う

JSX 内でよく使われるのが三項演算子です。短く書けるので便利です。

function Greeting({ isLoggedIn }) {
  return <h1>{isLoggedIn ? "ようこそ！" : "ログインしてください"}</h1>;
}

方法 3: AND 演算子（&&）を使う

特定の条件で「ある要素だけを表示したい」場合には、&& を使うのが便利です。

function Notification({ hasMessage }) {
  return (
    <div>
      <h1>通知センター</h1>
      {hasMessage && <p>新しいメッセージがあります！</p>}
    </div>
  );
}

hasMessage が true のときだけ <p> が表示されます。

方法 4: 変数に代入してから描画する

条件分岐が複雑になる場合は、JSX の前で変数にコンポーネントを代入してから描画する方法が読みやすいです。

function Greeting({ isLoggedIn }) {
  let content;
  if (isLoggedIn) {
    content = <h1>ようこそ！</h1>;
  } else {
    content = <h1>ログインしてください</h1>;
  }

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

実践例：ログイン状態による切り替え

import { useState } from "react";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? (
        <div>
          <h1>ようこそ！</h1>
          <button onClick={() => setIsLoggedIn(false)}>ログアウト</button>
        </div>
      ) : (
        <div>
          <h1>ログインしてください</h1>
          <button onClick={() => setIsLoggedIn(true)}>ログイン</button>
        </div>
      )}
    </div>
  );
}

ログイン・ログアウトのボタンを押すことで、表示内容が切り替わります。これが条件付きレンダリングの典型的な使い方です。

まとめ

  • if 文：シンプルに条件分岐したいとき
  • 三項演算子：短く書きたいとき
  • &&演算子：特定条件でのみ表示したいとき
  • 変数に代入：複雑な条件分岐を整理したいとき