Reactの基本、useContextを理解しよう

はじめに

Reactは、ユーザーインターフェースを構成するためのJavaScriptライブラリです。近年では、ウェブアプリケーションやモバイルアプリケーションのインターフェースを作成するために、多くの開発現場で使用されています。Reactを学ぶことで、モダンなウェブ開発のスキルを身につけることができるため、フロントエンドエンジニアを目指す上で必須のスキルと言っても過言ではありません。

Reactを学んでいる方の中で、React Hooksについて理解が進まない、どの場面で使うのかよく分からない、と感じる方もいるのではないでしょうか？そんな方に向けてReact Hooksを紹介するシリーズをお届けします。今回は、コンポーネント間でデータを共有するのに役立つuseContextについて解説します。この記事を読むことで、useContextの基本知識と使い方、その背後にあるContextの仕組みを学ぶことができます。基本を押さえることで、Reactの理解が深まり、ステップアップにつながります。基本を一緒に学び、フロントエンドエンジニアへの第一歩を踏み出しましょう！

この記事について

目的

• useContextについて知る
• Contextを理解する
• useContextを使えるようにする

対象者

• 初学者の方
• Reactの学習をしている方

Reactの基本について

Reactの基本の説明はこの記事では省略しています。基本や環境構築方法などを知りたい方は、下記のページをご覧ください。

https://envader.plus/article/341

React Hooksシリーズ

以下はReact Hooksシリーズの記事一覧です。この記事とあわせて読むことで、より理解が深まりますのでぜひご覧ください。

• Reactの基本、useStateを理解しよう

  https://envader.plus/article/443

• Reactの基本、useEffectを理解しよう

  https://envader.plus/article/444

useContextについて

useContextはReact Hooksの1つで、コンポーネント間でContextを共有するための仕組みです。コンポーネントツリー全体、または特定のコンポーネントが必要な値をContextから直接取得することができます。また、その値に変更があった場合、useContextを使用しているコンポーネントは自動的に更新された値を取得します。

通常、コンポーネント間で値を共有するにはpropsを使用し、親コンポーネントから子コンポーネントへ値を渡します。子コンポーネントよりさらに下の階層のコンポーネントに値を渡す場合、propsを使って一つずつ順に値を渡す必要があります。この手法は「propsのバケツリレー」や「props drilling（propsの穴掘り）」と呼ばれています。親コンポーネントから値を必要とするコンポーネントまで、順番にpropsを使って値を渡すことが必要です。propsを使用して値を受け渡す方法は便利ですが、この順番に行う「props drilling」は煩雑になり、コードの見通しが悪くなることがあります。

一方で、useContextを使用すれば、propsを介さずに、必要なコンポーネントが直接Contextから値を取得することができます。

Contextとは

ここでContextについて理解しておきましょう。一般的に、Contextとはある事象がどのような背景や状況、前後関係で起こっているかを指します。例えば、文脈の中で特定の単語の意味が、前後の文章内容や状況によって異なることがあります。IT分野におけるContextも同様に、特定の状況や状態に関連する情報を指します。ユーザーの使用環境や設定された条件など、システムやアプリケーションの動作を決定する基準となる情報がContextと呼ばれます。

アプリケーションにおけるContextの使用例としては、以下のようなものがあります。

• 操作条件の情報

  アプリケーション内である関数が、どのような条件下で実行されるかを知る必要がある場合です。例えば、if文などの条件分岐を用いて、その状況に応じた処理を行う際の判断基準となる情報がContextとなります。

• 状態の保持

  アプリケーションにユーザーがログインしているか、どのユーザーが操作を行っているかなどの情報をContextとして管理します。ユーザーがログインしている場合は、特定のページを表示したり、チャットの投稿で誰がメッセージを送ったかを判断するためにContextの情報が使用されます。

• グローバルな設定

  アプリケーション全体で共有されるテーマや言語設定、認証情報などもContextに含まれます。例えば、アプリケーションのダークモード設定や、選択された言語の設定などがこれに該当します。

このように、アプリケーションの特定の時点で「どのような状況か」という状態を管理する情報の集まりがContextであり、その情報をもとにプログラムは状況に応じた動作を実行します。

ReactにおけるContext

次に、ReactにおけるContextについて学びましょう。ReactでのContextは、一般的なプログラミングでのContextと同様に「操作の条件や状態」を管理するための情報を指します。Reactでは、このContextをさらに応用して、複数のコンポーネント間で共通して使われる情報を共有・管理するために利用されます。

例えば、アプリケーション全体のテーマや色のデザイン、使用する言語設定、ユーザーがログインしているかどうかなどの情報があります。これらの情報は、アプリケーション内のさまざまなコンポーネントで必要とされるため、Contextを使うことでコンポーネントが直接その情報を取得できるようにします。

useContextの使い方

ここまででuseContextやContextについて学びました。次にuseContextの使い方について確認しましょう。まずは、全体のコード例を確認し、その後に1つずつ説明します。以下は、useContextを使用したコンポーネントの全体のコード例です。

// App.jsx

// createContextをインポート
import { createContext } from 'react';
import SecondComponent from "./SecondComponent";

// 新規コンテキストの作成
const NewContext = createContext(初期値);

export default function App() {
  return (
    <NewContext.Provider value={value}>
	    <SecondComponent />
    </NewContext.Provider>
  );
}

全体のコードから1つずつ確認していきましょう。

• Contextの作成

  コンポーネントのトップレベルでcreateContextをインポートし、新しいContextを作成します。コード例のNewContext部分は任意の名前で作成できます。exportを付けることで、他のコンポーネントでも作成したContextを使用できるようになります。

