モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | Stateを使いこなす － DAY 22：条件付きレンダリング

React 60日で身につけるReact
スポンサーリンク
スポンサーリンク
  1. DAY 22：条件付きレンダリング 前半 ― 「状態によって画面を変える」力を身につける
  2. 条件付きレンダリングとは何か
    1. 「状態に応じて、出すUIを変える」ことです
  3. if文で条件付きレンダリングを行う基本パターン
    1. コンポーネントの中で「どのUIを返すか」を分ける
    2. 親コンポーネントから使う例
  4. 三項演算子で「1行で条件付き表示」を書く
    1. 条件 ? 真のとき : 偽のとき の形で書く
    2. 三項演算子のメリット
    3. 使い分けのイメージ
  5. && を使った「あるときだけ表示する」パターン
    1. 「条件がtrueのときだけ表示する」書き方
    2. よくある使いどころ
  6. 表示・非表示をStateで切り替える
    1. ログイン状態をStateで管理して、表示を変える
    2. このコードで使われている条件付きレンダリングを整理する
  7. if・三項演算子・&& の使い分けをまとめる
    1. それぞれの得意な場面
    2. 大事な考え方
  8. DAY 22 前半のまとめ
  9. DAY 22：条件付きレンダリング 中盤 ― 「現実的なログイン画面」を頭の中で組み立てる
  10. ログイン状態を「1つのBoolean」から始める
    1. まずは軸となるStateを決める
  11. ifで「画面全体の分岐」を書いてみる
    1. ログインしているときと、していないときでUIを丸ごと変える
    2. この書き方の特徴
  12. 三項演算子で「部分的な表示」を切り替える
    1. 同じコンポーネント内で、テキストやボタンだけを切り替える
    2. 三項演算子の使いどころ
  13. && で「あるときだけ表示する」要素を作る
    1. ログイン中だけ見せたいメッセージを追加する
    2. && の意味を丁寧に分解する
  14. 表示・非表示を「複数の条件」で考えてみる
    1. ログイン状態＋別のフラグを組み合わせる
    2. 条件を言葉で整理する
  15. if・三項演算子・&& の使い分けをもう一度まとめる
    1. 実際のログイン状態表示を例にした使い分け
  16. 練習用テンプレート：ログイン状態＋メッセージ表示
  17. DAY 22 中盤のまとめ
  18. DAY 22：条件付きレンダリング 後半 ― 「ログイン状態表示」を自分で設計できるところまで仕上げる
  19. 条件付きレンダリングは「状態の物語」をコードにすること
    1. まずは「状態」を日本語で整理する
  20. 状態をStateとして定義する
    1. Booleanを組み合わせて「今の状態」を表現する
  21. ifで「大きな分岐」を書き、三項演算子と&&で「細かい表示」を調整する
    1. 3つの状態をifで分ける
    2. この書き方のメリット
  22. 同じコンポーネント内で「部分的な表示」を三項演算子と&&で調整する
    1. 1つの画面の中で、細かい表示を切り替える
    2. ここでの使い分けを整理する
  23. 読みにくい条件付きレンダリングを避けるコツ
    1. 条件が複雑になりすぎたら「名前を付ける」
  24. コンポーネント分割で「条件付きレンダリングの責務」を分ける
    1. ログイン状態表示を小さな部品に分ける
    2. この分割の意味
  25. 練習用テンプレート：ログイン状態表示（完成版）
  26. DAY 22 後半のまとめ

DAY 22：条件付きレンダリング 前半 ― 「状態によって画面を変える」力を身につける

DAY 22では、Reactでとても重要な考え方である条件付きレンダリングを学びます。 ここからが「Stateを使いこなす」ための本格的な入り口であり、UIを“賢く”動かすための必須スキルになります。

この前半では、次のキーワードを軸に進めていきます。

  • if
  • 三項演算子（条件 ? 真のとき : 偽のとき）
  • &&（AND演算子を使った簡易的な条件付き表示）
  • 表示・非表示の切り替え
  • 制作テーマ：ログイン状態表示

すべて、「ログインしているかどうかで表示を変える」という分かりやすい題材に乗せて解説していきます。

条件付きレンダリングとは何か

「状態に応じて、出すUIを変える」ことです

条件付きレンダリングとは、 Stateや値の状態に応じて、表示するコンポーネントやテキストを切り替えることです。

