Reactの条件分岐の使い方を完全ガイド！初心者でもわかるReactの条件分岐
生徒
「Reactで条件分岐ってできますか？」
先生
「Reactの条件分岐は、いくつかの方法があります。」
生徒
「具体的にはどのように使うんですか？」
先生
「それでは、具体的にプログラムの書き方を見ていきましょう！」
1. Reactで条件分岐するには？
Reactでは、ユーザーの操作やデータの状態によって画面表示を切り替えるために条件付きレンダリングを使います。 条件付きレンダリングとは、「もし〇〇ならこの画面を出す」「そうでなければ別の画面を出す」という仕組みで、 普段スマートフォンのアプリで見ているような切り替えの動きも、この考え方で作られています。 初心者の方はまず、表示するかどうかを判断する仕組みがあると覚えておきましょう。 そして、実際の開発では画面の切り替えだけでなく、読み込み中の表示やエラーメッセージの表示など幅広く使われています。 今回はこの条件付きレンダリングの中でも、特に「正しく動いているかをテストする方法」を学んでいきます。 テストとは、プログラムが想定どおり動くか確認する作業で、初心者の方には少し難しく感じる部分ですが、実際の現場では欠かせない作業です。 テスト方法を知ることで、自分の書いたコードを安心して公開できるようになります。
2. React Testing Libraryとは？
Reactの画面が正しく動くか調べるためのツールとして「React Testing Library」があります。 これはユーザーが実際に画面を操作したときと同じようにテストできる道具で、 とても自然な形でボタンを押したり、文字を探したりして動作をチェックできます。 初めて触る方は名前だけで難しそうに感じますが、やっていることは「画面に表示されている文字を確認する」「ボタンが押されたか確認する」といった直感的な操作です。
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で条件付きレンダリングをテストする方法
次に、この表示が正しく切り替わるかテストします。 テストではまず画面を表示し、どの文章が見えているか確認します。 そしてボタンを押し、表示が切り替わっているかを調べます。 初心者の方でも「画面にこの文字があるかどうか」を確認するだけなので、とても理解しやすいテストになっています。
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. 条件付きレンダリングを安全にテストするためのポイント
テストを書くときにはいくつか意識しておくと良いポイントがあります。 まず、画面に表示される文字を正確に確認することが大切です。 小さな文章の違いでもテストは別のものとして扱うため、文章を変えたりする場合は注意が必要です。 また、複数の表示が切り替わる場合には最初の状態と切り替わったあとの状態をしっかり確認することが大事です。 さらに、条件分岐が増えるほど確認する内容も増えるため、 自分がどの状態をテストしているのかメモを残すようにすると迷わず作業できます。 初心者の方でもこれらを意識するだけで、品質の高いテストが書けるようになります。