今回は、Reactを使っている時に便利な「Context API」について解説します。状態管理とは、アプリケーションのデータを効率よく管理する方法のことです。特に、たくさんのコンポーネントがあるときに役立ちます。それでは、Context APIの基本を見ていきましょう。

Context APIとは？

Context APIは、Reactの機能の一つで、コンポーネント間でデータを簡単に共有するためのものです。通常、データは親から子へと渡しますが、Context APIを使うと、どのコンポーネントからでもデータにアクセスできるようになります。

Context APIの使い方

1. Contextの作成

まず最初に、Contextを作成します。これは、データを共有するための箱のようなものです。次のようにして作成できます。

import React, { createContext } from 'react';

const MyContext = createContext();

2. Providerの設定

次に、作成したContextを使って「Provider」を設定します。Providerは、データを子コンポーネントに渡す役割を持っています。

const MyProvider = ({ children }) => {
  const value = "こんにちは、Context API！";
  
  return (
    
      {children}
    
  );
};

3. Consumerでデータを取得

最後に、子コンポーネントでデータをどうやって取得するかを見てみましょう。これには「Consumer」を使います。

const MyComponent = () => {
  return (
    
      {value => 
{value}
}
    
  );
};

サンプルコード

ここまでの内容をまとめた簡単なサンプルコードを見てみましょう。

import React from 'react';
import ReactDOM from 'react-dom';

const MyContext = createContext();

const MyProvider = ({ children }) => {
  const value = "こんにちは、Context API！";
  
  return (
    
      {children}
    
  );
};

const MyComponent = () => {
  return (
    
      {value => 
{value}
}
    
  );
};

const App = () => (
  
    
  
);

ReactDOM.render(, document.getElementById('root'));

まとめ

今回の記事では、Context APIの基本についてお話ししました。Contextを使うと、複数のコンポーネント間でデータをスムーズに共有できるようになりますね。初めは難しく感じるかもしれませんが、慣れればとても便利です。