React 18 従来のコンテキスト移行

従来のコンテキスト (contextTypes、childContextTypes、getChildContext) は React 16.3 で非推奨となり、React 18.3.1 では警告が表示されます。React 19 では削除されます。

これは常にファイル横断的な移行です

ほとんどの他の移行は一度に 1 つのファイルに対応しますが、コンテキスト移行には以下の調整が必要です:

1. コンテキストオブジェクトを作成する（通常は新しいファイル）
2. プロバイダーコンポーネントを更新する
3. すべてのコンシューマーコンポーネントを更新する

いずれかのコンシューマーを見落とすと、アプリが壊れてしまい、間違ったコンテキストから読み込んだり undefined を取得したりします。

移行ステップ（必ずこの順序に従ってください）

ステップ 1: プロバイダーを見つける (childContextTypes + getChildContext)
ステップ 2: すべてのコンシューマーを見つける (contextTypes)
ステップ 3: コンテキストファイルを作成する
ステップ 4: プロバイダーを更新する
ステップ 5: 各コンシューマーを更新する (クラスコンポーネント → contextType、関数コンポーネント → useContext)
ステップ 6: 検証 - アプリを実行し、従来のコンテキスト警告が残っていないことを確認する

スキャンコマンド

# すべてのプロバイダーを見つける
grep -rn "childContextTypes\|getChildContext" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

# すべてのコンシューマーを見つける
grep -rn "contextTypes\s*=" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

# this.context の使用を見つける (従来のものか最新のものかは確認が必要)
grep -rn "this\.context\." src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

リファレンスファイル

• references/single-context.md - 1 つのコンテキスト（テーマ、認証など）の完全な移行、プロバイダー + クラスコンシューマー + 関数コンシューマー付き
• references/multi-context.md - 複数の従来のコンテキストを持つアプリ（ネストされたプロバイダー、異なるコンテキストの複数のコンシューマー）
• references/context-file-template.md - 新しいコンテキストモジュールの標準的なファイル構造