react

React アプリケーションエンジニアリング

React 固有の実装レイヤーでは、このスキルを使用してください。ユーザーから移行を求められない限り、プロジェクト既存の React バージョン、パッケージマネージャー、ビルドスクリプト、スタイル規約、ルーティングモデルを維持してください。

作業サイクル

1. 編集前に診断します。 scripts/react-doctor.py --json [PROJECT] を実行し、package.json、ソースのエントリーポイント、Vite 設定、TypeScript 設定、ルート、テストスクリプトを確認してください。診断は範囲が限定されており、読み取り専用です。
2. コンポーネントの契約を定義します。 ページ／機能の境界、入力と出力、所有する状態、サーバー状態、読み込み中／空／エラー／成功の各状態、副作用を特定してください。再利用可能なコンポーネントはルートのグローバル変数に依存させず、無関係なレイヤーを介して状態を渡すことは避けてください。
3. 明示的なデータフローで実装します。 ローカルの動作にはローカル状態を使用し、コンテキストは実際に横断的な関心事に限って使用し、リモートデータには既存のサーバー状態／キャッシュの仕組みを使用してください。エフェクトは外部システムとの同期に使用し、値を重複して保存するのではなく、レンダー中に導出してください。
4. UI の堅牢性を保ちます。 有用な読み込み中、空、エラー、成功の各状態を表示してください。古くなった非同期処理をキャンセルまたは無視し、中断を処理し、古くなったリクエストの後に状態を設定しないようにしてください。安定したキーを維持し、props や state の変更は避けてください。
5. ブラウザー向けに構築します。 セマンティックな HTML、キーボードで操作できるコントロール、視認できるフォーカス、レスポンシブなレイアウト、安定したアクセシブルな名前を使用してください。詳細なアクセシビリティ要件については、web-accessibility を読み込んでください。
6. 段階的に検証します。 既存のテストのうち、最も対象範囲が狭いユニット／コンポーネントテストを実行し、次に lint／型チェック、最後に本番ビルドを実行してください。ブラウザーレベルのフローには、場当たり的なブラウザー自動化ではなく playwright を使用してください。実行した正確なコマンドと、環境に依存するため実行しなかったチェックを報告してください。

React 固有のルール

• フックはすべてのレンダーで無条件に、同じ順序で実行してください。分岐、ループ、イベントハンドラー、ネストした関数内で呼び出してはいけません。
• エフェクトは外部システムとの同期に使用します。props／state から導出できる値の計算や、ユーザーによる編集の明確な要件がない状態で props を state に反映するために、エフェクトを使用してはいけません。
• 次の state が前の state に依存する場合は、関数型更新を使用してください。リストの並べ替え、挿入、削除が可能な場合は、配列インデックスではなくドメイン上の識別情報に基づいた安定したキーをリスト項目に指定してください。
• イベントハンドラーはユーザーの意図を表すものとして扱い、レンダー時の計算とは分けてください。重複送信を無効化または防止し、処理中の状態を表示してください。
• API レスポンスの検証と変換は、統合境界で行ってください。コンポーネントが扱うのは、型付けされ予測可能なビューモデルにしてください。
• 人気があるという理由だけで、状態管理ライブラリやルーターを追加してはいけません。まず状態の所有者を整理し、プロジェクトで既に採用されている選択肢を使用してください。
• Vite では、プロジェクトで定められたプレフィックス（通常は VITE_）を使い、意図的に公開する変数のみを公開してください。クライアントバンドルにシークレットを含めてはいけません。環境、ビルド、デプロイのチェックについては、references/vite-diagnostics.md を読んでください。

ルーティングと引き継ぎ

• コンポーネントアーキテクチャ、レスポンシブ対応の実装、パフォーマンス予算、一般的なフロントエンドテスト：frontend-engineering。
• ブラウザー E2E テストの作成、ロケーターの選択、ネットワークのインターセプト、Playwright の実行：playwright。
• セマンティックな構造、キーボード／フォーカスの動作、WCAG 適合の証跡、アクセシビリティ監査：web-accessibility。
• React Native、Expo、Android、iOS の実装：mobile-development。

リファレンスの参照先

読み込むタイミング	リファレンス
コンポーネントの境界、状態の所有者、副作用、または非同期 UI の動作を選択するとき	references/component-and-state.md
Vite の環境変数の公開範囲、依存関係のバージョン、ビルド出力、またはデプロイパスを診断するとき	references/vite-diagnostics.md

同梱スクリプト

scripts/react-doctor.py は読み取り専用で、依存関係のない診断ツールです。オプションを確認するには scripts/react-doctor.py --help を実行してください。プロジェクトディレクトリを受け取り、 一般的な React/Vite の兆候を確認し、人が読める形式またはサイズを制限した JSON 形式で出力します。パッケージのインストール、プロジェクトスクリプトの実行、 ネットワークへのアクセス、環境変数の値の出力は行いません。

完了範囲

依頼された React の変更が実装され、プロジェクトの関連チェックが実行され、 残っている失敗がコマンドと根本原因を示す根拠とともに報告された時点で終了してください。 明示的に範囲が指定されていない限り、コンポーネントのタスクをフレームワークの移行や アクセシビリティ監査に拡大しないでください。