Reactの条件分岐の使い方を完全ガイド！初心者でもわかるReactの条件分岐

1. Reactで条件分岐するには？

1. Reactで条件分岐するには？

Reactでは、ユーザーの操作やデータの状態によって画面表示を切り替えるために条件付きレンダリングを使います。 条件付きレンダリングとは、「もし〇〇ならこの画面を出す」「そうでなければ別の画面を出す」という仕組みで、 普段スマートフォンのアプリで見ているような切り替えの動きも、この考え方で作られています。 初心者の方はまず、表示するかどうかを判断する仕組みがあると覚えておきましょう。 そして、実際の開発では画面の切り替えだけでなく、読み込み中の表示やエラーメッセージの表示など幅広く使われています。 今回はこの条件付きレンダリングの中でも、特に「正しく動いているかをテストする方法」を学んでいきます。 テストとは、プログラムが想定どおり動くか確認する作業で、初心者の方には少し難しく感じる部分ですが、実際の現場では欠かせない作業です。 テスト方法を知ることで、自分の書いたコードを安心して公開できるようになります。

2. React Testing Libraryとは？

2. React Testing Libraryとは？

Reactの画面が正しく動くか調べるためのツールとして「React Testing Library」があります。 これはユーザーが実際に画面を操作したときと同じようにテストできる道具で、 とても自然な形でボタンを押したり、文字を探したりして動作をチェックできます。 初めて触る方は名前だけで難しそうに感じますが、やっていることは「画面に表示されている文字を確認する」「ボタンが押されたか確認する」といった直感的な操作です。

3. 条件付きレンダリングのサンプルコンポーネント

3. 条件付きレンダリングのサンプルコンポーネント

まずは条件付きレンダリングを使ったシンプルなReactコンポーネントを見てみましょう。 ボタンを押すとメッセージが変わり、条件によって表示される内容が変わる仕組みです。

import React, { useState } from "react";

export default function Greeting() {
  const [loggedIn, setLoggedIn] = useState(false);

  return (
    <div>
      {loggedIn ? <p>ようこそ！</p> : <p>ログインしてください</p>}
      <button onClick={() => setLoggedIn(!loggedIn)}>
        切り替え
      </button>
    </div>
  );
}

4. React Testing Libraryで条件付きレンダリングをテストする方法

4. React Testing Libraryで条件付きレンダリングをテストする方法

次に、この表示が正しく切り替わるかテストします。 テストではまず画面を表示し、どの文章が見えているか確認します。 そしてボタンを押し、表示が切り替わっているかを調べます。 初心者の方でも「画面にこの文字があるかどうか」を確認するだけなので、とても理解しやすいテストになっています。

import { render, screen, fireEvent } from "@testing-library/react";
import Greeting from "./Greeting";

test("ボタンで表示が切り替わること", () => {
  render(<Greeting />);

  expect(screen.getByText("ログインしてください")).toBeInTheDocument();

  fireEvent.click(screen.getByRole("button"));

  expect(screen.getByText("ようこそ！")).toBeInTheDocument();
});

このテストでは、画面にある文章を探すためにgetByTextという機能を使っています。 ユーザーが実際に画面を目で見て確認するのと同じように動作します。 また、ボタンを押すためにfireEventという機能を使いますが、 これは「クリックされた」という操作を再現するための道具です。 どちらも初心者の方が最初に覚えるべき基本的なテスト方法です。

5. 条件付きレンダリングを安全にテストするためのポイント

5. 条件付きレンダリングを安全にテストするためのポイント

テストを書くときにはいくつか意識しておくと良いポイントがあります。 まず、画面に表示される文字を正確に確認することが大切です。 小さな文章の違いでもテストは別のものとして扱うため、文章を変えたりする場合は注意が必要です。 また、複数の表示が切り替わる場合には最初の状態と切り替わったあとの状態をしっかり確認することが大事です。 さらに、条件分岐が増えるほど確認する内容も増えるため、 自分がどの状態をテストしているのかメモを残すようにすると迷わず作業できます。 初心者の方でもこれらを意識するだけで、品質の高いテストが書けるようになります。

まとめ

まとめ

Reactの条件分岐とテストの重要ポイント

Reactの条件分岐は、ユーザーの状態や操作に応じて画面の表示内容を切り替えるために欠かせない基本機能です。 条件付きレンダリングを理解することで、ログイン状態の切り替えやデータの有無による表示制御など、 実際のアプリケーション開発において必要な処理を柔軟に実装できるようになります。 特に三項演算子を使った書き方はシンプルで読みやすく、初心者から実務レベルまで幅広く利用されている方法です。

また、Reactの開発では表示が正しく切り替わるかを確認するためのテストも非常に重要です。 React Testing Libraryを使うことで、ユーザーが実際に操作したときと同じような視点でテストを行うことができます。 例えば、画面に特定の文字が表示されているか確認したり、ボタンをクリックしたときに表示が変化するかをチェックすることで、 条件分岐が意図どおりに動作しているかを確実に検証できます。

条件付きレンダリングとテストを組み合わせることで、バグの少ない安定したアプリケーションを作ることができます。 初心者の方はまず、画面の表示がどの条件で変わるのかを整理し、そのあとにテストで確認するという流れを意識すると理解しやすくなります。 この流れを習慣化することで、React開発における品質向上や保守性の高いコードを書く力が自然と身についていきます。

応用を意識したサンプルコード

次に、条件分岐とテストをより実践的に理解するためのサンプルコードを確認してみましょう。 複数の条件を持つ場合でも同じ考え方で実装できることがわかります。

import React, { useState } from "react";

export default function StatusMessage() {
  const [status, setStatus] = useState("guest");

  return (
    

      {status === "guest" && <p>ゲストです</p>}
      {status === "user" && <p>ログイン中です</p>}
      {status === "admin" && <p>管理者です</p>}

      <button onClick={() => setStatus("user")}>ユーザー</button>
      <button onClick={() => setStatus("admin")}>管理者</button>
    
  );
}

テストコードのポイント整理

テストコードを書く際には、まず初期状態の確認を行い、その後にユーザー操作を再現して状態変化を検証することが重要です。 条件分岐が複数ある場合には、それぞれの状態を一つずつ丁寧にテストすることで、想定外の動作を防ぐことができます。 特にボタン操作や入力操作など、ユーザーが関わる部分は重点的に確認するようにしましょう。

import { render, screen, fireEvent } from "@testing-library/react";
import StatusMessage from "./StatusMessage";

test("状態ごとの表示が正しく切り替わること", () => {
  render(<StatusMessage />);

  expect(screen.getByText("ゲストです")).toBeInTheDocument();

  fireEvent.click(screen.getByText("ユーザー"));
  expect(screen.getByText("ログイン中です")).toBeInTheDocument();

  fireEvent.click(screen.getByText("管理者"));
  expect(screen.getByText("管理者です")).toBeInTheDocument();
});

このように、条件ごとにテストを書くことで、Reactの条件分岐が正しく動作しているかを確実に確認できます。 また、コードの変更や機能追加を行った場合でも、テストがあれば安心して修正を進めることができます。 開発現場ではこのようなテストが品質を支える重要な役割を持っているため、早い段階から慣れておくことが大切です。