review-react

スキル：React のレビュー

目的

React コードをフレームワークの規約に限ってレビューします。対象範囲（差分かコードベース全体か）は定義せず、セキュリティやアーキテクチャの分析も行いません。これらはスコープスキルと認知スキルが担当します。集約用の標準形式で指摘事項リストを出力します。関数コンポーネントの設計、フックの正しさ、状態管理（ローカルと外部）、レンダリングのパフォーマンス、副作用とデータ取得、ルーティングとコード分割、アクセシビリティに重点を置きます。

---

主な目的

第一の目標：指定されたコード範囲について、コンポーネント設計、フックの正しさ、状態管理、レンダリングのパフォーマンス、副作用、ルーティング／コード分割、アクセシビリティを網羅した、React フレームワークに関する指摘事項リストを作成します。

成功基準（すべて満たす必要があります）：

1. ✅ React フレームワークの範囲に限定：React フレームワークの規約のみをレビューし、対象範囲の選定、セキュリティ分析、アーキテクチャ分析を行わない
2. ✅ React の7つの観点をすべて網羅：関連する場合、コンポーネント設計、フックの正しさ、状態管理、レンダリングのパフォーマンス、副作用／データ取得、ルーティング／コード分割、アクセシビリティを評価する
3. ✅ 指摘事項の形式に準拠：各指摘事項に指摘事項リスト §5.1で必須とされる要素をすべて含め、カテゴリを framework-react とする
4. ✅ コンポーネント／ファイルへの参照：すべての指摘事項で、具体的なファイルと行番号、またはコンポーネント名を示す
5. ✅ React 以外のコードを除外：明示的に対象範囲に含まれていない限り、React 以外のファイルを React 固有のルールに照らして分析しない

受け入れテスト：出力には、セキュリティ、アーキテクチャ、対象範囲の分析を行わず、関連するフレームワークの観点を網羅し、コンポーネント／ファイルへの参照を含む、React 中心の指摘事項リストが含まれていますか？

---

対象範囲の境界

このスキルの担当範囲：

• 関数コンポーネントの設計（単一責任、合成パターン、プロパティの型とデフォルト値、子要素のパターン）
• フックの正しさ（依存配列、古いクロージャ、カスタムフックの抽出、フックのルール、useEffectのクリーンアップ）
• 状態管理（ローカル状態とグローバル状態、Contextの使用、reducerパターン、Zustand／Reduxなどの外部ストア、TanStack Query／SWRによるサーバー状態）
• レンダリングのパフォーマンス（memo／useMemo／useCallbackの使用、リスト内のキーの安定性、不要な再レンダリングの回避、大規模なリストでの仮想化）
• 副作用とデータ取得（useEffectのパターン、競合状態、abort controller、読み込み／エラー状態、データ取得ライブラリ）
• ルーティングとコード分割（React.lazy、Suspense境界、ルート単位のコード分割、エラー境界）
• アクセシビリティ（ARIA属性、セマンティックHTML、キーボード操作、フォーカス管理、スクリーンリーダーのサポート）

このスキルの担当範囲外：

• 対象範囲の選定 — 対象範囲は呼び出し元が指定します
• セキュリティ分析（XSS、インジェクションのリスク） — review-security を使用してください
• アーキテクチャ分析 — review-architecture を使用してください
• 言語／ランタイム（JavaScript／TypeScript）の規約 — review-typescript または一般的なJS／TS分析を使用してください
• レビュー全体のオーケストレーション — orchestrate-code-review を使用してください

引き継ぎ地点：React に関する指摘事項をすべて出力したら、集約のために orchestrate-code-review に引き渡します。XSSのリスク（dangerouslySetInnerHTMLの誤用、サニタイズされていないコンテンツ）については、その点を記録し、review-security を参照してください。

---

ユースケース

