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

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

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

Reactでは、画面に表示する内容を状況によって切り替えるために条件分岐を行います。JavaScriptのif文や三項演算子を使うほか、コンポーネントごとに表示を分ける方法もよく使われます。初心者の方でも、まずは「状況に応じて出す内容を切り替える」という考え方をしっかり理解することが大切です。例えば、天気予報の画面を思い浮かべると、晴れの日は太陽のアイコンを、雨の日は傘のアイコンを表示しますよね。この仕組みがまさに条件分岐です。

Reactの条件付きレンダリングでは、状態（state）の値に応じて表示する内容を切り替えます。ユーザーがボタンを押したり、データの読み込みが完了したりといった変化によって画面が更新されるため、状況判断を細かく行う必要があります。しかし、複雑なロジックをコンポーネントの内部に全部書いてしまうと、読みづらく管理が難しくなってしまいます。このような問題を防ぐために、条件分岐に関する処理をカスタムフックにまとめる方法が便利です。

2. カスタムフックにロジックを切り出すメリット

2. カスタムフックにロジックを切り出すメリット

カスタムフックとは、Reactの機能を使って処理をまとめた再利用可能な関数のことです。条件分岐のロジックをコンポーネントから切り出すことで、見通しが良くなり管理が楽になります。特に複数の場所で同じ条件を使いたい場合に非常に役立ちます。

例えば、ログインしているかどうかで画面の表示を変えるケースを考えてみましょう。ログイン状態を判定するロジックをカスタムフックにまとめておけば、どのコンポーネントでも同じ判断基準を利用できます。まるで「ログインしているかどうかを判断する専属スタッフ」を作るようなものです。毎回同じ処理を書かなくて済むので、コード量も減って読みやすさが向上します。

3. 条件分岐ロジックをカスタムフックに切り出す書き方

3. 条件分岐ロジックをカスタムフックに切り出す書き方

ここでは、ユーザーのログイン状態によって表示内容を変える例を使って、実際にカスタムフックでロジックを分離する方法を解説します。

● カスタムフックのサンプルコード

import { useState } from "react";

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

  const login = () => setIsLoggedIn(true);
  const logout = () => setIsLoggedIn(false);

  return { isLoggedIn, login, logout };
}

このカスタムフックは、ログイン状態を管理する役割を持っています。状態と、それを変更する関数をまとめて返すことで、コンポーネント側でシンプルに扱えるようになっています。

● コンポーネント側の条件分岐

import React from "react";
import { useAuthStatus } from "./useAuthStatus";

function App() {
  const { isLoggedIn, login, logout } = useAuthStatus();

  return (
    <div>
      {isLoggedIn ? (
        <div>
          <h1>ログイン中です</h1>
          <button onClick={logout}>ログアウト</button>
        </div>
      ) : (
        <div>
          <h1>ログインしていません</h1>
          <button onClick={login}>ログイン</button>
        </div>
      )}
    </div>
  );
}

export default App;

このように、コンポーネント側では「ログインしているかどうか」だけをシンプルに書けばよくなり、見通しの良いコードになります。条件分岐そのものはカスタムフックで管理するため、細かい処理がコンポーネントに混ざらず、初心者でも読みやすく扱いやすい構造になります。

4. 複雑な条件でも整理できる

4. 複雑な条件でも整理できる

画面表示の条件が増えるほど、コンポーネント内部のコードは複雑になります。しかし、カスタムフックを使えば条件ごとに役割を分けることができ、理解しやすくなります。例えば、データ読み込み中かどうか、エラーが発生したかどうかといった状態を同じコンポーネント内にすべて詰め込んでしまうと混乱してしまいます。そこで、読み込み状態やエラー状態を扱うフックを作成すれば、コンポーネントは「どんな状態か」を受け取って表示を切り替えるだけになります。

このようにカスタムフックを活用すると、チーム開発でも役に立ちます。一人が作った条件ロジックを他のメンバーも簡単に再利用できるため、効率的にプロジェクトを進めることができます。コードの再利用は、学習を始めたばかりの方にとっても大切な考え方で、同じ処理を書き直す負担も減らせます。状況判断をまとめて整理することができるため、動作の不具合にも気づきやすくなります。

まとめ

まとめ

Reactにおける条件分岐は、画面の表示内容を状況に応じて柔軟に切り替えるための非常に重要な考え方です。特に初心者の方にとっては、まず状態に応じて表示を変えるという基本を理解することが大切になります。今回の記事では、if文や三項演算子といった基本的な条件分岐の考え方に加えて、カスタムフックを活用することでロジックを整理する方法について詳しく解説しました。コンポーネントの中に条件分岐をすべて書いてしまうと、コードが複雑になりやすく、後から読み返したときに理解しづらくなるという課題があります。この問題を解決するために、条件分岐のロジックをカスタムフックとして切り出すことで、コードの見通しが大幅に改善されます。

また、カスタムフックを活用することで、同じロジックを複数のコンポーネントで再利用できるようになります。これは開発効率を高めるだけでなく、バグの発生を抑える効果もあります。例えばログイン状態の判定やデータ取得の状態管理など、よく使う処理は一箇所にまとめておくことで、全体の設計がシンプルになります。Reactの開発では、コンポーネントをできるだけシンプルに保つことが重要であり、そのためにロジックを分離するという考え方はとても有効です。

さらに、条件分岐を整理することでチーム開発にも良い影響を与えます。誰が見ても理解しやすいコードは、保守性が高くなり、修正や機能追加がしやすくなります。特に大規模なアプリケーションでは、状態管理や条件分岐が複雑になりやすいため、早い段階でカスタムフックを取り入れて設計することが重要です。初心者の方はまずシンプルな条件分岐から始め、徐々にカスタムフックを使った設計に慣れていくと良いでしょう。

サンプルプログラムで復習

import React from "react";
import { useAuthStatus } from "./useAuthStatus";

function App() {
  const { isLoggedIn, login, logout } = useAuthStatus();

  return (
    <div>
      {isLoggedIn ? (
        <div>
          <h1>ログイン中です</h1>
          <button onClick={logout}>ログアウト</button>
        </div>
      ) : (
        <div>
          <h1>ログインしていません</h1>
          <button onClick={login}>ログイン</button>
        </div>
      )}
    </div>
  );
}

export default App;