例えば、次のような場面をイメージしてみてください。

  • ログインしているとき → 「こんにちは、ユーザーさん」と表示する
  • ログインしていないとき → 「ログインしてください」と表示する

このような「状態によって表示を変える」ことが、条件付きレンダリングです。 Reactでは、JavaScriptの条件分岐（if、三項演算子、&&）を使ってこれを実現します。

if文で条件付きレンダリングを行う基本パターン

コンポーネントの中で「どのUIを返すか」を分ける

まずは、最も素直な書き方である if 文を使った条件付きレンダリングを見ていきます。

function LoginStatus({ isLoggedIn }) {
  if (isLoggedIn) {
    return <p>ログインしています。</p>;
  }

  return <p>ログインしていません。</p>;
}
JSX

ここで起きていることをステップで整理します。

  1. LoginStatus コンポーネントは、isLoggedIn というBooleanのPropsを受け取ります。
  2. if (isLoggedIn) で「ログインしているかどうか」を判定します。
  3. ログインしている場合は <p>ログインしています。</p> を返します。
  4. そうでない場合は <p>ログインしていません。</p> を返します。

Reactコンポーネントは「何を返すか」でUIが決まるので、 if文で「返すもの」を分けることが、そのまま条件付きレンダリングになります。

親コンポーネントから使う例

function App() {
  const isLoggedIn = true; // 仮の状態

  return (
    <div>
      <h2>ログイン状態表示</h2>
      <LoginStatus isLoggedIn={isLoggedIn} />
    </div>
  );
}
JSX

このように、親コンポーネントから isLoggedIn を渡すことで、 ログイン状態に応じた表示を行うことができます。

三項演算子で「1行で条件付き表示」を書く

条件 ? 真のとき : 偽のとき の形で書く

次に、三項演算子を使った条件付きレンダリングを見ていきます。 これは、「if文を短く書いた形」だと考えると分かりやすいです。

function LoginStatus({ isLoggedIn }) {
  return (
    <p>
      {isLoggedIn ? "ログインしています。" : "ログインしていません。"}
    </p>
  );
}
JSX

ここで起きていることは次の通りです。

  • {isLoggedIn ? "ログインしています。" : "ログインしていません。"}
    • isLoggedIn が true のとき → "ログインしています。"
    • isLoggedIn が false のとき → "ログインしていません。"

つまり、先ほどの if 文と同じことを、1行で書いているだけです。

三項演算子のメリット

  • 短く書けるので、シンプルな条件付き表示に向いています。
  • JSXの中で直接使えるので、「テキストだけ切り替えたい」場面にぴったりです。

使い分けのイメージ

  • UI全体を切り替えたい → if 文で return を分ける
  • 一部のテキストや小さな要素だけ切り替えたい → 三項演算子を使う

このように使い分けると、コードが読みやすくなります。

&& を使った「あるときだけ表示する」パターン

「条件がtrueのときだけ表示する」書き方

次に、&&（AND演算子）を使った条件付きレンダリングを見ていきます。 これは、「ある条件がtrueのときだけ、特定の要素を表示したい」場面でよく使われます。

function WelcomeMessage({ isLoggedIn }) {
  return (
    <div>
      <h2>ようこそ</h2>
      {isLoggedIn && <p>ログインありがとうございます！</p>}
    </div>
  );
}
JSX

ここでのポイントは、

  • isLoggedIn && <p>ログインありがとうございます！</p>
    • isLoggedIn が true のとき → <p>ログインありがとうございます！</p> が表示されます。
    • isLoggedIn が false のとき → false になり、何も表示されません。

&& を使うと、「条件がtrueのときだけ表示する」というパターンを簡潔に書けます。

よくある使いどころ

  • ログインしているときだけ「ようこそ、〇〇さん」を表示する
  • エラーがあるときだけエラーメッセージを表示する
  • 特定のフラグが立っているときだけ追加情報を表示する

など、「あるときだけ出したいUI」にとても便利です。

表示・非表示をStateで切り替える

ログイン状態をStateで管理して、表示を変える

ここまでの話を、実際のStateと組み合わせて「ログイン状態表示」のミニアプリにしてみます。

import { useState } from "react";

function LoginStatus({ isLoggedIn }) {
  return (
    <p>
      {isLoggedIn ? "ログインしています。" : "ログインしていません。"}
    </p>
  );
}

