女性向けエンジニアスクール
3秒でわかる
条件によって画面に出す要素を切り替える書き方。ログイン状態や読み込み中かどうかで UI を出し分けるときに必ず使います。
もう少し詳しく
どういうものか
条件付きレンダリングは、状態に応じて描画する要素を変える書き方です。React などの JSX では文の途中に if を書けないため、&& 演算子、三項演算子、事前に変数へ代入する方法、早期 return の 4 通りが使われます。どれを選んでも動作は同じで、読みやすさの問題です。
なぜ必要か
画面は 1 種類ではありません。データ取得中はスピナー、失敗したらエラー文、成功したら一覧、0 件なら空状態と、同じ場所に 4 つの見た目が入れ替わります。これを CSS の display を none にして全部描いたまま隠す方式にすると、存在しないデータへのアクセスでエラーが出たり、隠れた入力欄がフォーム送信に混ざったりします。そもそも描かない方が安全です。
具体例
function UserPanel({ loading, error, users }) {
if (loading) return <Spinner />;
if (error) return <p>読み込みに失敗しました</p>;
return (
<div>
{users.length > 0 ? (
<ul>{users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>
) : (
<p>ユーザーがいません</p>
)}
{users.length > 0 && <p>全 {users.length} 件</p>}
</div>
);
}つまずきやすいところ
{users.length &&
} と書くと、0 件のときに数字の 0 が画面に出る。&& は左辺をそのまま返すため。length > 0 && と比較にする{name && {name}
} は問題無いが {count && ...} は危ない似た用語との違い
条件付きレンダリングは「描くかどうか」を決めます。CSS の visibility や display は「描いたものを見せるかどうか」です。DOM に残るかどうかが決定的な差で、アニメーションを付けたい場合は後者が必要になることもあります。
覚え方
出し分けたい種類が 2 つなら三項演算子、片方が「何も出さない」なら &&、3 つ以上なら早期 return と決めておくと迷いません。
