【React】useContextフックの使い方と実践ガイド

2024年6月14日

はじめに

ReactのuseContextフックは、コンポーネント間でデータを共有するための強力なツールです。本記事では、useContextの基本的な使い方から実践的な応用までを詳しく解説します。

useContextとは？

useContextはReactのフックの一つで、コンテクストAPIと組み合わせて使用されます。コンテクストAPIは、Reactアプリケーション全体でグローバルな状態を管理するための仕組みです。useContextを使用することで、コンポーネントツリーの深くにあるコンポーネントでも、親コンポーネントからのプロップスを介さずにデータにアクセスできます。

useContextの基本的な使い方

まずは、useContextの基本的な使い方を見てみましょう。

1. コンテクストの作成

最初に、コンテクストを作成します。これには、React.createContext関数を使用します。

import React, { createContext } from 'react';

const MyContext = createContext();

2. コンテクストプロバイダーの設定

次に、コンテクストプロバイダーを設定します。プロバイダーは、ツリー内のすべてのコンポーネントにデータを提供します。

import React from 'react';
import ReactDOM from 'react-dom';

const MyContext = createContext();

const App = () => {
  return (
    <MyContext.Provider value="Hello, World!">
      <ChildComponent />
    </MyContext.Provider>
  );
};

const ChildComponent = () => {
  return <GrandChildComponent />;
};

const GrandChildComponent = () => {
  return <DeepComponent />;
};

const DeepComponent = () => {
  const value = React.useContext(MyContext);
  return <div>{value}</div>;
};

ReactDOM.render(<App />, document.getElementById('root'));

3. useContextフックの使用

コンテクストの値にアクセスするためには、useContextフックを使用します。

import React, { useContext } from 'react';

const DeepComponent = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};

これで、DeepComponentはプロバイダーで提供された値にアクセスできます。

実践的な例: テーマ切り替え

次に、useContextを使用してテーマの切り替え機能を実装してみましょう。

1. テーマコンテクストの作成

import React, { createContext, useState } from 'react';

const ThemeContext = createContext();

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. テーマコンテクストの使用

import React, { useContext } from 'react';

const ThemeButton = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme} style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      Toggle Theme
    </button>
  );
};

const App = () => {
  return (
    <ThemeProvider>
      <ThemeButton />
    </ThemeProvider>
  );
};

export default App;

この例では、ThemeButtonコンポーネントがテーマの切り替え機能を持ち、ボタンをクリックすることでテーマを変更できます。