ReactのuseContextとは？わかりやすく解説

2024年11月1日2024年11月8日

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');

JSX

ここで作成した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 />;
}

JSX

ここで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>
  );
}

JSX

この例では、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>
  );
};

JSX

2. `App`コンポーネントでの使用

次に、このThemeProviderでアプリ全体を囲みます。

import React from 'react';
import { ThemeProvider } from './ThemeContext';
import MainComponent from './MainComponent';

function App() {
  return (
    <ThemeProvider>
      <MainComponent />
    </ThemeProvider>
  );
}

export default App;

JSX

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;