function LoginApp() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
  };

  return (
    <div>
      <h2>ログイン状態表示</h2>

      <LoginStatus isLoggedIn={isLoggedIn} />

      <div style={{ marginTop: "8px" }}>
        {isLoggedIn ? (
          <button onClick={handleLogout}>ログアウト</button>
        ) : (
          <button onClick={handleLogin}>ログイン</button>
        )}
      </div>

      {isLoggedIn && <p>ログイン中のユーザー向けメッセージです。</p>}
    </div>
  );
}

export default LoginApp;
JSX

このコードで使われている条件付きレンダリングを整理する

  1. 三項演算子でテキストを切り替えjsx{isLoggedIn ? "ログインしています。" : "ログインしていません。"} ログイン状態に応じて、表示するメッセージを切り替えています。
  2. 三項演算子でボタンを切り替えjsx{isLoggedIn ? ( <button onClick={handleLogout}>ログアウト</button> ) : ( <button onClick={handleLogin}>ログイン</button> )}
    • ログインしているとき → 「ログアウト」ボタンを表示
    • ログインしていないとき → 「ログイン」ボタンを表示
  3. && で「ログイン中だけ表示するメッセージ」を出すjsx{isLoggedIn && <p>ログイン中のユーザー向けメッセージです。</p>} ログインしているときだけ、追加メッセージを表示しています。
  4. Stateでログイン状態を管理jsxconst [isLoggedIn, setIsLoggedIn] = useState(false);
    • 初期状態は「ログインしていない」（false）
    • handleLogin で true にする
    • handleLogout で false に戻す

このように、State＋条件付きレンダリングを組み合わせることで、 「ログイン状態に応じてUIが変わる」ミニアプリが自然に作れます。

if・三項演算子・&& の使い分けをまとめる

それぞれの得意な場面

  • if文
    • コンポーネントの中で「どのUIを返すか」を大きく分けたいときに使います。
    • 例：ログインしているときはダッシュボード、していないときはログイン画面を返す。
  • 三項演算子
    • テキストや小さな要素を「AかBか」で切り替えたいときに使います。
    • 例：ログイン状態メッセージ、ボタンのラベル、アイコンなど。
  • &&
    • 「ある条件がtrueのときだけ表示したい」要素に使います。
    • 例：ログイン中だけ表示する追加メッセージ、エラーがあるときだけ出す警告など。

大事な考え方

条件付きレンダリングは、 「今のStateに応じて、どのUIを見せるべきか」をコードで表現することです。

  • Stateが「ログインしている」なら、このUI
  • Stateが「ログインしていない」なら、別のUI
  • Stateが「エラーあり」なら、エラーメッセージを表示
  • Stateが「読み込み中」なら、ローディング表示

というように、状態とUIを結びつけるのがReactの本質です。

DAY 22 前半のまとめ

DAY 22の前半では、

  • 条件付きレンダリングとは「状態に応じて表示を変えること」であり、ReactではJavaScriptの条件分岐を使ってそれを実現すること
  • if 文でコンポーネントの返り値を分けることで、大きなUIの切り替えができること
  • 三項演算子を使うことで、テキストや小さな要素の切り替えをシンプルに書けること
  • && を使うことで、「ある条件がtrueのときだけ表示する」パターンを簡潔に書けること
  • ログイン状態表示のミニアプリを通して、State＋条件付きレンダリングの組み合わせを具体的なコードとしてイメージできるようになったこと

が大きなポイントになります。

読者のみなさんが、この段階で、

  • 「ログインしているかどうかで表示を変える」
  • 「ON/OFFでメッセージを出し分ける」
  • 「エラーがあるときだけ警告を出す」

といったUIを自分で書けるようになっていると、 Reactの画面設計は一気に楽しく、そして実用的なものになっていきます。

次の中盤では、条件付きレンダリングをさらに発展させて、 複数の状態・複数のコンポーネントを組み合わせた画面設計へと進んでいきます。

DAY 22：条件付きレンダリング 中盤 ― 「現実的なログイン画面」を頭の中で組み立てる

DAY 22の中盤では、前半で学んだ条件付きレンダリングを、 もう一歩「実際のアプリに近い形」まで持っていきます。

テーマは引き続き ログイン状態表示 ですが、 単に「ログインしています／していません」を出すだけでなく、

  • ボタンの表示切り替え
  • メッセージの表示・非表示
  • 複数の条件を組み合わせた分岐

