先生と生徒の会話形式で理解しよう

生徒

「Reactで条件分岐ってできますか？」

先生

「Reactの条件分岐は、いろいろな書き方がありますよ。」

生徒

「コンポーネントが増えると、ごちゃごちゃして理解できなくなってしまいます…」

先生

「その場合は、条件分岐のロジックをカスタムフックとして切り出すのが効果的です。これならコードがとても整理されますよ。」

生徒

「カスタムフックってどう使うんですか？」

先生

「それでは、具体的な書き方を一緒に見ていきましょう！」

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

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

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

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

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

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

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. 複雑な条件でも整理できる

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

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