Wiki: ページの作成:「== 概要 == `useContext` は、コンポーネントツリーを通じてデータを受け渡す仕組みである Context API から値を取得するためのHookである。

Reactアプリケーションでは、親から子へとデータをPropsで渡していく構造が基本となる。
しかし、コンポーネントの階層が深くなると、途中のコンポーネントがそのデータを使用しないにもかか…」

2026-03-06T21:43:35Z

ページの作成:「== 概要 == <code>useContext</code> は、コンポーネントツリーを通じてデータを受け渡す仕組みである Context API から値を取得するためのHookである。 Reactアプリケーションでは、親から子へとデータをPropsで渡していく構造が基本となる。 しかし、コンポーネントの階層が深くなると、途中のコンポーネントがそのデータを使用しないにもかか…」

新規ページ

== 概要 ==
<code>useContext</code> は、コンポーネントツリーを通じてデータを受け渡す仕組みである Context API から値を取得するためのHookである。 
 
Reactアプリケーションでは、親から子へとデータをPropsで渡していく構造が基本となる。 
しかし、コンポーネントの階層が深くなると、途中のコンポーネントがそのデータを使用しないにもかかわらず、下位のコンポーネントに渡すためだけにPropsを受け取り続ける Prop Drilling という問題が発生する。 
<code>useContext</code> はこの問題を解消し、任意の階層からContextの値に直接アクセスできるようにする。 
 
Context APIは、以下に示す3つの要素で構成される。 
 
<center>
{| class="wikitable"
|+ Context APIの構成要素
! 要素 !! 説明
|-
| <code>createContext</code> || コンテキストオブジェクトを作成する。 デフォルト値を引数に取る。
|-
| Provider || 子コンポーネントに値を提供する。 値を変更すると、全ての購読コンポーネントが再レンダリングされる。
|-
| <code>useContext</code> || Providerが提供する値をコンポーネントから取得する。 最も近い上位のProviderの値を返す。
|}
</center>
 
React 19では、<code><MyContext.Provider value={...}></code> という構文に加えて、<code><MyContext value={...}></code> と記述する Context as Provider パターンが導入された。 
また、条件分岐やループ内でも呼び出せる <code>use()</code> Hookが追加され、より柔軟なContext利用が可能になった。 
 

== Context APIの基本 ==
Context APIを構成する3つの要素の使い方を以下に示す。 
 
==== createContext ====
<code>createContext</code> 関数を使用してコンテキストオブジェクトを作成する。 
引数にはProviderが存在しない場合に返されるデフォルト値を指定する。 
 
<syntaxhighlight lang="typescript">
import { createContext } from 'react';

// デフォルト値を指定してコンテキストを作成する
const ThemeContext = createContext('light');

// デフォルト値にオブジェクトを指定することもできる
const UserContext = createContext({ name: '未ログイン', isLoggedIn: false });
</syntaxhighlight>
 
デフォルト値は、コンポーネントツリーのどこにも対応するProviderが存在しない場合にのみ使用される。 
 
TypeScriptでの型安全なパターンについては、後述の[[#TypeScriptでの型定義]]セクションを参照すること。 
 
==== Provider ====
Providerは、子孫コンポーネントにContextの値を提供するコンポーネントである。 
Providerで囲まれたコンポーネントは、<code>useContext</code> を通じて値にアクセスできる。 
 
React 18以前では、必ず <code>MyContext.Provider</code> という形式で記述する必要があった。 
 
* React 18以前のProvider構文
*: <syntaxhighlight lang="typescript">
function App() {
return (
<ThemeContext.Provider value="dark">
<Header />
<Main />
</ThemeContext.Provider>
);
}
</syntaxhighlight>
*: 
* React 19以降のProvider構文 (Context as Provider)
*: React 19以降では、コンテキストオブジェクト自体をProviderとして直接使用できる。
 
<syntaxhighlight lang="typescript">
function App() {
return (
<ThemeContext value="dark">
<Header />
<Main />
</ThemeContext>
);
}
</syntaxhighlight>
 
==== useContext ====
<code>useContext</code> Hookは、最も近い上位のProviderが提供する値を返す。 
 
<syntaxhighlight lang="typescript">
import { useContext } from 'react';

function Header() {
// 最も近いThemeContext.Providerのvalueを取得する
const theme = useContext(ThemeContext);

return (
<header className={theme === 'dark' ? 'header-dark' : 'header-light'}>
サイトヘッダ
</header>
);
}
</syntaxhighlight>
 
Providerがネストしている場合、<code>useContext</code> は呼び出し元のコンポーネントから最も近い (最も内側の) Providerの値を返す。 
 

== TypeScriptでの型定義 ==
TypeScriptを使用する場合、Contextの型を明示的に定義することで型安全なアクセスが可能になる。 
 
==== Contextの型定義 ====
デフォルト値に undefined を使用するパターンが推奨される。 
このパターンにより、Providerの外でContextを使用した場合にTypeScriptが警告を出すようになる。 
 
<syntaxhighlight lang="typescript">
import { createContext, useState } from 'react';

interface ThemeContextValue {
theme: 'light' | 'dark';
setTheme: (theme: 'light' | 'dark') => void;
}

// デフォルト値をundefinedにして型パラメータを指定する
const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);

function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<'light' | 'dark'>('light');

return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
}
</syntaxhighlight>
 