などを通して、if・三項演算子・&& の使い分けを体で覚えることを目指します。

ログイン状態を「1つのBoolean」から始める

まずは軸となるStateを決める

条件付きレンダリングを考えるときは、 まず「何を軸に画面を変えるか」を決めるところから始めます。

ログイン状態表示なら、軸となるStateはとてもシンプルです。

const [isLoggedIn, setIsLoggedIn] = useState(false);
JSX
  • isLoggedIn → ログインしているかどうか（true / false）
  • setIsLoggedIn → ログイン状態を変更するための関数

この1つのBooleanを中心に、 「何を表示するか」「何を隠すか」を決めていきます。

ifで「画面全体の分岐」を書いてみる

ログインしているときと、していないときでUIを丸ごと変える

まずは、if を使って「画面全体の分岐」を書くパターンです。

import { useState } from "react";

function LoginApp() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
  };

  if (isLoggedIn) {
    return (
      <div>
        <h2>ログイン状態表示</h2>
        <p>ログインしています。</p>
        <button onClick={handleLogout}>ログアウト</button>
        <p>ログイン中のユーザー向けメニューがここに表示されます。</p>
      </div>
    );
  }

  return (
    <div>
      <h2>ログイン状態表示</h2>
      <p>ログインしていません。</p>
      <button onClick={handleLogin}>ログイン</button>
      <p>ログインすると、ユーザー専用メニューが表示されます。</p>
    </div>
  );
}

export default LoginApp;
JSX

この書き方の特徴

  • if (isLoggedIn) の中で「ログインしているときのUI」を丸ごと返しています。
  • return を2つ書くことで、「ログインしているとき」と「していないとき」で画面全体を切り替えています。

ポイント：

  • 「画面の構造そのものが変わる」ような場面では、if で return を分けると読みやすくなります。
  • ログイン画面とダッシュボードのように、まったく別のUIを出したいときに向いているパターンです。

三項演算子で「部分的な表示」を切り替える

同じコンポーネント内で、テキストやボタンだけを切り替える

次に、画面全体ではなく「一部の表示だけ」を切り替えるパターンを見ていきます。

import { useState } from "react";

function LoginApp() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
  };

  return (
    <div>
      <h2>ログイン状態表示</h2>

      <p>
        {isLoggedIn ? "ログインしています。" : "ログインしていません。"}
      </p>

      {isLoggedIn ? (
        <button onClick={handleLogout}>ログアウト</button>
      ) : (
        <button onClick={handleLogin}>ログイン</button>
      )}
    </div>
  );
}

export default LoginApp;
JSX

三項演算子の使いどころ

  • テキストを「AかBか」で切り替えたいとき
  • ボタンを「ログイン／ログアウト」で切り替えたいとき
  • アイコンやラベルなど、小さなUI要素を切り替えたいとき

ポイント：

  • 三項演算子は「1つの場所で2パターンを切り替える」場面に向いています。
  • 「この部分だけAかBかを変えたい」というときに使うと、コードがコンパクトになります。

&& で「あるときだけ表示する」要素を作る

ログイン中だけ見せたいメッセージを追加する

次に、「ログインしているときだけ表示したいメッセージ」を追加してみます。

import { useState } from "react";

function LoginApp() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
  };

  return (
    <div>
      <h2>ログイン状態表示</h2>

      <p>
        {isLoggedIn ? "ログインしています。" : "ログインしていません。"}
      </p>

      {isLoggedIn ? (
        <button onClick={handleLogout}>ログアウト</button>
      ) : (
        <button onClick={handleLogin}>ログイン</button>
      )}

      {isLoggedIn && (
        <p style={{ marginTop: "8px" }}>
          ログイン中のユーザー向けメッセージです。
        </p>
      )}
    </div>
  );
}

export default LoginApp;
JSX

&& の意味を丁寧に分解する

{isLoggedIn && <p>...</p>} は、次のように動きます。

  • isLoggedIn が true のとき
    • true && <p>...</p> → <p>...</p> が評価されて表示されます。
  • isLoggedIn が false のとき
    • false && <p>...</p> → false になり、Reactは何も表示しません。

ポイント：

  • 「ある条件がtrueのときだけ表示したい」要素には、条件 && 要素 という形がとても便利です。
  • エラーメッセージ、注意書き、追加情報など、「なくてもいいけれど、条件次第で出したいもの」に向いています。

