【入門】useContextを5分で理解する - らくらくエンジニア

はじめに

useContextの基本を簡潔にまとめる😊

この記事で伝えたいこと

useContextって何？
コンテキストって何？
どんなときに便利？
使い方は？

💡

useContextが何者なのかイメージできることを優先し、基本的な内容に絞って解説する！

useContextとは

✅コンテキストを作成するフック。

コンテキストって何？

✅めちゃくちゃ噛み砕いて言うとグローバル変数みたいなやつ💭

コンテキストは「アプリケーション全体」や「特定のコンポーネントツリー内」でデータを共有する仕組み。
複数のコンポーネントで同じコンテキストを使っておけば、一斉に状態の切り替えができる。

コンテキストがないと…

✅色々なコンポーネントで使うデータを毎回propsで受け渡しするのが面倒くさい💦

propsを子孫のコンポーネントに値を渡すのが面倒（propsを親→子→孫とバケツリレーが必要）💦
特にアプリケーション全体で共有したいデータは、色々なコンポーネントにpropsを渡しまくることになる💦

コンテキストを使うと…

✅色々なコンポーネントで使うデータをpropsなしで受け渡しできる😊

propsを親→孫に直接データを渡せる😊
アプリケーション全体で共有するのも簡単😊

【補足】コンテキストとグローバル変数の違い

コンテキストは状態を持つ

コンテキストの値が変更されると、そのコンテキストを使用しているコンポーネントが更新される。

（グローバル変数は変更しても更新されない。）

コンテキストは特定のコンポーネントツリー内だけでデータ共有することができる

特定のコンポーネントツリー（親→子→孫→…）の中でだけデータを共有できる。

（グローバル変数はアプリケーション全体で共有することなりにカプセル化が微妙）

どんなときに便利？

テーマ設定（ライトテーマとダークテーマの切り替えなど）
言語設定
ユーザー認証に関するデータ（ログイン状態、ログイン関数、ログアウト関数など）

使い方

コンテキストの作成

createContext(デフォルト値)でコンテキストを作成する。
- デフォルト値の指定は必須。

例

SampleContext.js

import React from 'react';

// ✅コンテキストを作成
const SampleContext = React.createContext("これはコンテキストです");

export default SampleContext;

💡

これだけではまだ何も起きない！

コンテキストの呼び出し

作成したコンテキストを使いたいときはuseContext(作成したコンテキスト);で呼び出せる。

例

App.jsx（Hogeコンポーネントを呼び出しているだけ）

※このファイルは特に意味がないので無視してOK。

※後で説明する「デフォルト値以外を使う」と見比べて分かりやすいように書いている。

import React from 'react';
import Hoge from './Hoge';

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

Hoge.jsx

import React, { useContext } from 'react';
import SampleContext from './SampleContext';

const Hoge = () => {
	// ✅コンテキストを呼び出す
	const contextValue = useContext(SampleContext);

	return <div>{contextValue}</div>;
};

export default Hoge;

実行結果

作成時に設定したデフォルト値"これはコンテキストです"が取得できる。

<div>これはコンテキストです</div>;

💡

これでアプリケーション全体でデータを共有できる！

コンテキストの呼び出し（デフォルト値以外を使う）

先ほどの例ではuseContext(SampleContext);でデフォルト値"これはコンテキストです”が取得できた。
Providerを使うとコンテキストを任意の値に上書きできる。
- 例："これはコンテキストです” → "これは上書きされたコンテキストです" に上書きする。

例

App.jsx

import React from 'react';
import SampleContext from './SampleContext';
import Hoge from './Hoge';

const App = () => {
  return (
		{/* ✅Providerを使って上書き！ */}
    <SampleContext.Provider value="これは上書きされたコンテキストです">
      <Hoge />
    </SampleContext.Provider>
  );
};

Hoge.jsx（さっきと同じ）

import React, { useContext } from 'react';
import SampleContext from './SampleContext';

const Hoge = () => {
	const contextValue = useContext(SampleContext);

	return <div>{contextValue}</div>;
};

export default Hoge;

実行結果

Providerで設定した値"これは上書きされたコンテキストです"が取得できる。

<div>これは上書きされたコンテキストです</div>;

解説

{/* ✅Providerを使って上書き！ */}
<SampleContext.Provider value="これは上書きされたコンテキストです">
  <Hoge />
</SampleContext.Provider>

最初の例との違いは<Hoge>の外にProviderがあるかどうか。

Providerでラップすることで、SampleContextの値が上書きできる✨

💡

これでProviderコンポーネントツリー内で同じデータを共有できる！

Providerがないとき（最初の例）
- <Hoge>でコンテキストSampleContextを呼び出す。
  →デフォルト値"これはコンテキストです”が取得できる。
Providerがあるとき（今回の例）
- <Hoge>でコンテキストSampleContextを呼び出す。
  →Providerで上書きした"これは上書きされたコンテキストです"が取得できる。