• オーケストレーションされたレビュー：orchestrate-code-review がReactプロジェクトで「スコープ → 言語 → フレームワーク → ライブラリ → 認知」の順に実行される際、フレームワークのステップとして機能します。
• React のみのレビュー：React／フロントエンドのフレームワーク規約だけを確認したい場合に使用します。
• PR前のReactチェックリスト：フックの使用、コンポーネント設計、状態管理のパターンが適切であることを確認します。

使用するタイミング：レビュー対象のコードがReactであり、タスクにフレームワークの品質確認が含まれている場合です。対象範囲は呼び出し元またはユーザーが設定します。

---

動作

このスキルの対象範囲

• 分析する内容：呼び出し元から渡された指定されたコード範囲（ファイルまたは差分）における、React フレームワークの規約です。対象範囲は選定せず、入力として受け取ります。
• 実施しない内容：対象範囲の選定、セキュリティレビュー、アーキテクチャレビューは行いません。対象に含まれていない React 以外のファイルに対して React のルールを確認することもありません（たとえば、複数の技術が混在するリポジトリの場合）。

レビューチェックリスト（React フレームワークのみ）

1. コンポーネント設計：関数コンポーネントを優先します。コンポーネントごとに責務をひとつにします。深いネストよりコンポジションを優先します。妥当なデフォルト値を設定した、明示的なプロパティ型（TypeScript インターフェースまたは PropTypes）を使用します。children とレンダープロパティを適切に使用します。
2. フックの正確性：useEffect/useMemo/useCallback の依存配列を正しく指定します。古いクロージャを避けます。再利用可能なロジックはカスタムフックとして切り出します。フックのルール（トップレベルのみ、React の関数内のみ）に従います。useEffect 内でサブスクリプションやタイマーのクリーンアップ関数を使用します。
3. 状態管理：ローカル状態（useState）とグローバル状態を適切に使い分けます。横断的な関心事には Context を使用し、過剰な使用は避けます。複雑な状態遷移には useReducer を優先します。外部ストア（Zustand、Redux Toolkit）を正しく統合します。サーバー状態（TanStack Query、SWR）とクライアント状態を分離します。
4. レンダリングパフォーマンス：効果が明確に見込める場合に React.memo、useMemo、useCallback を使用します。リストには安定したキーを設定します（動的なリストでインデックスをキーに使用しないでください）。再レンダリングの原因になる場合は、JSX 内でオブジェクトや関数をインラインで作成しないようにします。大きなリストは仮想化します（react-window、react-virtuoso）。
5. 副作用とデータ取得：useEffect のパターン（単一目的のエフェクト、適切なクリーンアップ）を正しく使用します。AbortController またはフラグで競合状態に対処します。読み込み中・エラー・成功の各状態を明示的に表します。単独の useEffect + fetch より、データ取得ライブラリ（TanStack Query、SWR）を優先します。
6. ルーティングとコード分割：React.lazy と Suspense を使ってルート単位でコードを分割します。遅延読み込みするルートの周囲にエラーバウンダリを定義します。ルート定義は宣言的に保ちます。遅延読み込みが適している場合は、モジュール全体を先行読み込みしないようにします。
7. アクセシビリティ：セマンティックな HTML 要素を使用します。ARIA 属性（ロール、ラベル、ライブリージョン）を正しく設定します。キーボード操作とフォーカス管理を確保します。スクリーンリーダーをサポートします。インタラクティブなコンポーネントがアクセシビリティ要件に準拠しているかテストします。

トーンと参照

• プロフェッショナルかつ技術的に：正確な場所（ファイル名と行番号、またはコンポーネント名）を示します。findings-list §5.1 で必須とされているすべての要素を含む指摘を出力します。

---

入力と出力

入力

• コード範囲：React コードを含むファイルまたはディレクトリ（あるいは差分）。対象は .tsx、.jsx、React API を使用する .ts、.js です。ユーザーまたはスコープスキルから提供されます。

出力

• specs/findings-list.md で定義された形式で、Category が framework-react の指摘を 0 件以上出力します。
• このスキルのカテゴリは framework-react です。