// App.jsx

// createContextをインポート
import { createContext } from 'react';

// 新規コンテキストの作成　exportを付加する
export const NewContext = createContext(初期値);

• Contextの値を渡す

  データを渡したいコンポーネントをUserCount.Providerタグで囲います。こうすることで、Appコンポーネントから他のコンポーネントへデータ（value）を渡すことができます。

// App.jsx

<NewContext.Provider value={value}>
  <SecondComponent />
</NewContext.Provider>

• Contextを受け取る

  Providerで提供された値を別のコンポーネントで受け取るには、以下のように記述します。const value = useContext(NewContext)を定義し、作成したNewContextから値を受け取ります。

// SecondComponent.jsx

// useContextをインポート
import { useContext } from "react";
// NewContextをインポートし値を取得する
import { NewContext } from "./App";

export default function SecondComponent() {
  const value = useContext(NewContext);

  return <p>{value}</p>;
}

このように、Contextを作成し、その値を提供し、受け取る形でuseContextを使用します。基本の記述方法を押さえることで、さまざまな形でContextを活用することができます。

useContextを使用してみよう

useContextの基本的な使用方法を学びました。このセクションでは、ハンズオン形式で実際にコードを試し、さらに理解を深めましょう。このハンズオンでは、useContextとuseStateを使用して以下のカウントアップアプリを作成します。

ハンズオンを手軽に試したい方には、以下のサイトがおすすめです。Reactの環境構築が不要で、ブラウザ上でコードをすぐに試すことができます。

• StackBlitz

  https://stackblitz.com/

• StackBlitzについては、以下のサイトで詳しく解説しています。

  https://envader.plus/article/434

このハンズオンでは、次のファイルを作成して編集します。

• App.jsx
• Context.jsx
• Component_1.jsx
• Component_2.jsx

ハンズオンで作成するコンポーネントの階層構造は以下の通りです。ContextコンポーネントからuseContextを使用して値を取得します。

useContextを使用したカウントアップアプリの作成

Context.jsxは以下のように編集します。開発現場では、一般的にContextを提供するファイルを独立させ、他のコンポーネントがContextファイルから値を取得する形にして汎用性を高めます。

// Context.jsx

import { useState, createContext } from 'react';

// Contextの作成
export const CountContext = createContext();

// Providerコンポーネントの作成
export function Context({ children }) {
  const [count, setCount] = useState(0);
  const value = { count, setCount };
  return (
    <>
      <CountContext.Provider value={value}>{children}</CountContext.Provider>
    </>
  );
}

次に、App.jsxファイルを以下のように編集します。AppコンポーネントはComponent_1コンポーネントを内包しています。

// App.jsx

import { Context } from './Context';
import Component_1 from './Component_1';
import './App.css';

export default function App() {
  return (
    <>
      <h2>App</h2>
      <Context>
        <Component_1 />
      </Context>
    </>
  );
}

Component_1.jsxファイルを以下のように編集します。Component_1コンポーネントはComponent_2コンポーネントを内包しており、カウントアップするボタンを配置しています。

// Component_1.jsx

import { useContext } from 'react';
import { CountContext } from './Context';
import Component_2 from './Component_2';

export default function Component_1() {
  const { count, setCount } = useContext(CountContext);

  return (
    <>
      <div>
        <h2>Component_1</h2>
        <button onClick={() => setCount(count + 1)}>+1</button>
      </div>
      <Component_2 />
    </>
  );
}

Component_2.jsxファイルを以下のように編集します。Component_2はカウントアップボタンを配置し、Component_1とComponent_2のカウントアップボタンの結果を表示します。

// Component_2.jsx

import { useContext } from 'react';
import { CountContext } from './Context';

export default function Component_2() {
  const { count, setCount } = useContext(CountContext);

  return (
    <>
      <div>
        <h2>Component_2</h2>
        <button onClick={() => setCount(count + 1)}>+1</button>
      </div>
      <h2>{count}</h2>
    </>
  );
}

コードの解説

Context.jsxで作成されたCountContextは、Contextコンポーネント（CountContext.Provider）を通じて、その子コンポーネントに値（countとsetCount）を提供しています。

Component_1とComponent_2コンポーネントでは、useContextフックを使用して、このCountContextからcountとsetCountの値を取得しています。

結果の確認

Component_1、Component_2のボタンをそれぞれ押して、カウント数が増えることを確認してみてください。

このように、特定のコンポーネントからuseContextを使用して値を取得する方法を体験していただけたと思います。今回紹介した方法をぜひご自身でも試して、より理解を深めていきましょう。

この記事で学んだこと

ここまでuseContextについて、その基本と実際の使い方を学びました。簡単に振り返ってみましょう。

• useContextについて

useContextはReact Hooksの1つで、コンポーネント間でContextを共有するための仕組みです。通常、親コンポーネントから子コンポーネントへ値を渡す場合、propsを使って順に渡す必要がありますが、useContextを使用することで、コンポーネントツリー内の任意のコンポーネントがContextから直接値を取得できます。

• ReactにおけるContext

ReactにおけるContextは、「操作の条件や状態」を管理するための情報を指します。これを利用して、複数のコンポーネント間で共通の情報を効率的に共有・管理することができます。

参考資料

以下のリンクは、この記事で説明した手順や概念に関連する参考資料です。より詳しく学びたい方は、ぜひご参照ください。

• React公式 - useContext

  https://ja.react.dev/reference/react/useContext

  https://ja.react.dev/learn/passing-data-deeply-with-context

• IT用語辞典 e-Words - コンテキスト（コンテクスト）とは

  https://e-words.jp/w/コンテキスト.html