Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第2章：Reactの基本 – 条件分岐

React Next.js
スポンサーリンク

この課題のねらい

この演習は「React で条件分岐して表示を切り替える」感覚をつかむのがテーマです。
やることはシンプルですが、実務でめちゃくちゃ使う考え方です。

true / false で表示を切り替える
「ログインしている／していない」で文言を切り替える
三項演算子 条件 ? A : B でスマートに分岐する

この3つができれば、かなり多くの UI パターンを自分で書けるようになります。

必須課題① true/falseで表示切り替え

stateのtrue/falseで出す・出さないを切り替える

一番シンプルなパターンからいきます。
ボタンを押すたびに「お知らせ」を表示／非表示切り替える例です。

"use client";

import { useState } from "react";

export default function ToggleExample() {
  const [isVisible, setIsVisible] = useState(true);

  function handleToggle() {
    setIsVisible(!isVisible);
  }

  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>条件分岐の基本</h1>

      <button onClick={handleToggle} style={{ marginTop: "8px" }}>
        メッセージを {isVisible ? "隠す" : "表示する"}
      </button>

      {isVisible && (
        <p style={{ marginTop: "12px" }}>
          これは isVisible が true のときだけ表示されるメッセージです。
        </p>
      )}
    </main>
  );
}
TSX

ポイントを整理します。

const [isVisible, setIsVisible] = useState(true);
このコンポーネントは、isVisible という真偽値の state を持っています。
最初は true なので、メッセージは表示されます。

setIsVisible(!isVisible);
true → false、false → true に反転させています。

JSX 部分の {isVisible && (...)} が重要です。

A && B は、A が true のときだけ B を評価・表示する、というパターンで、
React では「trueのときだけ出す」一番よく見る書き方です。

つまり、

isVisible が true のときだけ <p>...</p> が描画される
false のときは何も描画されない

という挙動になります。

この「条件 && JSX」パターンは、
「ある条件でだけ表示したい要素」に対してよく使います。

必須課題② ログイン状態の表示

isLoggedInでメッセージを切り替える

次は、「ログインしている／していない」で表示メッセージを切り替える例です。
ここでは、isLoggedIn という state を使います。

"use client";

import { useState } from "react";

export default function LoginStateExample() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  function handleLogin() {
    setIsLoggedIn(true);
  }

  function handleLogout() {
    setIsLoggedIn(false);
  }

  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>ログイン状態の表示</h1>

      {isLoggedIn ? (
        <p style={{ marginTop: "8px" }}>ログイン中です。ようこそ！</p>
      ) : (
        <p style={{ marginTop: "8px" }}>ログインしていません。</p>
      )}

      <div style={{ marginTop: "12px", display: "flex", gap: "8px" }}>
        <button onClick={handleLogin}>ログインする</button>
        <button onClick={handleLogout}>ログアウトする</button>
      </div>
    </main>
  );
}
TSX

ここでは、条件分岐を「三項演算子」で書いています。

{isLoggedIn ? ( ログイン中の表示 ) : ( 未ログインの表示 )}

読み方はこうです。

isLoggedIn が true なら ? の後ろの JSX を表示
false なら : の後ろの JSX を表示

つまり、

ログイン中なら「ログイン中です。ようこそ！」
そうでなければ「ログインしていません。」

が出る、という仕組みです。

ボタンは単に、

「ログイン中のフラグ」を true / false に切り替えているだけ

ですが、それに応じて JSX の分岐も自動で切り替わる、というのがポイントです。

挑戦課題 三項演算子で分岐表示

三項演算子で2パターンの見た目を切り替える

三項演算子は、React で条件分岐するときにかなりよく使います。
特に「2 パターンの UI を切り替える」ときに便利です。

進捗状況によってメッセージを変える例をやってみましょう。

"use client";

import { useState } from "react";

export default function ProgressExample() {
  const [completed, setCompleted] = useState(3);
  const total = 10;

  const isFinished = completed >= total;

  function handleAdd() {
    if (!isFinished) {
      setCompleted((prev) => prev + 1);
    }
  }

  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>学習進捗</h1>

      <p>
        {total} レッスン中 {completed} レッスン完了
      </p>

      <p style={{ marginTop: "8px" }}>
        {isFinished
          ? "全てのレッスンを完了しました！お疲れさまです。"
          : "まだレッスンが残っています。コツコツ進めましょう。"}
      </p>

      <button
        onClick={handleAdd}
        disabled={isFinished}
        style={{ marginTop: "12px" }}
      >
        1レッスン完了にする
      </button>
    </main>
  );
}
TSX

ここでの三項演算子は、

{isFinished ? "完了メッセージ" : "まだ残っているときのメッセージ"}

という形になっています。

流れとしては、

completed が total 以上なら isFinished が true
そのときは「完了しました」メッセージ
そうでなければ「まだ残っている」メッセージ

が表示されます。

三項演算子は、

「Aのときはこれ、Bのときはこれ」という 2 択を
1 行でサッと書ける

のが強みです。

条件分岐を書くときのポイント

どの書き方をいつ使うかの目安

条件分岐には、大きく次の 2 パターンがあります。

条件 && JSX
「true のときだけ出したい要素」があるとき
例：isVisible && <Message />

条件 ? JSX_A : JSX_B
「A か B のどちらか一方を出したい」とき
例：isLoggedIn ? <LoggedIn /> : <Guest />

目安としては、

出したり消したりしたいだけ → &&
メッセージやコンポーネントを切り替えたい → 三項演算子

と覚えておくと書き分けやすいです。

複雑になりすぎたら「コンポーネントに分ける」

三項演算子の中に長い JSX をベタっと書き始めると、
すぐに読みづらくなります。

例えば、こんな感じになってきたら危険信号です。

{isLoggedIn ? (
  <div>長いログイン中UI...</div>
) : (
  <div>長い未ログインUI...</div>
)}
TSX

こういうときは、

LoggedInView と GuestView コンポーネントを別で作って、
三項演算子の中はコンポーネント名だけにする

という分割が有効です。

{isLoggedIn ? <LoggedInView /> : <GuestView />}
TSX

「条件分岐そのもの」と「中身の詳細」を分離すると、
実務レベルでも読みやすいコードになっていきます。

まとめ：条件分岐でつかんでほしいこと

この課題で身につけてほしいのは、次の感覚です。

true / false の state（isVisible, isLoggedIn など）を軸にして UI を出し分ける
条件 && JSX で「true のときだけ表示」、三項演算子で「A か B かの切り替え」ができる
状態が変わると、条件分岐の結果も自動で変わり、UI がそれに合わせて更新される

これが理解できていると、

エラー時だけエラーメッセージを出す
ログインしている人だけ見られるボタンを出す
完了している TODO には「完了」バッジを出す

といった、「実用的な UI の切り替え」が自然に書けるようになります。

もし余力があれば、

読み込み中（ローディング）／成功／エラー
の 3 パターンを、status という state（”loading” | “success” | “error”）で切り替えるコンポーネント

なんかも作ってみてください。

スポンサーリンク
タイトルとURLをコピーしました