条件付きレンダリング — 状況に応じて異なるUI
このトピックを終えると
Reactで、条件に応じて異なるコンポーネントを表示するいくつかのパターンを理解できるようになります。
なぜ必要か
ログイン状態に応じて異なる画面を表示する必要があります。データの読み込み中はスピナーを、エラーが発生した場合はエラーメッセージを表示する必要があります。このように、条件に応じて異なるUIを描画することが条件付きレンダリングです。
パターン1：早期リターン
jsx
function Dashboard({ user }) {
if (!user) {
return <LoginForm />;
}
return <UserDashboard user={user} />;
}関数の冒頭で条件を確認し、すぐにreturnします。最も読みやすいパターンです。複雑な条件をJSX内に記述する必要がありません。
パターン2：三項演算子
jsx
function Greeting({ isLoggedIn }) {
return (
<div>
{isLoggedIn ? <UserMenu /> : <LoginButton />}
</div>
);
}JSX内で条件を使用する場合に、三項演算子を使用します。2つのうち1つを表示する場合に適しています。
ネストすると読みにくくなります。
jsx
// 悪い例
{isLoading ? <Spinner /> : error ? <Error /> : <Content />}このような場合は、早期リターンまたは別の関数に分割します。
パターン3：&&演算子
jsx
function Notification({ count }) {
return (
<div>
{count > 0 && <Badge count={count} />}
</div>
);
}表示するか、表示しないかのどちらかの場合に使用します。三項演算子のelse部分がnullである場合、&&で短縮できます。
注意：数値の0はfalsyですが、Reactはレンダリングします。
jsx
// 注意：countが0の場合、画面に「0」が表示されます
{count && <Badge />}
// 安全な方法
{count > 0 && <Badge />}パターン4：変数に保存
jsx
function StatusMessage({ status }) {
let message;
if (status === "loading") message = <Spinner />;
else if (status === "error") message = <ErrorBanner />;
else if (status === "empty") message = <EmptyState />;
else message = <DataTable />;
return <div className="container">{message}</div>;
}分岐が3つ以上ある場合は、変数に保存する方がわかりやすくなります。
nullを返す
jsx
function MaybeTooltip({ show, text }) {
if (!show) return null;
return <div className="tooltip">{text}</div>;
}nullを返すと、何もレンダリングしません。コンポーネント自体を非表示にしたい場合に使用します。
CSSのdisplay: noneとは異なります。nullはDOMから完全に消え、display: noneはDOMに残りますが、表示されません。
重要なポイント
早期リターンは、最も読みやすい条件付きレンダリングパターンです。 三項演算子は、2つのうち1つを表示する場合に、**&&**は表示するか、表示しないかのどちらかの場合に使用します。 分岐が多くなる場合は、変数に保存するか、コンポーネントを分割します。