react18-legacy-context

React 18 のレガシーコンテキストからの移行

レガシーコンテキスト（contextTypes、childContextTypes、getChildContext）は React 16.3 で非推奨となり、React 18.3.1 では警告が表示されます。React 19 では削除されます。

これは必ず複数ファイルにまたがる移行です

一度に 1 つのファイルだけを変更する他の多くの移行とは異なり、コンテキストの移行では、次の作業を調整する必要があります。

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

コンシューマーを 1 つでも更新し忘れると、アプリが壊れます。誤ったコンテキストを読み取るか、undefined を取得します。

移行手順（必ずこの順序で実施してください）

Step 1: Find the provider (childContextTypes + getChildContext)
Step 2: Find ALL consumers (contextTypes)
Step 3: Create the context file
Step 4: Update the provider
Step 5: Update each consumer (class components → contextType, function components → useContext)
Step 6: Verify - run the app, check no legacy context warnings remain

スキャンコマンド

# Find all providers
grep -rn "childContextTypes\|getChildContext" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

# Find all consumers
grep -rn "contextTypes\s*=" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

# Find this.context usage (may be legacy or modern - check which)
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 - 新しいコンテキストモジュールの標準的なファイル構成