表示・非表示を「複数の条件」で考えてみる

ログイン状態＋別のフラグを組み合わせる

中盤では、少しだけ条件を増やしてみます。 例えば、「ログインしていて、かつメール認証が終わっているときだけ表示するメッセージ」を考えてみます。

import { useState } from "react";

function LoginApp() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [isEmailVerified, setIsEmailVerified] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
    setIsEmailVerified(false);
  };

  const handleVerifyEmail = () => {
    setIsEmailVerified(true);
  };

  return (
    <div>
      <h2>ログイン状態表示（メール認証付き）</h2>

      <p>
        {isLoggedIn ? "ログインしています。" : "ログインしていません。"}
      </p>

      {isLoggedIn ? (
        <button onClick={handleLogout}>ログアウト</button>
      ) : (
        <button onClick={handleLogin}>ログイン</button>
      )}

      {isLoggedIn && !isEmailVerified && (
        <div style={{ marginTop: "8px" }}>
          <p>メール認証がまだ完了していません。</p>
          <button onClick={handleVerifyEmail}>メール認証を完了する</button>
        </div>
      )}

      {isLoggedIn && isEmailVerified && (
        <p style={{ marginTop: "8px" }}>
          メール認証済みユーザー向けメニューが表示されます。
        </p>
      )}
    </div>
  );
}

export default LoginApp;
JSX

条件を言葉で整理する

  • ログインしていない → ログインボタンだけ表示
  • ログインしている & メール認証が未完了 → 認証を促すメッセージ＋ボタンを表示
  • ログインしている & メール認証が完了 → 認証済みユーザー向けメッセージを表示

このように、複数のBooleanを組み合わせて「どのUIを出すか」を決めるのが条件付きレンダリングの本質です。

ポイント：

  • 条件が増えたときは、「状態を日本語で整理してからコードにする」と混乱しにくくなります。
  • isLoggedIn && !isEmailVerified のように、&& と ! を組み合わせることで、細かい条件を表現できます。

if・三項演算子・&& の使い分けをもう一度まとめる

実際のログイン状態表示を例にした使い分け

  • if
    • ログインしているときはダッシュボード、していないときはログイン画面など、 「コンポーネント全体を切り替える」ときに使います。
  • 三項演算子
    • ログイン状態メッセージ、ボタンのラベル、アイコンなど、 「1つの場所でAかBかを切り替える」ときに使います。
  • &&
    • ログイン中だけ表示するメッセージ、認証未完了のときだけ出す警告など、 「ある条件がtrueのときだけ表示したい要素」に使います。

この3つを「どれが正解か」ではなく、 「どの場面にどれがしっくりくるか」で選ぶ感覚を持てると、Reactのコードがぐっと読みやすくなります。

練習用テンプレート：ログイン状態＋メッセージ表示

最後に、DAY 22中盤の内容をコンパクトにまとめた練習用テンプレートを示します。

import { useState } from "react";

function LoginStatus({ isLoggedIn }) {
  return (
    <p>
      {isLoggedIn ? "ログインしています。" : "ログインしていません。"}
    </p>
  );
}

function LoginApp() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
  };

  return (
    <div>
      <h2>ログイン状態表示</h2>

      <LoginStatus isLoggedIn={isLoggedIn} />

      <div style={{ marginTop: "8px" }}>
        {isLoggedIn ? (
          <button onClick={handleLogout}>ログアウト</button>
        ) : (
          <button onClick={handleLogin}>ログイン</button>
        )}
      </div>

      {isLoggedIn && (
        <p style={{ marginTop: "8px" }}>
          ログイン中のユーザー向けメッセージです。
        </p>
      )}
    </div>
  );
}

export default LoginApp;
JSX

このテンプレートの中には、

  • if で全体を分ける代わりに、三項演算子と && で部分的に切り替えるパターン
  • Stateを軸にした表示・非表示の制御
  • コンポーネント分割（LoginStatus）とPropsによる状態の受け渡し

が自然に含まれています。

DAY 22 中盤のまとめ

