Reactのカスタムフックで認証状態を管理する方法！初心者でもわかるReact Hooks入門

1. カスタムフックで認証状態を管理するメリット

1. カスタムフックで認証状態を管理するメリット

ReactではuseStateやuseEffectを使って状態を管理します。 認証状態の場合、「ログインしているかどうか」「ユーザー情報は何か」といった情報を、 画面をまたいで共通して扱う必要があります。 しかし、これを各コンポーネントごとに書いてしまうと、 同じようなログイン判定や状態管理のコードが何度も登場してしまいます。

カスタムフックを使う最大のメリットは、こうした認証に関する処理を 一箇所にまとめられる点です。 ログイン状態の判定やユーザー情報の保持をフック側に集約することで、 コンポーネントは「画面に何を表示するか」だけを考えればよくなります。 その結果、コード全体が読みやすくなり、修正や追加もしやすくなります。

import { useState } from "react";

// ログイン状態だけを管理するシンプルなカスタムフック
function useSimpleAuth() {
  const [isLogin, setIsLogin] = useState(false);

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

  return { isLogin, login, logout };
}

export default useSimpleAuth;

このように、まずは「ログインしているかどうか」だけを管理する 小さなカスタムフックから始めると理解しやすくなります。 処理をまとめておくことで、別の画面でも同じ認証状態を簡単に使い回せるようになり、 Reactアプリ全体の構造も自然と整理されていきます。

2. 認証状態を管理するカスタムフックの作り方

2. 認証状態を管理するカスタムフックの作り方

まず、カスタムフックを作ります。このフックでは、ログイン状態とユーザー情報を管理します。

import { useState, useEffect } from "react";

function useAuth() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [user, setUser] = useState(null);

  const login = (userData) => {
    setIsAuthenticated(true);
    setUser(userData);
    localStorage.setItem("user", JSON.stringify(userData));
  };

  const logout = () => {
    setIsAuthenticated(false);
    setUser(null);
    localStorage.removeItem("user");
  };

  useEffect(() => {
    const storedUser = localStorage.getItem("user");
    if (storedUser) {
      setIsAuthenticated(true);
      setUser(JSON.parse(storedUser));
    }
  }, []);

  return { isAuthenticated, user, login, logout };
}

export default useAuth;

このフックでは、isAuthenticatedでログイン状態を管理し、userでユーザー情報を保持します。
login関数でログイン処理を行い、logout関数でログアウト処理を行います。
useEffectでは、ページをリロードしてもlocalStorageに保存されたユーザー情報を読み込み、ログイン状態を保持しています。

3. カスタムフックを使ったコンポーネント例

3. カスタムフックを使ったコンポーネント例

次に、このカスタムフックを使って簡単なログイン・ログアウト機能を作ります。

import React from "react";
import useAuth from "./useAuth";

function AuthDemo() {
  const { isAuthenticated, user, login, logout } = useAuth();

  return (
    <div>
      {isAuthenticated ? (
        <div>
          <h2>{user.name}さん、こんにちは！</h2>
          <button onClick={logout}>ログアウト</button>
        </div>
      ) : (
        <div>
          <h2>ログインしてください</h2>
          <button onClick={() => login({ name: "太郎" })}>ログイン</button>
        </div>
      )}
    </div>
  );
}

export default AuthDemo;

このように、カスタムフックを使うことで、ログイン状態の管理がコンポーネントから独立し、どのコンポーネントでも簡単に再利用できます。

4. カスタムフック活用のポイント

4. カスタムフック活用のポイント

カスタムフックを作るときは、以下のポイントに注意すると良いです。

• 状態はuseStateで管理する
• 初期化や副作用はuseEffectで処理する
• ログイン・ログアウトなどの関数はフック内で定義して外部から呼べるようにする
• localStorageなどを使うと、リロードしても状態を保持できる

これらを意識するだけで、認証管理を効率的に行うことができます。複雑なアプリでも同じカスタムフックを使い回せるので便利です。

5. 実践例：複数コンポーネントでの利用

5. 実践例：複数コンポーネントでの利用

認証状態を複数のコンポーネントで参照したい場合も、カスタムフックをインポートして呼び出すだけです。
例えば、ナビゲーションバーでログイン状態を表示したり、特定ページのアクセス制限に活用できます。

まとめ

まとめ

カスタムフックで認証状態を管理する考え方の整理

この記事では、Reactのカスタムフックを使って認証状態を管理する方法について学んできました。 ログインしているかどうか、ユーザー情報は何かといった情報は、アプリ全体で共通して使われることが多く、 コンポーネントごとに管理してしまうと、同じような処理が何度も出てきてしまいます。 そこでカスタムフックを使うことで、認証に関するロジックを一箇所にまとめ、 再利用しやすく、読みやすい構造にできる点が大きな特徴でした。

特に初心者の方にとっては、「どこに状態を書けばいいのか分からなくなる」という悩みがよくあります。 カスタムフックを使えば、状態管理や副作用の処理をフック側に集約し、 コンポーネントは画面表示に集中できるようになります。 これにより、Reactの基本的な考え方である「役割分担」が自然と身についていきます。

シンプルな認証カスタムフックの振り返り

今回扱った認証用カスタムフックでは、ログイン状態を真偽値で管理し、 ユーザー情報をオブジェクトとして保持していました。 また、ログインやログアウトといった操作もフックの中にまとめることで、 どのコンポーネントからでも同じ動きを簡単に呼び出せる構成になっていました。

import { useState } from "react";

function useSimpleAuth() {
  const [isLogin, setIsLogin] = useState(false);

  const login = () => {
    setIsLogin(true);
  };

  const logout = () => {
    setIsLogin(false);
  };

  return { isLogin, login, logout };
}

export default useSimpleAuth;

このような最小限の構成でも、「認証状態を一箇所で管理する」という目的は十分に達成できます。 最初は難しい仕組みを作ろうとせず、ログインしているかどうかを管理するだけの シンプルなカスタムフックから試してみるのがおすすめです。 そこから少しずつ、ユーザー情報や保存処理を追加していくことで理解が深まります。

カスタムフックを使うことで得られる理解

カスタムフックを使った認証管理を学ぶことで、 Reactにおける状態管理の考え方や、ロジックの分離の重要性が見えてきます。 コンポーネントが増えても、認証の仕組みは一つのフックを見るだけで把握できるため、 アプリ全体の理解もしやすくなります。 これは個人開発だけでなく、チーム開発においても大きなメリットになります。

また、カスタムフックは通常のJavaScript関数と同じように扱えるため、 React初心者でも比較的取り組みやすい仕組みです。 「同じ処理を書いているな」と感じたときこそ、 カスタムフックを作る良いタイミングだと言えるでしょう。