react

React

最新のドキュメントと、ローカルアプリの実際のバージョン、フレームワーク、規約に基づいて React の選択を行う際に、このスキルを使用します。

スナップショット：[email protected] / [email protected]（2026-09-09 リリース。2026-10-01 時点で引き続き npm の latest）。バージョンが異なる場合は、source-map.md で最新情報を確認してください。

ワークフロー

1. コードを変更する前に、React の利用形態を特定します。
   • 最寄りのプロジェクトガイダンスファイルとパッケージマニフェストを読みます。
   • react、react-dom、フレームワーク、ビルドツール、テストスタック、TypeScript、ESLint のインストール済みまたは宣言済みのバージョンを確認します。
   • 対象がクライアントのみのアプリ、SSR、フレームワーク管理のアプリ、React Server Components アプリ、React Native アプリ、コンポーネントライブラリ、移行作業のいずれかを特定します。
2. 最新または現行の動作をユーザーが求めている場合、バージョンが不明な場合、または React 19 以降の API を使用する場合は、ドキュメントを最新の状態にします。
   • 現行のドキュメント用ツールまたは公式ドキュメントページを優先します。
   • 最新バージョンのスナップショットと公式ソースへのリンクは、source-map.md を参照してください。
3. タスクに対応するリファレンスファイルを読み込みます。
   • core-react.md：コンポーネント設計、JSX、状態、エフェクト、フック、純粋性、パフォーマンス、テストに関する判断。
   • react-19.md：React 19～19.3 の API、アップグレード、Actions、フォーム、Server Components、Server Functions、Compiler、View Transitions、Fragment refs、リリースチャネルに関する注意事項。
   • react-dom.md：createRoot、hydrateRoot、browser()、DOM フォーム、ハイドレーション、サーバー／静的レンダリング、Trusted Types、リソース、エスケープハッチ。
4. 既存のプロジェクトスタイルに沿って実装します。
   • ルーティング、データ取得、SSR、RSC、ハイドレーションをフレームワークが管理している場合は、React DOM API を直接使うよりも、フレームワークのプリミティブを優先します。
   • ローカルのコンポーネント境界、アクセシビリティの規約、テスト、スタイルのパターンを維持します。
   • アプリの依存関係が対応していない限り、React 19.3 のみ、または canary のみで使える API の導入は避けます。
5. 最小限の意味のある範囲で検証します。
   • プロジェクトに適した型チェック、Lint、テスト、ビルド、ストーリー、またはブラウザー検証のコマンドを実行します。
   • UI に見える変更を加えた場合は、可能であれば実際の画面状態を確認します。
   • 実行できなかった検証があれば報告します。

React に関する判断

• レンダーを純粋かつ冪等に保ちます。値が安全に分離され、繰り返し実行しても同じ結果になる場合を除き、レンダー中に時刻、乱数、ブラウザー専用のグローバル値を読み取ったり、ローカルでない値を変更したりしないでください。
• props または state から計算できる値は、レンダー中に導出します。別の値をそのまま反映するためだけに、state と Effect を追加しないでください。
• Effect は、DOM、サブスクリプション、タイマー、命令型ウィジェット、分析、またはフレームワークを介さないデータ取得など、外部システムとの同期にのみ使用します。
• Effect の依存関係を正確に保ちます。リンターを抑制するのではなく、値をコンポーネントの外部、または Effect／イベントの境界に移動して、リアクティブでないことを明確にします。
• ユーザー操作によって起きる副作用は、イベントハンドラーまたは Actions に置きます。レンダーによって起きる外部システムとの同期は、Effect に置きます。
• ローカルな state を優先します。複数のコンポーネント間で連携が必要な場合にのみ state を持ち上げます。複雑な状態遷移には reducer を、外部ストアには useSyncExternalStore を使用します。
• React 19.3 の SSR では、一致する HTML を生成できない Client Components に対して、typeof window やマウント状態を使った Effect よりも、react-dom の use(browser()) を優先します。
• <ViewTransition> は Transition／Suspense のアニメーション境界として扱います。React が管理する更新に対して、ブラウザーの startViewTransition API を呼び出さないでください。
• タスクがフレームワークの基盤構築を明示的に対象としている場合を除き、Server Components、Server Functions、React DOM のサーバー／静的 API はフレームワーク統合の領域として扱います。
• プロジェクトが明示的にそれらのチャネルを使用していない限り、安定版アプリでは canary および実験的なドキュメントの内容を利用できないものとして扱います。