Reactでは、条件付きレンダリングを使用して特定の条件に基づいてコンポーネントを表示できます。このガイドでは、条件付きレンダリングを実装するためのさまざまな方法をわかりやすい例とともに解説します。
ifステートメントを使用するifステートメントを使用すると、条件に基づいて異なるコンポーネントをレンダリングできます。
異なる結果を表す2つのコンポーネントを作成します:
function Success() {
return <h1>成功しました！</h1>;
}
function Failure() {
return <h1>失敗しました！</h1>;
}
次に、条件に基づいてどちらのコンポーネントを表示するか決定する親コンポーネントを作成します:
function Result(props) {
const isSuccess = props.isSuccess;
if (isSuccess) {
return <Success />;
}
return <Failure />;
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Result isSuccess={true} />);
ifステートメントはisSuccessの値をチェックします。
isSuccessがtrueの場合はSuccessコンポーネントが表示されます。
それ以外の場合はFailureコンポーネントが表示されます。
&&を使用する論理演算子&&を使用すると、条件がtrueの場合にのみコンポーネントや要素を表示できます。
Garageコンポーネントを作成し、車がある場合のみ車の数を表示します:
function Garage(props) {
const cars = props.cars;
return (
<div>
<h1>ガレージ</h1>
{cars.length > 0 && (
<h2>あなたのガレージには{cars.length}台の車があります。</h2>
)}
</div>
);
}
const carList = ["トヨタ", "ホンダ", "フォード"];
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Garage cars={carList} />);
cars.length > 0がtrueの場合、メッセージが表示されます。
cars.length === 0の場合、何も表示されません。
空の配列を渡して確認してみましょう:
const carList = [];
root.render(<Garage cars={carList} />);
三項演算子は、簡潔な条件付きレンダリングを実現するための方法です。
条件 ? 条件が真の場合のレンダリング : 条件が偽の場合のレンダリング;
最初の例を再利用し、ifステートメントの代わりに三項演算子を使用します:
function Result(props) {
const isSuccess = props.isSuccess;
return (
<div>
{isSuccess ? <h1>成功しました！</h1> : <h1>失敗しました！</h1>}
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Result isSuccess={false} />);
isSuccessがtrueの場合、成功しました！のメッセージが表示されます。
isSuccessがfalseの場合、失敗しました！のメッセージが表示されます。
ifステートメント: 複雑なロジックや複数の条件を処理する場合に使用します。
&&演算子: フォールバックが不要な条件で使用します。
三項演算子: 2つの結果を簡潔に切り替える場合に適しています。
Reactの条件付きレンダリングは、アプリケーションの状態やpropsに応じて動的にコンポーネントを表示するための強力な方法です。これらのテクニックを習得することで、柔軟でユーザーフレンドリーなインターフェースを構築できます。
この記事の例を試して、条件付きレンダリングを使ったダイナミックなReactアプリケーションを作成してみてください！
このプロジェクトの完全なソースコードはGitHubで利用可能です。