==== カスタムHookによる型安全なアクセス ====
<code>createContext<T | undefined>(undefined)</code> パターンと組み合わせて、カスタムHookを作成することでより安全にContextを利用できる。 
 
カスタムHookの中でundefinedチェックを行うことにより、Provider未配置時のエラーを早期に検出できる。 
 
<syntaxhighlight lang="typescript">
import { useContext } from 'react';

// ThemeContext用のカスタムHook
function useTheme(): ThemeContextValue {
const context = useContext(ThemeContext);
if (context === undefined) {
throw new Error('useTheme は ThemeProvider の内側で使用してください');
}
return context;
}

// 使用側のコンポーネント
function ThemeToggleButton() {
const { theme, setTheme } = useTheme();

return (
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
現在のテーマ: {theme}
</button>
);
}
</syntaxhighlight>
 
このパターンを使用することにより、以下に示すメリットが得られる。 
* 型安全性
*: 戻り値が常に <code>ThemeContextValue</code> 型であることが保証される。
* エラーの早期検出
*: Provider未配置の場合に明確なエラーメッセージが表示される。
* 利便性
*: 使用側で毎回 <code>useContext</code> とContextオブジェクトをimportする必要がなくなる。
 

== React 19でのContextの変更 ==
React 19では、Contextに関する構文と機能が拡張された。 
 
==== Context as Providerパターン ====
React 19以降では、コンテキストオブジェクトをProviderとして直接使用できる。 
これにより、<code>MyContext.Provider</code> という冗長な記述が不要になる。 
 
<syntaxhighlight lang="typescript">
import { createContext, useState } from 'react';

const ThemeContext = createContext<'light' | 'dark'>('light');

function App() {
const [theme, setTheme] = useState<'light' | 'dark'>('light');

return (
// React 19: <ThemeContext.Provider> の代わりに <ThemeContext> を直接使用できる
<ThemeContext value={theme}>
<Header />
<Main />
</ThemeContext>
);
}
</syntaxhighlight>
 
==== use() Hook ====
React 19では、<code>useContext</code> の改良版として <code>use()</code> Hookが追加された。 
<code>use()</code> の最大の特徴は、条件分岐やループの内側でも呼び出せる点である。 
 
<syntaxhighlight lang="typescript">
import { use } from 'react';

function ThemeDisplay({ showTheme }: { showTheme: boolean }) {
// use()は、if文の内側でも呼び出せる (通常のHookはこれができない)
if (showTheme) {
const theme = use(ThemeContext);
return 現在のテーマ: {theme};
}

return テーマ非表示;
}
</syntaxhighlight>
 
下表に、<code>useContext</code> と <code>use()</code> の比較を示す。 
 
<center>
{| class="wikitable"
|+ useContext と use() の比較
! 項目 !! useContext !! use()
|-
| React バージョン || React 16.8以降 || React 19以降
|-
| 条件分岐内での呼び出し || 不可 || 可能
|-
| ループ内での呼び出し || 不可 || 可能
|-
| Promiseの受け取り || 不可 || 可能 (Suspenseと組み合わせて使用)
|-
| 使用場所 || 関数コンポーネントのトップレベルのみ || より柔軟な場所で使用可能
|}
</center>
 

== サンプルコード ==
実務での使用頻度が高いContextのパターンを以下に示す。 
 
==== テーマ切替 ====
ライト/ダークモードのようなテーマ設定を、アプリケーション全体で共有するパターンである。 
 
