第9回：条件分岐で表示を切り替える「条件付きレンダリング」の極意

前回：Reactで「リスト表示」を攻略：map関数の使い方とkey属性の重要性では、大量のデータを一気に並べる方法を学びました。

しかし、実際のアプリでは「データがある時だけ表示したい」「ログインしている人だけにボタンを見せたい」といった場面が多々あります。このように、特定の条件に合わせてUIを出し分けることを 条件付きレンダリング と呼びます。

2026年のモダンな開発現場で、最も使われている「3つの書き方」をマスターしましょう！

1. JSXの中で「if文」は使えない？
2. 実践で使う「3つの武器」の使い分け
3. 【実践】ログイン状態で変わるマイページ
1. App.jsx（最小構成版）
4. コードの解説（JavaScript & React）
1. JavaScriptのポイント
2. Reactのポイント
5. 2026年の学び：意図しない「0」の表示に注意！
1. 今回のまとめ
2. 次回予告：複雑なフォームもこれで解決！

1. JSXの中で「if文」は使えない？

第3回のJSXルールで学んだ通り、JSXの波括弧 { } の中には「戻り値があるJavaScript」しか書けません。

実は、JavaScriptの if文 は戻り値を持たない（文である）ため、JSXの中で直接 if (true) { ... } と書くことはできないのです。その代わりに、Reactエンジニアは以下の「3つの武器」を使い分けます。

三項演算子： AかBか、どちらかを出す。
論理積（&&）：条件が一致した時だけ出す。
早期リターン：そもそも何も出さない（または別の画面を出す）。

2. 実践で使う「3つの武器」の使い分け

① 三項演算子（? :）

「ログイン中」なら「ログアウトボタン」、「未ログイン」なら「ログインボタン」を出すような、AかBかの切り替えに最適です。

② 論理積（&&）

「通知がある時だけバッジを出す」のように、**「条件に合う時だけ表示し、合わない時は何も出さない」**場合に非常に便利です。

③ 早期リターン

関数の途中で return して処理を切り上げる方法です。例えば「データ読み込み中（Loading）」の画面を先に出したい時に使います。

3. 【実践】ログイン状態で変わるマイページ

今回は、ボタンひとつで「ログイン状態」を切り替え、それに応じて表示内容がガラッと変わるサンプルを作ります。第2回の環境で作成した App.jsx を書き換えてみましょう。

App.jsx（最小構成版）

JavaScript

import React, { useState } from 'react';

export default function App() {
  // [第6回] useStateを使ってログイン状態（true / false）を管理
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 1. 早期リターンの例
  // もしメンテナンス中なら、以下のUIを全く見せずに別のものを返却する
  const isMaintenance = false; 
  if (isMaintenance) {
    return <h1>現在メンテナンス中です。</h1>;
  }

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>条件付きレンダリングの体験</h1>

      {/* 2. 三項演算子の例： ログイン状態によってメッセージを変える */}
      <h2>{isLoggedIn ? "おかえりなさい！" : "ログインしてください"}</h2>

      {/* 3. 論理積(&&)の例： ログイン中のみ秘密のメッセージを出す */}
      {isLoggedIn && (
        <p style={{ color: 'green' }}>🔓 あなただけに教える秘密の合言葉：React最高！</p>
      )}

      {/* [第7回] イベントハンドリングを使って状態を切り替える */}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? "ログアウト" : "ログイン"}
      </button>
    </div>
  );
}

CodeSandboxで条件付きレンダリングを体験する

4. コードの解説（JavaScript & React）

JavaScriptのポイント

論理積 (&&): JavaScriptには「左側が true なら右側を評価する」という性質があります。これを利用して、Reactでは「条件が合えば右側のJSXを出す」というテクニックが定着しています。
三項演算子 (条件 ? 正解 : 不正解): 第6回のスイッチサンプルでも登場した、1行で書ける便利なif文です。

Reactのポイント

null（何もしない）: もし何も表示したくない場合は、return null; と書くことで、Reactはそのコンポーネントを完全に非表示にします。
可読性: 2026年の開発では、波括弧 { } の中が長くなりすぎると読みづらいため、複雑な条件分岐はコンポーネントを分けるか、変数を外に切り出すのが「プロの書き方」です。

5. 2026年の学び：意図しない「0」の表示に注意！

論理積（&&）を使うとき、初心者がよくハマる2026年でも健在な落とし穴があります。

NG例: {list.length && <p>リストがあります</p>} もしリストが0件の場合、画面に「0」という数字が表示されてしまいます。
解決策: {list.length > 0 && <p>...</p>} のように、必ず true か false になる比較式 を書きましょう。