はじめに
こんにちは！useContextって聞いたことありますか？useContextは、Reactで状態をコンポーネント間で簡単に共有できる便利なフックの一つです。propsを使わずにデータをやり取りできるため、アプリケーションを構築する際にとても役立ちます。
今回は、useContextの基本的な使い方をわかりやすく解説しますので、初心者でもすぐに使いこなせるようになるはずです！
useContextとは？
Reactで状態を管理する方法にはいくつかのアプローチがありますが、useContextはコンポーネント間で状態を簡単に共有するための手段です。
例えば、ユーザーの認証情報やテーマの設定など、複数のコンポーネントで同じデータを使いたい場合に非常に便利です。useContextを使うと、propsをいちいち渡す必要がなくなります。
useContextの基本的な使い方
useContextを使うためには、まずContextを作成し、データをそのContextを通じて渡します。その後、受け取りたいコンポーネントでuseContextフックを使ってデータを取得します。
1. Contextの作成
最初に、createContextを使ってContextを作成します。このContextには、後で渡すデータを格納します。
const MyContext = React.createContext();
2. Providerでデータを提供
作成したMyContext.Providerを使って、Contextにデータを提供します。Providerのvalue属性に渡したいデータを指定します。
<MyContext.Provider value="Hello, World!">
<MyComponent />
</MyContext.Provider>ここで、MyComponentは、valueに渡されたデータを受け取ることができます。
3. useContextでデータを受け取る
useContextを使うことで、Contextに渡されたデータを受け取ることができます。
const message = useContext(MyContext);
console.log(message); // "Hello, World!"これで、MyComponentはvalueとして渡された「Hello, World!」を表示できるようになります。
実際に使ってみよう！
では、もう少し実際的な例でuseContextの使い方を見てみましょう。次の例では、テーマ（darkまたはlight）をコンポーネント間で共有する方法を説明します。
import React, { createContext, useContext } from 'react';
// 1. Contextの作成
const ThemeContext = createContext();
// 2. Providerでテーマ情報を渡す
const ThemeProvider = ({ children }) => {
const theme = 'dark'; // 現在のテーマを設定
return (
<ThemeContext.Provider value={theme}>
{children}
</ThemeContext.Provider>
);
};
// 3. useContextでテーマ情報を受け取る
const ThemedComponent = () => {
const theme = useContext(ThemeContext); // Contextからテーマを取得
return <h1>現在のテーマは {theme} です。</h1>;
};
// 4. アプリケーション全体でThemeProviderを使う
const App = () => {
return (
<ThemeProvider>
<ThemedComponent />
</ThemeProvider>
);
};
export default App;
実行結果
このコードを実行すると、ThemedComponentが"現在のテーマは dark です"と表示します。ThemeProviderによって、ThemeContextにテーマ情報（ここではdark）が渡され、それをuseContextを使ってThemedComponent内で取得しているのです。
useContextを使う理由
Reactのコンポーネントで状態を管理する方法は、useStateやuseReducerを使って局所的に管理する方法がありますが、状態が複数のコンポーネントで共有される場合、useContextが非常に便利です。propsをいちいち渡す手間が省けるため、コンポーネントツリーが深くなった場合にもコードがスッキリします。
useContextを使うシーン
- テーマの切り替え: ダークモードやライトモードなど、アプリケーション全体でテーマを変更したい場合に使います。
- ユーザー認証情報: アプリ全体でユーザーのログイン状態や情報を共有する場合に便利です。
- 言語設定: ユーザーが選択した言語に基づいてアプリケーション内のテキストを切り替える場合に利用できます。
まとめ
useContextは、Reactで状態を簡単にコンポーネント間で共有できる非常に便利なフックです。Providerを使ってデータを渡し、useContextで受け取ることで、複雑なpropsの受け渡しを避け、シンプルにデータを共有することができます。
このフックを使うことで、アプリケーションの状態管理がより簡単で効率的になります。Reactで状態管理を行う際には、useContextを覚えておくと大変役立つので、ぜひ実践してみてください！
さらに詳しく学ぶには、Reactの公式ドキュメントをチェックしてみてくださいね。
React公式ドキュメント: useContext
