React Context APIのデバッグ方法を完全解説！React DevToolsで中身を丸見えにする方法
生徒
「Reactのコンテキストを使ってみたのですが、今どんなデータが流れているのか確認する方法はありますか？画面に表示されないデータだと、正しく動いているか不安です。」
先生
「確かに、コンテキストは目に見えない『共有の空気』のようなものなので、中身が見えないと困りますよね。そんな時は、リアクトデブツール（React DevTools）という道具を使うのが一番です。」
生徒
「デブツール…？難しそうですが、私にも使えますか？」
先生
「大丈夫ですよ！ブラウザに専用の虫眼鏡を追加するような感覚で使えます。これを使えば、コンテキストのデータがどう変化しているか一目で分かります。さっそく準備から始めていきましょう！」
1. デバッグとは？なぜ専用の道具が必要なのか
プログラミングをしていると、思った通りに動かない「間違い」に必ず遭遇します。この間違いを見つけて直す作業を「デバッグ（debug）」と呼びます。虫（バグ）を取り除くという意味ですね。React（リアクト）の Context API（コンテキストエーピーアイ）を使っていると、「データは送っているはずなのに、受け取り側の表示が変わらない」といったトラブルがよく起きます。
しかし、コンテキスト内のデータは直接画面には映りません。パソコンの中身を透かして見るような特殊な道具がないと、原因を突き止めるのは非常に困難です。そこで、Google Chrome（グーグルクローム）などのブラウザに「React DevTools（リアクトデブツール）」という拡張機能を追加します。これは、React専用の健康診断機のようなもので、アプリの裏側で何が起きているかをリアルタイムで教えてくれます。
2. React DevToolsのインストールと準備
まずはデバッグを始めるための準備をしましょう。パソコンを初めて触る方でも、スマートフォンのアプリを入れるのと同じくらい簡単です。Chromeのウェブストアに行き、「React Developer Tools」と検索して「Chromeに追加」ボタンを押すだけです。インストールが終わると、ブラウザの右上に小さな歯車のアイコンが表示されるようになります。
準備ができたら、自分が作っているReactのサイトをブラウザで開きます。そこで「右クリック」をして「検証（けんしょう）」を選んでください。すると画面の端に英語がたくさん並んだパネルが出てきます。その中にある「Components（コンポーネンツ）」という項目が、Reactの裏側を覗くための入り口です。これを使うことで、コンテキストという共有の倉庫に、今どんなお宝（データ）が入っているかを丸見えにできます。
3. displayNameを設定して倉庫に名前をつけよう
デブツールを開くと、たくさんの部品（コンポーネント）の名前が並びます。しかし、コンテキストをそのまま使っていると「Context.Provider」という名前ばかりが並んでしまい、どれが何のデータなのか見分けがつきません。これは、中身のわからない箱が積み重なっているような状態で、非常に探しにくいです。
そこで、プログラムの中で「displayName（ディスプレイネーム）」という設定を追加します。これは、倉庫の外側に「ユーザー情報の倉庫ですよ」「色設定の倉庫ですよ」というラベルを貼る作業です。これを一行書くだけで、デブツールでの探しやすさが劇的に向上します。
import React, { createContext } from "react";
// 倉庫を作ります
const UserContext = createContext();
// 倉庫に名前をつけます（これがデブツールに表示されます）
UserContext.displayName = "UserStorage";
export default UserContext;
4. Componentsパネルでデータの変化を監視する
実際にデブツールを使って、データが動く様子を見てみましょう。Componentsパネルを開くと、左側に部品の親子関係がツリー状に並んでいます。その中から先ほど名前をつけたコンテキスト（UserStorage.Providerなど）をクリックしてみてください。
すると右側のパネルに「value（バリュー）」という項目が表示されます。ここに書かれているのが、現在コンテキストに保存されている「生のデータ」です。例えば、名前を「たろう」から「はなこ」に書き換えるボタンを押したとき、このvalueの部分がパッと書き換わるはずです。画面が変わらないのにここが書き換わっていれば、「表示する側の部品」に間違いがあると分かります。逆にここが変わらなければ、「データを送る側の処理」に間違いがあると判断できます。このように原因を切り分けるのが、デバッグの基本です。
5. 実践！デバッグ用のサンプルプログラム
実際にデブツールで覗きがいのある、データを変更するプログラムを作ってみましょう。ここでは、ユーザーの名前と年齢を管理するコンテキストを用意します。初心者の方でも、以下のコードをコピーして動かしてみれば、デブツールの凄さが実感できるはずです。
import React, { useState, createContext, useContext } from "react";
const ProfileContext = createContext();
ProfileContext.displayName = "UserProfile";
export function App() {
const [profile, setProfile] = useState({ name: "たろう", age: 20 });
return (
<ProfileContext.Provider value={{ profile, setProfile }}>
<div className="p-4">
<h1>プロフィールのデバッグ</h1>
<ProfileDisplay />
<button
className="btn btn-primary"
onClick={() => setProfile({ name: "さくら", age: 25 })}
>
データを変更
</button>
</div>
</ProfileContext.Provider>
);
}
function ProfileDisplay() {
const { profile } = useContext(ProfileContext);
return <p>{profile.name}さんは{profile.age}歳です。</p>;
}
6. Profiler（プロファイラー）で再描画をチェック
デブツールにはもう一つ「Profiler（プロファイラー）」という強力なタブがあります。これはアプリの「動きの激しさ」を記録するビデオカメラのようなものです。コンテキストを使うと、一箇所の変更で関係ない部品まで描き直されてしまうことがありますが、これを突き止めるのに役立ちます。
プロファイラーで録画ボタンを押してからアプリを操作し、停止ボタンを押すと、どの部品が何回描き直されたかがグラフで表示されます。青色や緑色で表示される部品は「描き直しが起きた場所」です。もし、何も変えていないはずの部品が光っていたら、それは「無駄な再描画」が発生している証拠です。これを見つけることで、アプリをサクサク動かすためのヒントが得られます。
7. コンソール（Console）を併用した原始的なデバッグ
デブツールも便利ですが、最も古くから愛されている方法も紹介します。それは「console.log（コンソールログ）」という命令です。これは、プログラムの途中で「今、データはこうなっているよ！」とパソコンに叫ばせるようなものです。
コンテキストからデータを受け取った直後にこの命令を書くと、ブラウザの「コンソール」という画面にその内容が表示されます。デブツールが「レントゲン写真」なら、コンソールログは「メモ書き」のようなものです。どちらが良いというわけではなく、両方を使い分けるのがプロの技です。まずは簡単な方から試してみましょう。
function ProfileDisplay() {
const { profile } = useContext(ProfileContext);
// データの確認用に出力します
console.log("現在のプロフィールデータ:", profile);
return <p>{profile.name}さん、こんにちは！</p>;
}
8. エラー表示を読み解く力
デバッグで一番大切なのは、画面が真っ赤になってエラーが出たときに、焦らないことです。エラーメッセージには「どのファイルの何行目が間違っているか」が必ず書いてあります。例えば「Cannot read property of undefined」と出たら、それは「空っぽの箱を開けようとしましたよ」という意味です。
コンテキストでよくあるのは、Provider（提供者）で囲み忘れている部品が、データを使おうとしてエラーになるパターンです。デブツールを使えば、その部品がちゃんとプロバイダーの家の中に住んでいるかどうかも一目で確認できます。間違いを怖がる必要はありません。エラーはパソコンからの「ここを直せば動くよ」というヒントなのです。一つずつデブツールで確認していけば、必ず解決の糸口が見つかります。
9. デバッグの習慣が上達への近道
プログラミングの学習を始めたばかりの方は、コードを書く時間と同じくらい、デブツールを眺める時間を作ってみてください。データがどう流れ、どう消えていくのかを観察することで、Reactの仕組みが体感として分かってきます。パソコンに慣れていない方でも、「中身を確認しながら進める」という習慣をつければ、大きな失敗を防ぐことができます。
コンテキストはとても便利な機能ですが、目に見えない分、迷子になりやすいものです。今回紹介した React DevTools という強力な地図を手に入れて、自信を持って開発を進めていきましょう。まずは自分の作ったアプリに名前をつけて、デブツールでクリックしてみることから始めてみてくださいね！