DAY 22の中盤では、

  • ログイン状態という分かりやすい題材を使って、条件付きレンダリングを「画面全体」「部分的な表示」「あるときだけ表示」という3つのレベルで考えたこと
  • if・三項演算子・&& のそれぞれの得意な場面と、使い分けの感覚を具体的なコードで確認したこと
  • 複数のBoolean（ログイン状態＋メール認証状態）を組み合わせて、現実的なUIの分岐を表現する練習をしたこと
  • Stateを軸に「今の状態にふさわしいUIを出す」というReactの本質的な考え方を、ログイン状態表示を通して体感したこと

が大きなポイントになります。

この段階まで来ると、

  • 「状態によって画面を変える」
  • 「あるときだけ表示する」
  • 「複数条件で分岐する」

といったUI設計が、自分の頭の中で自然に組み立てられるようになっていきます。

DAY 22：条件付きレンダリング 後半 ― 「ログイン状態表示」を自分で設計できるところまで仕上げる

DAY 22の後半では、条件付きレンダリングを「なんとなく分かった」から 「自分で設計して、迷わず書ける」レベルまで持っていくことを目標にします。

テーマは引き続き ログイン状態表示 ですが、後半では次のようなポイントを意識して進めていきます。

  • if・三項演算子・&& の使い分けを、意図を持って選べるようにする
  • 「表示・非表示」を、Stateと結びつけて設計できるようにする
  • 実際のログイン画面に近いミニアプリを完成させる
  • よくある「読みにくい条件付きレンダリング」を避ける感覚を身につける

条件付きレンダリングは「状態の物語」をコードにすること

まずは「状態」を日本語で整理する

ログイン状態表示を作るとき、いきなりコードを書き始めるのではなく、 「どんな状態があり、それぞれのときに何を見せたいか」を日本語で整理するところから始めると、条件付きレンダリングがぐっと楽になります。

例えば、次のような状態を考えます。

  1. ログインしていない
  2. ログインしているが、メール認証がまだ
  3. ログインしていて、メール認証も完了している

それぞれの状態で、画面に何を表示したいかを言葉で書き出します。

  • 1 → 「ログインしていません」「ログインボタン」
  • 2 → 「ログインしています」「メール認証が未完了です」「認証ボタン」
  • 3 → 「ログインしています」「メール認証済みです」「ユーザー専用メニュー」

この「状態の物語」を、if・三項演算子・&& を使ってコードにしていくイメージです。

状態をStateとして定義する

Booleanを組み合わせて「今の状態」を表現する

先ほどの3つの状態は、次の2つのBooleanで表現できます。

  • isLoggedIn → ログインしているかどうか
  • isEmailVerified → メール認証が完了しているかどうか

これをReactのStateとして定義します。

import { useState } from "react";

function LoginApp() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [isEmailVerified, setIsEmailVerified] = useState(false);

  // ...
}
JSX

ここから、「この2つのStateの組み合わせに応じて、何を表示するか」を決めていきます。

ifで「大きな分岐」を書き、三項演算子と&&で「細かい表示」を調整する

3つの状態をifで分ける

まずは、3つの状態を if で分けるパターンを見てみます。

function LoginApp() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [isEmailVerified, setIsEmailVerified] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
    setIsEmailVerified(false);
  };

  const handleVerifyEmail = () => {
    setIsEmailVerified(true);
  };

  if (!isLoggedIn) {
    // 状態1：ログインしていない
    return (
      <div>
        <h2>ログイン状態表示</h2>
        <p>ログインしていません。</p>
        <button onClick={handleLogin}>ログイン</button>
        <p>ログインすると、ユーザー専用メニューが表示されます。</p>
      </div>
    );
  }

  if (isLoggedIn && !isEmailVerified) {
    // 状態2：ログインしているが、メール認証がまだ
    return (
      <div>
        <h2>ログイン状態表示</h2>
        <p>ログインしています。</p>
        <p>メール認証がまだ完了していません。</p>
        <button onClick={handleLogout}>ログアウト</button>
        <button onClick={handleVerifyEmail}>メール認証を完了する</button>
      </div>
    );
  }

  // 状態3：ログインしていて、メール認証も完了している
  return (
    <div>
      <h2>ログイン状態表示</h2>
      <p>ログインしています。</p>
      <p>メール認証済みです。</p>
      <button onClick={handleLogout}>ログアウト</button>
      <p>認証済みユーザー向けメニューがここに表示されます。</p>
    </div>
  );
}
JSX

この書き方のメリット

  • 「状態1」「状態2」「状態3」が、コード上でもはっきり分かれています。
  • それぞれの状態で、返すUIが丸ごと違うことが一目で分かります。

