先生と生徒の会話形式で理解しよう

生徒

「Reactのコンテキストの使い方を一通り学びましたが、実際に使うときに気をつけるべき『正解』のようなものはありますか？」

先生

「はい、あります。コンテキストはとても便利ですが、適当に使うとアプリの動きが重くなったり、コードが複雑になったりします。それを防ぐための賢い使い方が『ベストプラクティス』です。」

生徒

「せっかく作るなら、プロが書くような綺麗でサクサク動くプログラムにしたいです！具体的に何を意識すればいいですか？」

先生

「大切なポイントは、情報の整理整頓と無駄を省く工夫です。初心者の方でも今日から実践できる、大切なコツを順番に解説しますね！」

1. コンテキストを入れる「共有の箱」を小さく分ける

Reactの Context API（コンテキストエーピーアイ）を使うとき、一番大切なルールは「一つの大きな箱に全部を詰め込まない」ことです。例えば、ユーザーの名前、画面の色設定、買い物かごの中身などを、全部一つのコンテキストに入れてしまうと、どれか一つが書き換わっただけで、その箱を使っているすべての部品が描き直されてしまいます。

これを防ぐためには、役割ごとにコンテキストを分割します。パソコンを触ったことがない方でも、文房具は筆箱に、着替えはタンスに、食器は食器棚に、というように分けて収納するのと同じだと考えてください。必要なものだけを取り出せるようにしておくことで、アプリ全体の動きが軽くなり、どこに何があるか見つけやすくなります。これがパフォーマンス向上の第一歩です。

2. コンテキストを使うべき場所と使わない場所を見極める

コンテキストは魔法の道具ではありません。何でもかんでもコンテキストに入れてしまうと、かえってプログラムが読みにくくなることがあります。コンテキストを使うべきなのは「アプリ全体の多くの場所で使われるデータ」だけです。例えば、ログインしている人の情報や、多言語対応の言語設定などが当てはまります。

逆に、その画面のその場所でしか使わないようなデータは、普通の「ステート（状態）」として管理するのが正解です。プログラミングの格言に「不必要な共通化は避ける」という言葉があります。まずは身近な部品の中でデータを管理してみて、どうしても遠くの部品まで届けるのが大変になったときだけ、コンテキストの使用を検討しましょう。これを「関心の分離」と呼び、部品ごとの役割をはっきりさせる重要な考え方です。

3. カスタムフックを使って呼び出しをスマートにする

コンテキストからデータを取り出すとき、通常は useContext という命令を使いますが、これを部品の中で直接書くよりも、「カスタムフック」という自分専用の道具に包んで使うのがベストです。カスタムフックは、Reactの便利な機能を組み合わせて作る、自分だけのオリジナルボタンのようなものです。

カスタムフックを作ることで、部品側では「どの倉庫からデータを持ってくるか」を意識せずに、「ユーザーの名前をください」とお願いするだけで済むようになります。また、倉庫の名前が将来変わっても、カスタムフックの中身を一箇所直すだけで済むため、メンテナンスがとても楽になります。以下のコードは、その基本的な作り方の例です。


import React, { createContext, useContext, useState } from "react";

// 1. 倉庫（コンテキスト）を作成
const AuthContext = createContext();

// 2. データを配る部品（プロバイダー）を作成
export function AuthProvider({ children }) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return (
    <AuthContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
      {children}
    </AuthContext.Provider>
  );
}

// 3. これがカスタムフック！使い勝手を良くするための道具です
export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error("AuthProviderの中で使用してください");
  }
  return context;
}

（このようにカスタムフックを作っておけば、使う側は useAuth() と書くだけで安全にデータが取り出せます。）

4. 値が変わらないときは useMemo で保護する

コンテキストに渡すデータが「物（オブジェクト）」や「配列（リスト）」の場合、Reactは「中身が変わっていなくても、新しく作り直された」と勘違いして、余計な描き直しをすることがあります。これを防ぐために useMemo（ユーズメモ）という機能を使います。

これは、計算結果をメモしておいて、材料が変わっていないときは前回の結果を使い回す仕組みです。コンテキストの `value` に渡すデータは、この useMemo で保護しておくのがプロの鉄則です。これにより、パソコンやスマホの無駄な計算を減らし、バッテリー消費まで抑えることができる、地球にも優しいプログラムになります。


import React, { useState, useMemo, createContext } from "react";

const SettingsContext = createContext();

export function SettingsProvider({ children }) {
  const [theme, setTheme] = useState("light");

  // 値が変わったときだけ、新しいオブジェクトを作成するようにメモ化します
  const value = useMemo(() => ({
    theme,
    setTheme
  }), [theme]); // themeが変わったときだけ動きます

  return (
    <SettingsContext.Provider value={value}>
      {children}
    </SettingsContext.Provider>
  );
}

