ReactJS - コンテキスト：初心者向けガイド

こんにちは、将来の開発者さんたち！今日は、ReactJSのコンテキストの素晴らしい世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、私がこの概念を初めて学んだ時と同じような熱意であなた們を案内します。あなたの好きな飲み物を手に取り、リラックスして、一緒にこのエキサイティングな旅に出発しましょう！

ReactJS - Context

Reactでのコンテキストとは？

想像してみてください、あなたが家族聚会にいて、みんなに面白い話を共有したい時、それぞれに囁く必要がある代わりに、一度だけアナウンスして、みんなが聞ける就好了ですね。それがReactでコンテキストがやることです！

コンテキストは、コンポーネントツリーを通じてデータを渡す方法を提供し、各レベルでプロップを渡す必要がありません。これは、Reactコンポーネントのツリー全体で「グローバル」と考えられるデータを共有するために設計されています。

コンテキストの使用时机

深く掘り下げる前に、コンテキストを使用するタイミングを理解しましょう：

複数のコンポーネントが異なるネストレベルでアクセスする必要があるデータがある場合。
プロップの「ドリルダウン」（中間のコンポーネントにデータを渡すこと）を避けたい場合。

コンテキストの作成と使用

コード例を使用して、コンテキストの作成と使用の手順を見ていきましょう。

ステップ1：コンテキストの作成

まず、コンテキストを作成する必要があります。React.createContext()メソッドを使用します。

import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

この例では、デフォルト値が'light'のThemeContextを作成しました。このデフォルト値は、コンポーネントがツリーの上に一致するプロバイダーがない場合に使用されます。

ステップ2：コンテキストの提供

コンテキストができたら、コンポーネントツリーにそれを提供する必要があります。Context.Providerコンポーネントを使用してこれを行います。

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

function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}

function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}

この例では、Toolbarコンポーネント（そしてその子コンポーネント）をThemeContext.Providerでラップしています。値を「dark」に設定し、このプロバイダー内のすべてのコンポーネントに利用可能にします。

ステップ3：コンテキストの消費

ここからが楽しい部分です - コンテキストを使用すること！コンテキストを消費する方法は2つあります：

Class.contextType
Context.Consumer

それぞれを見ていきましょう：

Class.contextTypeの使用

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

class ThemedButton extends React.Component {
static contextType = ThemeContext;
render() {
return <button theme={this.context}>I'm a themed button!</button>;
}
}

この例では、ThemedButtonはクラスコンポーネントです。私たちはそのcontextTypeをThemeContextに設定しました。今、this.contextは現在のコンテキスト値にアクセスできるようになります。

Context.Consumerの使用

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

function ThemedButton() {
return (
<ThemeContext.Consumer>
{value => <button theme={value}>I'm a themed button!</button>}
</ThemeContext.Consumer>
);
}

ここでは、Context.Consumerコンポーネントを使用しています。レンダープロップを使用して、現在のコンテキスト値を関数に渡します。

複数のコンテキスト

時々、複数のコンテキストを使用する必要があります。Reactは複数のコンテキストプロバイダーをネストすることができます：

import React from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function App() {
return (
<ThemeContext.Provider value="dark">
<UserContext.Provider value="John Doe">
<Toolbar />
</UserContext.Provider>
</ThemeContext.Provider>
);
}

複数のコンテキストを消費する方法は以下の通りです：

import React from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function ThemedButton() {
return (
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<button theme={theme}>
{user} is using {theme} theme
</button>
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
}

コンテキストの更新

コンテキストも動的です。テーマを更新する例を見てみましょう：

import React, { useState } from 'react';
import ThemeContext from './ThemeContext';

function App() {
const [theme, setTheme] = useState('light');

return (
<ThemeContext.Provider value={{ theme, setTheme }}>
<Toolbar />
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Toggle Theme
</button>
</ThemeContext.Provider>
);
}

この例では、useStateフックを使用してテーマの状態を管理しています。現在のテーマとsetTheme関数をコンテキスト値として渡しています。

コンテキストメソッド

以下に、今までカバーした主要なコンテキストメソッドの表を示します：

メソッド	説明
React.createContext()	コンテキストオブジェクトを作成
Context.Provider	コンポーネントにコンテキスト値を提供
Class.contextType	クラスコンポーネントが単一のコンテキストを消費
Context.Consumer	関数コンポーネントがコンテキストに订阅

結論

そして、みんな！Reactのコンテキストの土地を旅しました。その作成から消費、そして更新まで。コンテキストは、プロップのドリルダウンを避け、グローバルな状態を効果的に管理する強力なツールです。

ただし、コンテキストは常に最適な解決策ではありません。シンプルな場合には、プロップがまだ最善の選択肢かもしれません。しかし、複数のコンポーネント間でデータを共有する必要がある場合、コンテキストはあなたの新しい親友になるかもしれません。

引き続き練習し、コードを書き続け、最も重要なのは、楽しむことです！次回まで、ハッピーReactイング！

Credits: Image by storyset