重要ポイント：

  • 状態がはっきり分かれていて、画面全体が変わるときは、if で return を分けると読みやすくなります。
  • 「今はどの状態か」を頭の中で追いやすくなり、バグも減ります。

同じコンポーネント内で「部分的な表示」を三項演算子と&&で調整する

1つの画面の中で、細かい表示を切り替える

今度は、画面全体を分けるのではなく、 1つのコンポーネントの中で、部分的な表示を三項演算子と&&で切り替えるパターンを見てみます。

import { useState } from "react";

function LoginApp() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [isEmailVerified, setIsEmailVerified] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
    setIsEmailVerified(false);
  };

  const handleVerifyEmail = () => {
    setIsEmailVerified(true);
  };

  return (
    <div>
      <h2>ログイン状態表示</h2>

      {/* ログイン状態メッセージ */}
      <p>
        {isLoggedIn ? "ログインしています。" : "ログインしていません。"}
      </p>

      {/* ログイン／ログアウトボタン */}
      <div style={{ marginBottom: "8px" }}>
        {isLoggedIn ? (
          <button onClick={handleLogout}>ログアウト</button>
        ) : (
          <button onClick={handleLogin}>ログイン</button>
        )}
      </div>

      {/* メール認証関連の表示 */}
      {isLoggedIn && !isEmailVerified && (
        <div style={{ marginBottom: "8px" }}>
          <p>メール認証がまだ完了していません。</p>
          <button onClick={handleVerifyEmail}>メール認証を完了する</button>
        </div>
      )}

      {isLoggedIn && isEmailVerified && (
        <p>メール認証済みユーザー向けメニューが表示されます。</p>
      )}
    </div>
  );
}

export default LoginApp;
JSX

ここでの使い分けを整理する

  • 三項演算子
    • ログイン状態メッセージ
    • ログイン／ログアウトボタン → 「AかBか」の切り替えに使っています。
  • &&
    • ログイン中かつメール認証未完了 → 認証を促すメッセージ＋ボタン
    • ログイン中かつメール認証完了 → 認証済みユーザー向けメッセージ → 「ある条件のときだけ表示する」要素に使っています。

重要ポイント：

  • 三項演算子は「2パターンのどちらかを出す」場面に向いています。
  • && は「出すか出さないか」の場面に向いています。
  • 1つのコンポーネントの中で、これらを組み合わせることで、柔軟な表示・非表示が実現できます。

読みにくい条件付きレンダリングを避けるコツ

条件が複雑になりすぎたら「名前を付ける」

条件付きレンダリングをしていると、 つい次のような書き方をしてしまうことがあります。

{isLoggedIn && isEmailVerified && !isAdmin && someFlag && (
  <p>何かのメッセージ</p>
)}
JSX

これでは、「どんな状態のときに表示されるのか」が一目で分かりにくくなります。

こういうときは、条件に名前を付けるのが有効です。

const canShowUserMessage =
  isLoggedIn && isEmailVerified && !isAdmin && someFlag;

{canShowUserMessage && <p>何かのメッセージ</p>}
JSX

こうすると、

  • 「このメッセージは、canShowUserMessage のときに表示される」
  • canShowUserMessage の中身を別の場所で落ち着いて読める

という形になり、コードの意図が伝わりやすくなります。

ポイント：

  • 条件が長くなってきたら、「その条件が意味する状態」に名前を付ける。
  • 名前は「状態を日本語で説明したときの言葉」から取ると分かりやすくなります。

コンポーネント分割で「条件付きレンダリングの責務」を分ける

ログイン状態表示を小さな部品に分ける

条件付きレンダリングが増えてきたら、 コンポーネントを分割して、それぞれに役割を持たせるのも有効です。

function LoginMessage({ isLoggedIn }) {
  return (
    <p>
      {isLoggedIn ? "ログインしています。" : "ログインしていません。"}
    </p>
  );
}

function LoginButton({ isLoggedIn, onLogin, onLogout }) {
  return isLoggedIn ? (
    <button onClick={onLogout}>ログアウト</button>
  ) : (
    <button onClick={onLogin}>ログイン</button>
  );
}

