Reactでの開発が進むと、
親コンポーネントから子コンポーネントに情報を渡したい場面が増えてきます。
たとえば、ユーザーの設定やテーマカラーなど、
どのコンポーネントでも使える共通のデータを扱うとき、
毎回propsを使って一つひとつのコンポーネントに渡していくのは少し大変です。
このような場面で使えるのがuseContextです。
このブログ記事では、useContextとは何か、どうやって使うのか、
そして実際にReactアプリに組み込む方法を、初心者の方でもわかりやすいように解説します。
useContextとは？どんなときに使う？
Contextとは？リアルな例でイメージしよう
ReactのuseContextは、コンポーネントの「情報共有」を楽にするための仕組みです。
イメージとしては「家族共有のノート」のようなもの。
たとえば、家族が共通で使う情報（誕生日やアレルギーなどのメモ）を一冊のノートにまとめ、
それを家族全員が確認できると便利ですよね。
ReactのuseContextも似たような役割を持ち、親子関係に関わらず、
コンポーネント全体でデータを共有できるようにします。
通常、コンポーネント間でデータを共有するためにはpropsでデータを親から子へ渡しますが、
複数の階層にわたるとコードが煩雑になってしまいます。
useContextを使うと、この「コンポーネントツリー全体で情報を簡単に共有する」ことが可能になります。
useContextの仕組み
useContextを使うためには、まず「Context」という「情報の箱」を作ります。
この箱に共通で使いたいデータを入れておき、各コンポーネントがuseContextを使ってその情報を取得します。
こうすることで、propsを渡さずに、どのコンポーネントからも直接そのデータにアクセスできます。
useContextの基本的な使い方
ここでは、ReactでuseContextを使うための手順を見ていきます。
1. Contextを作成する
まずはReactのcreateContext関数を使ってContextを作ります。
このContextには、コンポーネント間で共有したいデータを入れることができます。
import React, { createContext } from 'react';
// コンテキストを作成（例: テーマ用）
const ThemeContext = createContext('light');
ここで作成したThemeContextには、デフォルトで'light'というテーマが入っています。
これにより、ThemeContextにアクセスしたコンポーネントは、
デフォルトで'light'の情報を受け取れます。
2. Contextに値を提供する
次に、ThemeContext.Providerを使って、子コンポーネントに情報を渡します。
ProviderはContextの「配達係」のようなもので、
このタグで囲まれたすべてのコンポーネントがThemeContextにアクセスできるようになります。
import React from 'react';
import { ThemeContext } from './ThemeContext';
function App() {
return (
<ThemeContext.Provider value="dark">
<ChildComponent />
</ThemeContext.Provider>
);
}
function ChildComponent() {
return <GrandChildComponent />;
}
ここでThemeContext.Providerのvalueに"dark"を設定すると、
このProviderで囲まれたすべてのコンポーネントが
ThemeContextを使って"dark"という情報を取得できます。
3. useContextでContextの値を取得する
最後に、useContextを使ってContextに入っている値を取得します。
これによって、どのコンポーネントでもThemeContextの値にアクセスできます。
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';
function GrandChildComponent() {
const theme = useContext(ThemeContext);
return (
<div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>
現在のテーマは{theme}です
</div>
);
}
この例では、useContext(ThemeContext)を使ってThemeContextの値を取得し、
theme変数に入れています。
このthemeの値に応じて背景色と文字色を変えています。
useContextを使うときの注意点
1. Contextはあまり多用しない
useContextはとても便利ですが、むやみに多用するとコードが複雑になることもあります。
Contextは「アプリ全体で共通して使う必要があるデータ」に限定して使うようにしましょう。
特に大規模なアプリケーションでは、
Contextが増えすぎると管理が大変になるため、
Reduxなどの状態管理ツールと組み合わせることも検討してください。
2. Contextの更新が全体に影響することを意識する
Contextの値が更新されると、
そのContextを使っているすべてのコンポーネントが再レンダリングされます。
もし頻繁に更新が必要なデータをContextで管理している場合、
パフォーマンスに影響を与える可能性があるため注意が必要です。
3. 値のプロバイダを入れ子にしない
異なるContextを同時に使いたい場合、Providerを入れ子にすることがよくありますが、
入れ子が増えるとコードが読みづらくなるため、設計の工夫が必要です。
useContextを活用した具体例：ダークモード切り替えアプリ
ここでは、実際にダークモードとライトモードを切り替えられる簡単なアプリを作成してみます。
1. Contextの作成
まずは、テーマの値を管理するThemeContextを作成します。
import React, { createContext, useState } from 'react';
export const ThemeContext = createContext();
export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
2. Appコンポーネントでの使用
次に、このThemeProviderでアプリ全体を囲みます。
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import MainComponent from './MainComponent';
function App() {
return (
<ThemeProvider>
<MainComponent />
</ThemeProvider>
);
}
export default App;
3. useContextでテーマを取得・切り替え
最後に、MainComponentでuseContextを使い、テーマの取得や切り替えを行います。
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';
function MainComponent() {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>
<p>現在のテーマは{theme}です。</p>
<button onClick={toggleTheme}>テーマを切り替え</button>
</div>
);
}
export default MainComponent;
ボタンをクリックするとテーマが切り替わり、MainComponentの背景色と文字色が変わります。
これで、useContextを使ってテーマの値を共有し、リアルタイムで変更するアプリが完成しました！
まとめ
useContextはReactのコンポーネント間で情報を共有するための便利な仕組みです。
propsのバケツリレーを解消し、アプリケーション全体で共通のデータを扱う際に役立ちます。
しかし、過度に多用すると管理が難しくなるため、必要な場面でのみ使うように心がけましょう。
ぜひ、この記事を参考にして、useContextを活用してみてください！
あざした
