やあ、Reactの世界へようこそ！ここに来たということは、君は今、画面の中に命を吹き込むという最高にエキサイティングな冒険の入り口に立っているんだね。
Reactを触り始めると、「あれを表示したいけど、条件によっては隠したいな」という場面が必ずやってくる。これを「条件付きレンダリング」と呼ぶんだけど、最初は少し魔法みたいに感じるかもしれない。でも大丈夫、コツさえ掴めば、画面の表示を操るのはまるでレゴブロックを組み立てるくらい直感的になるからね。
今日は、現場で一番よく使う「3つの魔法の杖」を紹介するよ。
—
1. 論理積演算子（&&）：ある時だけ現れる「隠し扉」
まずは、一番スマートな書き方から。`&&`（アンド演算子）は、「もし〇〇なら、△△を表示して！」という時に使うんだ。
例えるなら、「雨が降ったら傘をさす」という動作に似ているね。晴れているときは傘のことは考えなくていい。
function UmbrellaComponent({ isRaining }) {
return (
お出かけ準備
{/ isRainingがtrueの時だけ、このメッセージが表示される /}
{isRaining &&
雨が降ってるよ！傘を忘れずにね。
}
);
}
ここでの注意点：
初心者がやりがちな罠が、「数字の0」を条件に含めること。Reactは`0`を「表示するもの」として扱ってしまうから、意図せず画面に「0」という文字が出てきちゃうことがあるんだ。`!!isRaining`と書いたり、配列の長さで判定する時は`list.length > 0`と書くのが、現場のベテランが守っている「お守り」のようなルールだよ。
—
2. 三項演算子（? :）：二者択一の「自動販売機」
次に紹介するのは、三項演算子。「Aならこれ、それ以外ならあれ」と、どっちか一方を選ばなきゃいけない時に最強の武器になるよ。
自動販売機で「飲み物があるならそのボタンを押す、売り切れなら『売り切れ』と表示する」という流れだね。
function VendingMachine({ stock }) {
return (
{stock > 0 ? (
) : (
あちゃー、売り切れだ！
)}
);
}
これはすごく読みやすいから、迷ったらまずはこれを使ってみよう。ただ、調子に乗って三項演算子の中にさらに三項演算子を入れ子（ネスト）にすると、コードがスパゲッティみたいに複雑になっちゃうから気をつけて。シンプル・イズ・ベストが一番だよ。
—
3. if文：万能な「司令塔」
「JSXの中でif文は書けない」って聞いたことがあるかもしれないけれど、実はコンポーネントの中であれば普通に使えるんだ。複雑な条件分岐が必要なときは、無理にJSXの中に詰め込まず、外側で整理してあげよう。
お買い物に例えるなら、「カゴの中身を確認してから、決済画面に進むか、ログイン画面へ誘導するかを決める」ような、ちょっと複雑な判断が必要な時だね。
function ShoppingCart({ isLoggedIn, itemsCount }) {
// JSXの外で計算を済ませておく（これがコードを綺麗に保つコツ！）
if (!isLoggedIn) {
return
まずはログインしてね！
;
}
if (itemsCount === 0) {
return
カートは空っぽだよ。
;
}
return ;
}
JSXの中で無理やり書こうとせず、「準備は外で、表示は中で」という役割分担を意識するだけで、君のコードはぐっとプロっぽくなるはずだよ。
—
最後に：迷える君へ
Reactのいいところは、「間違えても画面が壊れるだけで、爆発はしない」ことだよ。
最初はどの方法を使うべきか迷うかもしれない。でも、現場のエンジニアもみんなそうやって悩んで、何度も書き直して、一番読みやすいコードを探しているんだ。
- シンプルに表示したいなら `&&`
- AかBか選ぶなら `? :`
- ロジックが複雑なら `if` で外出し
まずはこの基準で書いてみて。もしうまくいかなくても、それは君が成長している証拠だよ。一つひとつ、自分の手で動かして確かめていこう。応援しているよ！
コメント