useContext

useContext を分かりやすく

想像してみてください。あなたが喧騒の中にいるバーテンダーで、全ての客にオーダーを聞きに行く代わりに、各テーブルにインターコムを設置し、客が自分でオーダーを伝えられるようにしました。useContextはこのインターコムのようなものです。それはReactのコンポーネントツリー全体で情報を共有する手段を提供します。

コンポーネント間でのプロップの受け渡しを最小限に抑えつつ、グローバルに利用できる値を提供する手法がuseContextです。それにより、コードの冗長性を排除し、よりクリーンでメンテナブルなコードを書くことが可能になります。

useContext の歴史的変遷

React の Hooks は 2018 年の React 16.8 バージョンで導入され、それ以降、useContext も広く使われるようになりました。それまで、React の Context API は存在していましたが、利用するためにはクラスコンポーネントを用いる必要があり、コードが複雑になりがちでした。

しかし、useContext の導入により、Context API を関数コンポーネントでも利用できるようになり、コードの見通しが良くなりました。

useContext と Jamstack の関係

Jamstack は JavaScript、API、Markup の略で、Web 開発の新しいパラダイムを表しています。この中の JavaScript 部分が、React などのフロントエンドフレームワークに相当します。

useContext は、Next.js のような React ベースのフレームワークを使用する Jamstack アプリケーションで、グローバルな状態を管理するための優れた手段となります。

useContext を使うメリット

状態の共有

大規模なアプリケーションでは、状態を多くのコンポーネント間で共有する必要があります。useContext を使用すると、これが容易になります。

コードのシンプリシティ

コードの中で多くのプロップをドリルダウンするのではなく、必要なコンポーネント

で直接アクセスできます。

リファクタリングの容易さ

必要な場所でのみデータにアクセスできるため、コードベースのリファクタリングが容易になります。

useContext を実装

では、useContext を使った具体的な実装を見ていきましょう。ここでは、アプリケーションのテーマ（light または dark）を管理する状態を作成します。

import { createContext, useState, useContext } from 'react'

type Theme = 'light' | 'dark'
type ThemeContextType = {
  theme: Theme
  toggleTheme: () => void
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined)

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

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

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

const useTheme = () => {
  const context = useContext(ThemeContext)
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider')
  }
  return context
}

export { ThemeProvider, useTheme }

以上のコードは、アプリケーション全体でアクセス可能なテーマ情報とその切り替え機能を提供します。ThemeProvider をルートコンポーネントにラップすることで、アプリケーションのどこからでも useTheme フックを通じてテーマ情報にアクセスできます。

useContext を学ぶ