ReactJS - useContextの使用：入門ガイド
こんにちは、React開発者の卵さんたち！今日は、Reactの最も強力な機能之一的useContextフックについて深く掘り下げます。あなたの近所の親切なコンピュータ教師として、この概念をステップバイステップでガイドします。プログラミングが新しい方でも心配しないでください - 基礎から始めて、少しずつ進んでいきます！
ReactでのContextとは？
useContextに飛び込む前に、まずReactでのContextとは何かを理解しましょう。大きな家族の夕食を組織しているとします。特別なソースをテーブルの周りに回す必要があります。それを一人ずつ回す（Reactでのprop drillingのようなもの）よりも、テーブルの中心に置いて誰もが届く場所にする方が簡単ではありませんか？ReactでのContextはまさにそれをやっています。データをコンポーネントツリーを通じて手動でプロップを渡すことなく伝える方法を提供します。
useContextの理解
さて、useContextは、関数コンポーネント内でこのContextを簡単に消費できるようにするフックです。テーブルのそれぞれの人に、特別なソースに直接アクセスする方法を与えるようなものです。
useContextのシグネチャ
まず、useContextの使い方を見てみましょう：
const value = useContext(MyContext)それぞれの部分の意味は以下の通りです：
-
value：現在のコンテキスト値 -
MyContext：コンテキストオブジェクト（React.createContextで作成）
簡単ですね！さらに具体的な例で詳しく見ていきましょう。
フックを通したContextの使用
簡単なテーマスイッチャーをアプリに作成してみましょう。コンテキストを使って現在のテーマを保存し、useContextを使ってコンポーネント内でアクセスします。
まず、コンテキストを作成しましょう：
// ThemeContext.js
import React from 'react';
const ThemeContext = React.createContext('light');
export default ThemeContext;次に、このコンテキストを使うコンポーネントを作成します：
// ThemedButton.js
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';
function ThemedButton() {
const theme = useContext(ThemeContext);
return (
<button style={{ background: theme === 'light' ? '#fff' : '#000',
color: theme === 'light' ? '#000' : '#fff' }}>
I'm a {theme} themed button!
</button>
);
}
export default ThemedButton;この例では、useContext(ThemeContext)を使って現在のテーマ値を取得し、ボタンのスタイルにその値を使います。
次に、アプリ内でこのコンテキストを提供する方法を見てみましょう：
// App.js
import React from 'react';
import ThemeContext from './ThemeContext';
import ThemedButton from './ThemedButton';
function App() {
return (
<ThemeContext.Provider value="dark">
<div>
<h1>Welcome to our themed app!</h1>
<ThemedButton />
</div>
</ThemeContext.Provider>
);
}
export default App;ここでは、アプリをThemeContext.Providerでラップし、値を"dark"に設定しています。これにより、このプロバイダー内のすべてのコンポーネントはuseContextを使ってテーマ値にアクセスできます。
Contextの更新
では、ユーザーがテーマを切り替えられるようにするにはどうしたらいいでしょうか？コンテキストの値を更新することでこれができます。Appコンポーネントを修正してみましょう：
// App.js
import React, { useState } from 'react';
import ThemeContext from './ThemeContext';
import ThemedButton from './ThemedButton';
function App() {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
};
return (
<ThemeContext.Provider value={theme}>
<div>
<h1>Welcome to our themed app!</h1>
<ThemedButton />
<button onClick={toggleTheme}>Toggle Theme</button>
</div>
</ThemeContext.Provider>
);
}
export default App;今では、状態を使ってテーマを管理し、ボタンをクリックすることで切り替えられるようにしています。テーマが変わると、useContext(ThemeContext)を使っているすべてのコンポーネントは自動的に新しい値で再レンダリングされます。
結論
そしてここまで！ReactでのuseContextの基本をカバーしました。主なポイントをまとめます：
- Contextは、プロップを drills することなくデータをコンポーネントツリーを通じて伝える方法を提供します。
-
useContextは、関数コンポーネント内でContextを簡単に消費するためのフックです。 -
useContextを使うためには、まずReact.createContextでコンテキストを作成する必要があります。 - コンテキストの値を更新するには、プロバイダー组件の
valueプロップを変更します。
Contextは強力ですが、常に最適な解決策ではありません。シンプルなプロップが一二階だけ渡される場合には、通常のプロップ渡しがより明確です。Contextは家族の夕食での特別なソースのように、広範に共有する必要がある場合に使ってください。でも、使い過ぎないように注意してください！
このガイドがuseContextを理解する手助けとなれば幸いです。引き続き練習を続け、React Contextのプロになろう！ハッピーコーディング！
Credits: Image by storyset