- はじめに
このセクションでは、Reactの条件付きレンダリングにおけるJSXでのIf-Elseについて掘り下げていきます。JSX内でif-else文を使ってダイナミックなUIを作成する方法を学びましょう。GeekとGalの会話から学びましょう！
ねぇ、JSXで条件付きレンダリングのためにif-else文を使いたくなることがあるかもしれないでしょ。
へぇ、それってどうやって動くの？
実は、JSX内で直接if-else文を使うことはできないの。ただ、すぐに呼び出される関数式（IIFE）を使った簡単な回避策があるのよ。
- IIFEを使ったJSX内のIf-Elseの使用方法
JSX内でIIFEを使ってif-else文を使う方法の例を見せてあげるね！
function DisplayMessage({ isLoggedIn }) {
return (
<div>
{(() => {
if (isLoggedIn) {
return <h1>Welcome back, user!</h1>;
} else {
return <h1>Please log in.</h1>;
}
})()}
</div>
);
}
なるほど！IIFEの中にif-else文をラップして、それをJSX内で呼び出してるんだね。
その通り！IIFEとif-else文を使うことで、JSX内で条件付きでコンテンツをレンダリングすることができるのよ。
- おもしろい例
JSXのif-else文で面白い例はある？
もちろん！準備ができたらノックノックジョークを表示するコンポーネントを作ってみよう！
function KnockKnockJoke({ isReady }) {
return (
<div>
{(() => {
if (isReady) {
return (
<>
<p>Knock knock.</p>
<p>Who's there?</p>
<p>Alpaca who?</p>
<p>Alpaca the suitcase, you load up the car!</p>
</>
);
} else {
return <p>Let me know when you're ready for a joke!</p>;
}
})()}
</div>
);
}
ハハ、それはおもしろいね！"isReady"がtrueだと、ノックノックジョークが表示されるけど、そうでなければジョークの準備ができたら知らせるようなメッセージが表示されるんだね。
まさにそう！IIFEを使ったif-else文は、JSXで条件付きレンダリングを行う強力なツールです。このテクニックを楽しみながら探求してね！
- おわりに すぐに呼び出される関数式（IIFE）を使ったJSXでのIf-Elseは、Reactで条件付きレンダリングを実現する効果的な方法です。これにより、さまざまな条件に適応できるダイナミックなUIを作成することができます。Reactのスキルを向上させるために、学習と実験を続けましょう！😄