（useMemoを使うことで、themeに関係ない部品が勝手に描き直されるのを防ぎ、アプリをサクサクに保ちます。）

5. デフォルト値を適切に設定してエラーを防ぐ

コンテキストを作るときに、初期値（デフォルト値）を設定することができます。もしプロバイダーで囲むのを忘れてしまった部品がデータを使おうとすると、通常はエラーが出てアプリが止まってしまいます。しかし、適切なデフォルト値を設定しておくことで、最悪の事態を防ぐことができます。

もちろん、先ほどのカスタムフックの例のようにエラーを出して開発者に知らせるのも手ですが、単純な設定値などは「未設定」という状態を持たせておくことで、スムーズに動かし続けることができます。パソコン初心者の方がソフトを使っていて、設定を何もしていないのにいきなり壊れたら困りますよね。それと同じで、最初から「標準の状態」を用意しておく優しさが、良いプログラムには必要です。

6. 複雑なデータ更新は useReducer と組み合わせる

データがただの「名前」や「数字」なら useState で十分ですが、「買い物かごの中身」のように追加・削除・個数変更など、やりたいことが多い場合は useReducer（ユーズリデューサー）という機能と組み合わせるのがベストです。

これは、データの変更ルールを「司令塔」に任せる仕組みです。コンテキストが「放送局」なら、リデューサーは「番組の構成作家」のようなものです。誰がどんな変更をお願いしても、決められたルール通りに正しくデータを更新してくれます。これを使うことで、コンテキストの中身がぐちゃぐちゃになるのを防ぎ、大人数で作る大きなアプリでも安心して開発を続けられるようになります。


import React, { createContext, useReducer } from "react";

const CartContext = createContext();

// データの変更ルールを一箇所にまとめます
function cartReducer(state, action) {
  switch (action.type) {
    case "ADD_ITEM":
      return [...state, action.item];
    case "CLEAR":
      return [];
    default:
      return state;
  }
}

export function CartProvider({ children }) {
  const [cart, dispatch] = useReducer(cartReducer, []);

  return (
    <CartContext.Provider value={{ cart, dispatch }}>
      {children}
    </CartContext.Provider>
  );
}

（複雑な動きをリデューサーに任せることで、コンテキストを介したデータのやり取りが非常に整理されます。）

7. プロバイダーのネスト（入れ子）を整理する

アプリが大きくなると、たくさんのコンテキストが必要になります。すると、アプリの一番外側が「プロバイダー」という囲みだらけになり、コードが読みづらくなってしまいます。これを「ラッパー地獄」と呼んだりします。

これを解決するために、複数のプロバイダーを一つにまとめた「統合プロバイダー部品」を作るのがベストプラクティスです。パソコンの配線がスパゲッティのように絡まっているのを、電源タップで綺麗にまとめるような作業です。見た目がスッキリするだけでなく、どこで何のデータが配られているのかが一目で分かるようになり、新しい仲間がチームに加わったときも説明しやすくなります。


import React from "react";
import { AuthProvider } from "./AuthProvider";
import { ThemeProvider } from "./ThemeProvider";
import { CartProvider } from "./CartProvider";

// すべての倉庫を一つの「大きな倉庫セット」にまとめます
export function AppProvider({ children }) {
  return (
    <AuthProvider>
      <ThemeProvider>
        <CartProvider>
          {children}
        </CartProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}

（メインのプログラム（App.jsなど）では、この AppProvider で一回包むだけで済むようになり、見た目が美しくなります。）

8. displayNameを設定してデバッグしやすくする

プログラミングをしていると、必ず「思った通りに動かない」場面が出てきます。そのとき、React DevTools という調査ツールを使って中身を覗くのですが、コンテキストに名前をつけていないと、どれがどの倉庫なのか見分けがつきません。

作成したコンテキストに `.displayName` というプロパティを使って名前をつけておきましょう。これは、倉庫の入り口に大きな看板を立てるようなものです。「これはユーザー情報の倉庫ですよ！」と看板があれば、不具合が起きたときもすぐに調査に入ることができます。小さな手間ですが、将来の自分を助けるための、とても思いやりのあるベストプラクティスです。

9. コンテキストを使いこなすための心の持ちよう

最後に、技術的なこと以上に大切なことがあります。それは「コンテキストを万能薬だと思わないこと」です。Reactの基本は、あくまで「親から子へ」とデータを渡すことです。コンテキストは、どうしてもそれが難しくなったときに使う「秘密のトンネル」のようなものだと考えてください。

トンネルだらけの街はどこを歩いているか分からなくなるように、コンテキストだらけのアプリも迷子になりやすいです。適切な量、適切な場所で、今回ご紹介したルールを守って使えば、これほど強力な味方はありません。まずはシンプルなデータから始めて、徐々に大きな情報の管理に挑戦してみてください。一つずつ丁寧に取り組めば、必ず使いこなせるようになります。頑張りましょう！