function EmailStatus({ isLoggedIn, isEmailVerified, onVerify }) {
  if (!isLoggedIn) {
    return null;
  }

  if (!isEmailVerified) {
    return (
      <div style={{ marginTop: "8px" }}>
        <p>メール認証がまだ完了していません。</p>
        <button onClick={onVerify}>メール認証を完了する</button>
      </div>
    );
  }

  return (
    <p style={{ marginTop: "8px" }}>
      メール認証済みユーザー向けメニューが表示されます。
    </p>
  );
}

function LoginApp() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [isEmailVerified, setIsEmailVerified] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
    setIsEmailVerified(false);
  };

  const handleVerifyEmail = () => {
    setIsEmailVerified(true);
  };

  return (
    <div>
      <h2>ログイン状態表示</h2>

      <LoginMessage isLoggedIn={isLoggedIn} />

      <LoginButton
        isLoggedIn={isLoggedIn}
        onLogin={handleLogin}
        onLogout={handleLogout}
      />

      <EmailStatus
        isLoggedIn={isLoggedIn}
        isEmailVerified={isEmailVerified}
        onVerify={handleVerifyEmail}
      />
    </div>
  );
}
JSX

この分割の意味

  • LoginMessage → ログイン状態メッセージだけを担当
  • LoginButton → ログイン／ログアウトボタンだけを担当
  • EmailStatus → メール認証に関する表示だけを担当

それぞれのコンポーネントが「自分の責務の中で条件付きレンダリングを行う」形になっています。

重要ポイント：

  • 条件付きレンダリングが増えてきたら、「何を担当するコンポーネントか」を意識して分割する。
  • 1つのコンポーネントに条件を詰め込みすぎると、読みにくく・壊れやすくなります。

練習用テンプレート：ログイン状態表示（完成版）

最後に、DAY 22後半の内容をまとめた「完成版テンプレート」を示します。

import { useState } from "react";

function LoginMessage({ isLoggedIn }) {
  return (
    <p>
      {isLoggedIn ? "ログインしています。" : "ログインしていません。"}
    </p>
  );
}

function LoginButton({ isLoggedIn, onLogin, onLogout }) {
  return (
    <div style={{ marginBottom: "8px" }}>
      {isLoggedIn ? (
        <button onClick={onLogout}>ログアウト</button>
      ) : (
        <button onClick={onLogin}>ログイン</button>
      )}
    </div>
  );
}

function EmailStatus({ isLoggedIn, isEmailVerified, onVerify }) {
  if (!isLoggedIn) {
    return null;
  }

  if (!isEmailVerified) {
    return (
      <div style={{ marginTop: "8px" }}>
        <p>メール認証がまだ完了していません。</p>
        <button onClick={onVerify}>メール認証を完了する</button>
      </div>
    );
  }

  return (
    <p style={{ marginTop: "8px" }}>
      メール認証済みユーザー向けメニューが表示されます。
    </p>
  );
}

function LoginApp() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [isEmailVerified, setIsEmailVerified] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
    setIsEmailVerified(false);
  };

  const handleVerifyEmail = () => {
    setIsEmailVerified(true);
  };

  return (
    <div>
      <h2>ログイン状態表示</h2>

      <LoginMessage isLoggedIn={isLoggedIn} />

      <LoginButton
        isLoggedIn={isLoggedIn}
        onLogin={handleLogin}
        onLogout={handleLogout}
      />

      <EmailStatus
        isLoggedIn={isLoggedIn}
        isEmailVerified={isEmailVerified}
        onVerify={handleVerifyEmail}
      />
    </div>
  );
}

export default LoginApp;
JSX

DAY 22 後半のまとめ

DAY 22の後半では、

  • 条件付きレンダリングを「状態の物語」として捉え、まず日本語で整理してからコードにする考え方を確認したこと
  • if・三項演算子・&& を、画面全体の分岐・部分的な表示・あるときだけ表示という役割に分けて使い分けたこと
  • 複数のBoolean（ログイン状態・メール認証状態）を組み合わせて、現実的なログインUIを表現したこと
  • 条件が複雑になったときに「名前を付ける」「コンポーネントを分割する」ことで、読みやすさと保守性を高める方法を学んだこと
  • ログイン状態表示の完成版テンプレートを通して、State＋条件付きレンダリング＋コンポーネント分割を一つの流れとして理解できるようになったこと

が大きなポイントになります。

この段階まで来ると、「状態によってUIを変える」というReactの本質的な力を、 自分の手でコントロールできる感覚がかなり育っているはずです。

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