---

制限事項

厳守事項

• 禁止：対象範囲の選定、セキュリティレビュー、アーキテクチャレビューを行わないでください。React フレームワークの規約の範囲内にとどめます。
• 禁止：具体的な場所または実行可能な提案を示さずに指摘すること。
• 禁止：明示的に対象範囲に含まれていない React 以外のコードを、React 固有のルールに照らしてレビューすること。

スキルの境界

以下は行わないでください（他のスキルが担当します）。

• コード範囲を選定または定義しないでください。呼び出し元または orchestrate-code-review が設定します。
• セキュリティ分析（XSS、インジェクション）は行わないでください。review-security を使用します。
• アーキテクチャ分析は行わないでください。review-architecture を使用します。

作業を終了して引き継ぐ場合：

• React に関する指摘をすべて出力したら、集約のために orchestrate-code-review に引き継ぎます。
• XSS のリスクが見つかった場合（たとえば、安全でない dangerouslySetInnerHTML の使用）、その旨を記載し、review-security を案内します。
• ユーザーが全体レビュー（スコープ、言語、認知面）を希望する場合は、orchestrate-code-review に案内します。

---

セルフチェック

主な成功基準

• React フレームワークの範囲のみ：React フレームワークの規約のみをレビューし、範囲の選定、セキュリティ、アーキテクチャの分析は行わない
• React の 7 つの観点をすべて網羅：該当する場合、コンポーネント設計、フックの正確性、状態管理、レンダリングのパフォーマンス、副作用／データ取得、ルーティング／コード分割、アクセシビリティを評価する
• 指摘事項の形式に準拠：各指摘事項に findings-list §5.1 が求めるすべての要素を含め、カテゴリを framework-react とする
• コンポーネント／ファイルの参照：各指摘事項で、具体的な file:line またはコンポーネント名を示す
• React 以外のコードを除外：明示的に対象範囲に含まれていない限り、React 固有のルールに基づいて React 以外のファイルを分析しない

プロセスの品質チェック

• React フレームワークの観点のみをレビューしましたか（範囲／セキュリティ／アーキテクチャの分析なし）？
• 該当する場合、コンポーネント設計、フック、状態、パフォーマンス、副作用、ルーティング、アクセシビリティを網羅しましたか？
• 各指摘事項に findings-list §5.1 が求めるすべての要素を含め、カテゴリを framework-react としていますか？
• 各問題を file:line またはコンポーネントに結び付けていますか？

受け入れテスト

出力には、セキュリティ、アーキテクチャ、範囲の分析を行うことなく、該当するすべてのフレームワークの観点を網羅し、コンポーネント／ファイルの参照を含む React 中心の指摘事項リストが含まれていますか？

---

例

例 1：useEffect のクリーンアップ漏れ

• 入力：クリーンアップなしで useEffect 内に WebSocket 接続を開くコンポーネント。
• 期待される結果：クリーンアップ漏れを指摘する（重大）。接続を閉じるクリーンアップ関数を返すよう提案する。カテゴリ = framework-react。

例 2：動的リストでのインデックスの key としての使用

• 入力：並べ替え／フィルタリング可能なリストを、配列のインデックスを key として使って描画するコンポーネント。
• 期待される結果：key の不安定さと、それによって発生し得る状態の不具合を指摘する。安定した一意の識別子を key として使うよう提案する。カテゴリ = framework-react。

エッジケース：モダンなコードベースにおけるクラスコンポーネント

• 入力：それ以外では関数コンポーネントとフックを使用しているコードベースに含まれる、レガシーなクラスコンポーネント。
• 期待される結果：実用的な場合は、フックを使う関数コンポーネントへの移行を提案する。クラスコンポーネントのライフサイクルが適切かどうかも確認する（componentDidMount、componentWillUnmount のクリーンアップ）。安定して十分にテストされたコンポーネントについては、移行を推奨するものの、常に必須ではないことに留意する。