条件分岐表示とは
「状況に応じて表示内容を変える」ための仕組み
React では、画面に表示する内容を 状態（state） に応じて切り替えることがよくあります。
例えば、
- ログインしているときだけユーザー名を表示する
- ボタンを押したらメニューを開く
- 入力が空ならエラーメッセージを出す
こういった「条件によって UI を変える」ことを 条件分岐表示 と呼びます。
React では、主に if 文 と 三項演算子 を使って条件分岐を行います。
if / 三項演算子
if 文での条件分岐（JSX の外で使う）
if 文は JavaScript の基本構文なので、React でも普通に使えます。
ただし、JSX の中では if 文は使えない ので注意してください。
まずは JSX の外で条件分岐してから、返す JSX を決めるパターンです。
function Greeting({ isLogin }) {
if (isLogin) {
return <p>ログイン中です。</p>;
} else {
return <p>ログインしていません。</p>;
}
}
このように、return の前で条件を分けるのが if 文の基本的な使い方です。
三項演算子での条件分岐（JSX の中で使える）
三項演算子は JSX の中でも使えるため、React では非常によく使われます。
書き方はこうです。
条件 ? 真の場合 : 偽の場合
例として、ログイン状態で表示を切り替えるコードはこう書けます。
function Greeting({ isLogin }) {
return (
<p>
{isLogin ? "ログイン中です。" : "ログインしていません。"}
</p>
);
}
三項演算子は「短く書ける」ので便利ですが、複雑になりすぎると読みにくくなるので注意が必要です。
表示・非表示の切り替え
state と条件分岐を組み合わせる
React では、state を使って「表示するかどうか」を切り替えることができます。
例えば、ボタンを押すとメッセージが表示・非表示になる例を見てみましょう。
import { useState } from "react";
function ToggleMessage() {
const [isShow, setIsShow] = useState(false);
return (
<main>
<button onClick={() => setIsShow(!isShow)}>
表示切り替え
</button>
{isShow && <p>このメッセージは表示中です！</p>}
</main>
);
}
ここでのポイントは、
{isShow && <p>...</p>}
という書き方です。
&&（AND）を使った表示切り替え
条件 && 表示したいもの
という書き方は、React でよく使われるパターンです。
isShow が true のときだけ <p>...</p> が表示され、
false のときは何も表示されません。
これは「if の簡易版」として覚えておくと便利です。
ログイン状態の表現
ログインしているかどうかで UI を変える
ログイン状態を表す典型的な例を作ってみます。
function UserStatus({ isLogin, name }) {
return (
<div>
{isLogin ? (
<p>{name} さん、ようこそ！</p>
) : (
<p>ログインしてください。</p>
)}
</div>
);
}
このように、三項演算子を使うと「ログイン時」「未ログイン時」の UI を簡単に切り替えられます。
ログイン中だけメニューを表示する例
function Menu({ isLogin }) {
return (
<nav>
{isLogin && (
<ul>
<li>マイページ</li>
<li>設定</li>
</ul>
)}
</nav>
);
}
isLogin が true のときだけメニューが表示されます。
初心者が混乱しやすい点
JSX の中で if 文は使えない
次のような書き方はエラーになります。
return (
<div>
if (isLogin) { ... } // ❌ JSX の中で if は使えない
</div>
);
if 文は JSX の外で使う と覚えておきましょう。
三項演算子を使いすぎて複雑になる
例えば、次のような書き方は読みにくくなります。
{isLogin ? (isAdmin ? "管理者" : "一般ユーザー") : "ログインしていません"}
三項演算子は便利ですが、ネスト（入れ子）しすぎると地獄になります。
複雑になりそうなら、素直に if 文で分けるほうが読みやすいです。
true / false の値をそのまま表示してしまう
次のようなコードを書くと、
<p>{isLogin}</p>
true や false がそのまま画面に表示されてしまいます。
これは初心者がよくやるミスです。
表示したいのは「ログイン中」などの文字なので、三項演算子を使う必要があります。
<p>{isLogin ? "ログイン中" : "未ログイン"}</p>
&& の挙動を誤解する
条件 && 表示内容 は便利ですが、
「false のときは何も表示されない」という挙動を理解しておく必要があります。
例えば、
{0 && <p>表示される？</p>}
これは 0 が false とみなされるため、何も表示されません。
まとめ（条件分岐の感覚をつかむ）
条件分岐は React の UI を作るうえで欠かせない基本スキルです。
ポイントを整理するとこうなります。
- if 文は JSX の外で使う
- JSX の中では三項演算子
{条件 ? A : B}が便利 - 表示・非表示は
{条件 && <要素>}で簡単に切り替えられる - ログイン状態などの UI 切り替えは三項演算子が最適
- 初心者は「JSX の中で if を使えない」「三項演算子の使いすぎ」「true/false の誤表示」でつまずきやすい
次のステップとしては、
- ログイン状態を切り替えるボタン
- メニューの表示・非表示
- 入力が空のときだけエラーメッセージを出す
などを自分で作ってみると、条件分岐の理解が一気に深まります。