<syntaxhighlight lang="typescript">
import { createContext, useContext, useState } from 'react';

type Theme = 'light' | 'dark';

interface ThemeContextValue {
theme: Theme;
resolvedTheme: Theme;
setTheme: (theme: Theme) => void;
toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);

export function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<Theme>('light');

const toggleTheme = () => {
setTheme(prev => prev === 'light' ? 'dark' : 'light');
};

return (
<ThemeContext.Provider value={{ theme, resolvedTheme: theme, setTheme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}

export function useTheme(): ThemeContextValue {
const context = useContext(ThemeContext);
if (!context) throw new Error('useTheme は ThemeProvider の内側で使用してください');
return context;
}

// 使用例
function ThemeToggleButton() {
const { theme, toggleTheme } = useTheme();
return (
<button onClick={toggleTheme}>
{theme === 'light' ? 'ダークモードに切替' : 'ライトモードに切替'}
</button>
);
}
</syntaxhighlight>
 
==== 認証情報管理 ====
ログインユーザの情報をアプリケーション全体で共有するパターンである。 
 
<syntaxhighlight lang="typescript">
import { createContext, useContext, useState } from 'react';

interface User {
id: string;
name: string;
email: string;
}

interface AuthContextValue {
user: User | null;
isLoading: boolean;
login: (email: string, password: string) => Promise<void>;
logout: () => void;
}

const AuthContext = createContext<AuthContextValue | undefined>(undefined);

export function AuthProvider({ children }: { children: React.ReactNode }) {
const [user, setUser] = useState<User | null>(null);
const [isLoading, setIsLoading] = useState(false);

const login = async (email: string, password: string) => {
setIsLoading(true);
try {
// 認証APIを呼び出す処理
const userData = await fetchUser(email, password);
setUser(userData);
}
finally {
setIsLoading(false);
}
};

const logout = () => {
setUser(null);
};

return (
<AuthContext.Provider value={{ user, isLoading, login, logout }}>
{children}
</AuthContext.Provider>
);
}

export function useAuth(): AuthContextValue {
const context = useContext(AuthContext);
if (!context) throw new Error('useAuth は AuthProvider の内側で使用してください');
return context;
}
</syntaxhighlight>
 
==== 言語設定 (i18n) ====
アプリケーションの表示言語をグローバルに管理するパターンである。 
 
<syntaxhighlight lang="typescript">
import { createContext, useContext, useState, useCallback } from 'react';

type Locale = 'ja' | 'en' | 'zh';

type TranslationKey = 'greeting' | 'farewell' | 'submit';

const translations: Record<Locale, Record<TranslationKey, string>> = {
ja: { greeting: 'こんにちは', farewell: 'さようなら', submit: '送信' },
en: { greeting: 'Hello', farewell: 'Goodbye', submit: 'Submit' },
zh: { greeting: '你好', farewell: '再见', submit: '提交' },
};

interface I18nContextValue {
locale: Locale;
setLocale: (locale: Locale) => void;
t: (key: TranslationKey) => string;
}

const I18nContext = createContext<I18nContextValue | undefined>(undefined);

export function I18nProvider({ children }: { children: React.ReactNode }) {
const [locale, setLocale] = useState<Locale>('ja');

const t = useCallback((key: TranslationKey): string => {
return translations[locale][key];
}, [locale]);

return (
<I18nContext.Provider value={{ locale, setLocale, t }}>
{children}
</I18nContext.Provider>
);
}

export function useI18n(): I18nContextValue {
const context = useContext(I18nContext);
if (!context) throw new Error('useI18n は I18nProvider の内側で使用してください');
return context;
}
</syntaxhighlight>
 

== Providerのネスト ==
複数のContextを組み合わせる場合は、Providerをネストして使用する。 
 
アプリケーションが成長すると、多数のProviderがネストされて記述が複雑になる問題が生じる。 
これを解消するためのパターンとして、CombinedProviderパターンとComposeProvidersパターンがある。 
 
<syntaxhighlight lang="typescript">
// 複数のProviderを1つにまとめるCombinedProviderパターン
function CombinedProvider({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider>
<AuthProvider>
<I18nProvider>
{children}
</I18nProvider>
</AuthProvider>
</ThemeProvider>
);
}

// App.tsxでの使用
function App() {
return (
<CombinedProvider>
<Router>
<AppContent />
</Router>
</CombinedProvider>
);
}
</syntaxhighlight>
 
さらに汎用的なアプローチとして、Providerの配列を動的に合成するComposeProvidersパターンがある。 
 
<syntaxhighlight lang="typescript">
type ProviderComponent = ({ children }: { children: React.ReactNode }) => JSX.Element;

function composeProviders(...providers: ProviderComponent[]) {
return ({ children }: { children: React.ReactNode }) => {
return providers.reduceRight(
(acc, Provider) => <Provider>{acc}</Provider>,
children as JSX.Element
);
};
}

// 使用例
const AppProviders = composeProviders(ThemeProvider, AuthProvider, I18nProvider);

function App() {
return (
<AppProviders>
<AppContent />
</AppProviders>
);
}
</syntaxhighlight>
 

== パフォーマンスの考慮事項 ==
Contextを使用する場合は、パフォーマンスへの影響を考慮する必要がある。 
 
==== Context値変更時の再レンダリング ====
Contextの値が変更されると、そのContextを購読している全てのコンポーネントが再レンダリングされる。 
オブジェクトや配列をContext値として渡す場合、参照が毎回変わるため不必要な再レンダリングが発生しやすい。 
 
<syntaxhighlight lang="typescript">
// 問題のあるパターン : レンダリングのたびに新しいオブジェクトが作成される
function ProblematicProvider({ children }: { children: React.ReactNode }) {
const [user, setUser] = useState<User | null>(null);

return (
// value に毎回新しいオブジェクトが渡されるため、不要な再レンダリングが起きる
<UserContext.Provider value={{ user, setUser }}>
{children}
</UserContext.Provider>
);
}
</syntaxhighlight>
 
==== useMemoによる最適化 ====
<code>useMemo</code> を使用してContext値をメモ化することにより、不必要な再レンダリングを防ぐことができる。 
 
<syntaxhighlight lang="typescript">
import { createContext, useContext, useState, useMemo, useCallback } from 'react';

function OptimizedProvider({ children }: { children: React.ReactNode }) {
const [user, setUser] = useState<User | null>(null);

// useCallback で関数参照を安定化する
const login = useCallback(async (email: string, password: string) => {
const userData = await fetchUser(email, password);
setUser(userData);
}, []);

const logout = useCallback(() => {
setUser(null);
}, []);

// useMemo でContext値をメモ化する
const value = useMemo(
() => ({ user, login, logout }),
[user, login, logout]
);

return (
<UserContext.Provider value={value}>
{children}
</UserContext.Provider>
);
}
</syntaxhighlight>
 
==== Context分割パターン ====
1つの大きなContextに多くの値を格納すると、一部の値が変わるだけでそのContextを使用する全てのコンポーネントが再レンダリングされる。 
更新頻度の異なるデータを別々のContextに分割することにより、再レンダリングの範囲を最小化できる。 
 
<syntaxhighlight lang="typescript">
// 分割前 : 1つの大きなContext
// theme が変わるだけで user を使うコンポーネントも再レンダリングされる
const AppContext = createContext<{ theme: Theme; user: User | null } | undefined>(undefined);

// 分割後 : 役割ごとに独立したContext
const ThemeContext = createContext<Theme | undefined>(undefined);
const UserContext = createContext<User | null | undefined>(undefined);

// StateとDispatchを分離するパターン (useReducerとの組み合わせで特に有効)
const StateContext = createContext<AppState | undefined>(undefined);
const DispatchContext = createContext<React.Dispatch<AppAction> | undefined>(undefined);
</syntaxhighlight>
 

== useContextとuseReducerの組み合わせ ==
<code>useContext</code> と <code>useReducer</code> を組み合わせることにより、ReduxのようなグローバルなFlux状態管理パターンを実現できる。 
 
StateContextとDispatchContextを分離することで、状態を読み取るだけのコンポーネントはアクションを発行しても再レンダリングされず、パフォーマンスが向上する。 
 
<syntaxhighlight lang="typescript">
import { createContext, useContext, useReducer, useMemo } from 'react';

interface AppState {
count: number;
user: User | null;
}

type AppAction =
| { type: 'INCREMENT' }
| { type: 'DECREMENT' }
| { type: 'SET_USER'; payload: User | null };

function appReducer(state: AppState, action: AppAction): AppState {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'DECREMENT':
return { ...state, count: state.count - 1 };
case 'SET_USER':
return { ...state, user: action.payload };
default:
return state;
}
}

// StateとDispatchを別々のContextに分離する
const StateContext = createContext<AppState | undefined>(undefined);
const DispatchContext = createContext<React.Dispatch<AppAction> | undefined>(undefined);

const initialState: AppState = { count: 0, user: null };

export function AppStateProvider({ children }: { children: React.ReactNode }) {
const [state, dispatch] = useReducer(appReducer, initialState);

return (
<DispatchContext.Provider value={dispatch}>
<StateContext.Provider value={state}>
{children}
</StateContext.Provider>
</DispatchContext.Provider>
);
}

// 状態を読み取るカスタムHook
export function useAppState(): AppState {
const context = useContext(StateContext);
if (!context) throw new Error('useAppState は AppStateProvider の内側で使用してください');
return context;
}

// アクションを発行するカスタムHook
export function useAppDispatch(): React.Dispatch<AppAction> {
const context = useContext(DispatchContext);
if (!context) throw new Error('useAppDispatch は AppStateProvider の内側で使用してください');
return context;
}
</syntaxhighlight>
 

== よくある間違い ==
<code>useContext</code> を使用する時によく発生する誤りと対処法を以下に示す。 
 
==== Provider未配置 ====
<code>useContext</code> を呼び出したコンポーネントが、対応するProviderの外側に配置されている場合、<code>createContext</code> に渡したデフォルト値が返される。 
デフォルト値が undefined の場合、プロパティアクセスでエラーが発生する。 
 
<syntaxhighlight lang="typescript">
// 誤り : ThemeProviderの外側でuseThemeを呼び出している
function App() {
return (
<div>
// ThemeToggleButtonは、ThemeProviderの外側にある
<ThemeToggleButton />
<ThemeProvider>
<Main />
</ThemeProvider>
</div>
);
}

// 正しい : ThemeProviderの内側に配置する
function App() {
return (
<ThemeProvider>
<ThemeToggleButton />
<Main />
</ThemeProvider>
);
}
</syntaxhighlight>
 
また、コンポーネント関数の内側でProviderを返しても、そのコンポーネント自体はProviderの外側にあるため、自分自身はContextの値を受け取ることができない。 
 
<syntaxhighlight lang="typescript">
// 誤り : useTheme() は ThemeProvider より上の階層で呼び出されている
function ThemeAwareProvider({ children }: { children: React.ReactNode }) {
const { theme } = useTheme(); // この時点ではまだProviderが存在しない

return (
<ThemeProvider>
<div className={theme}>
{children}
</div>
</ThemeProvider>
);
}
</syntaxhighlight>
 
==== 不必要なContext使用 ====
Contextは、アプリケーション全体または複数の深い階層に渡って、データを共有する場合に適したツールである。 
1〜2階層のデータ受け渡しであれば、Propsを使用する方がシンプルでデータの流れが明確になる。 
 
<syntaxhighlight lang="typescript">
// 不必要なContextの例 : 1階層だけならPropsで十分
// Context使用 (過剰)
function Parent() {
return <UserNameContext.Provider value="田中"><Child /></UserNameContext.Provider>;
}

function Child() {
const name = useContext(UserNameContext);
return {name};
}

// Propsを使用 (適切)
function Parent() {
return <Child name="田中" />;
}

function Child({ name }: { name: string }) {
return {name};
}
</syntaxhighlight>
 
下表に、PropsとContextの使い分けの目安を示す。 
 
<center>
{| class="wikitable"
|+ Props と Contextの使い分け
! 状況 !! 推奨手段
|-
| 1〜2階層のデータ受け渡し || Props
|-
| 多くのコンポーネントで必要なデータ || Context
|-
| コンポーネントツリーの深い階層へのデータ伝達 || Context
|-
| テーマ、認証、言語設定などのグローバルな状態 || Context
|-
| 局所的なコンポーネント状態 || useState / useReducer (Propsで渡す)
|}
</center>
 

== 関連情報 ==
* [[Reactの基礎 - Hooksの基礎]]
* [[Reactの基礎 - useReducer]]
* [[Reactの基礎 - カスタムHook]]
* [[Reactの基礎 - PropsとChildren]]
 

{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,電気回路,電子回路,基板,プリント基板,React,JavaScript,TypeScript,TSX,useContext,Context API,createContext,Provider,Prop Drilling,useState,useReducer,useMemo,useCallback,カスタムHook,テーマ,認証,i18n,国際化,React 19
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:Rust]][[カテゴリ:Web]]

Reactの基礎 - useContext - 版の履歴