Reactで認証機能を実装するときによく出てくるContext と Provider。
この記事では、Context と Provider の役割の違いをわかりやすく解説します！
🧠 ざっくり結論
| 名前 | 役割 | たとえ話 |
|---|---|---|
Context | 認証情報を共有するための「箱」 | 「電源コンセント本体」 |
Provider | その箱に中身を詰めて提供する「供給元」 | 「コンセントに電気を流す人」 |
👀 AuthContextとは？
export const AuthContext = createContext<AuthContextType | undefined>(undefined)- ReactのContextオブジェクトです。
- 認証情報（ログインユーザーなど）をグローバルに共有するための”箱”を作ります。
- この時点では中身は空っぽ。
つまり、「みんなで共有するための箱を用意しただけ」の状態です。
⚙️ Providerとは？
export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
const [user, setUser] = useState<User | null>(null)
const [isAuthenticated, setIsAuthenticated] = useState(false)
// ...ログイン・ログアウト処理など...
return (
<AuthContext.Provider value={{ user, login, logout, isAuthenticated }}>
{children}
</AuthContext.Provider>
)
}- Context に値をセットしてアプリ全体に渡すコンポーネントです。
- 実際の認証状態やユーザー情報を持っていて、それを
〜〜Context.Providerを通して子コンポーネントに供給しています。
要するに、「箱に実際のデータを入れて使えるようにする」のがこの Provider です。
🧩 関係性まとめ
// AuthContext：状態を共有する「箱」
export const AuthContext = createContext<AuthContextType | undefined>(undefined)
// AuthProvider：その箱にデータを詰めて、子コンポーネントに提供する
<AuthContext.Provider value={...}>
{children}
</AuthContext.Provider>
// useAuth：その箱からデータを取り出すフック（カスタムフックで分離して使うと便利！）🔌 たとえ話でイメージすると…
- Context：電源コンセントの”差込口”
- Provider：そこに電気（データ）を流す人
- use〜〜()：その電気を使うためのプラグ
📝 実際にどう使う？
// App.tsx
import { AuthProvider } from './contexts/AuthContext'
const App = () => (
<AuthProvider>
<YourAppRoutes />
</AuthProvider>
)こうすることで、<YourAppRoutes />以下のすべてのコンポーネントが useContext(AuthContext) や useAuth() を使ってログイン状態にアクセスできるようになります！
✅ まとめ
Context：共有のための「状態の箱」Provider：その箱に実際の値を入れてアプリ全体に届けるuse〜〜()：その箱から値を取り出すカスタムフック（分けておくと便利）
Reactで認証状態を管理する際には、この3点セットの関係をしっかり理解しておくと、よりスムーズに開発できるようになります！