React / UI Runtime Checks

ゴール

このスキルの目的は、画面まわりの変更に対して「どの画面操作をどう確認するか」を漏れなく列挙すること。

対象は以下:

• •Reactコンポーネント（Hooks/Class問わず）
• •画面全体のフロー（画面遷移・モーダル・ダイアログなど）
• •フォーム・一覧・詳細画面・検索画面 などのUI

コード品質レビュー用の react-code-review とセットで使う想定。

いつ使うか

• •Reactコンポーネントや画面のPRをレビューするとき
• •「この画面変更で、どの操作を動作確認すべきか」を整理したいとき
• •手動テストやE2Eテストのシナリオを考えるとき

基本ルール

ルール: 次の種類のUI変更を見つけたら、必ず1つ以上の画面動作確認項目を書く。

1. •ユーザー操作の追加・変更
   • •ボタン・リンク・アイコンのクリック
   • •フォーム送信（登録・更新・検索など）
   • •モーダル／ダイアログの表示・閉じる操作
2. •状態管理やuseEffectの変更
   • •ローディング状態の追加・変更
   • •フラグ（例: isOpen, hasError, isDirty）の追加・変更
   • •URLパラメータやクエリストリングに依存する処理
3. •画面フロー・遷移の変更
   • •画面遷移先の変更（成功時／失敗時）
   • •パンくず・タブ・ステップ形式のフロー
4. •バリデーション・エラー表示の変更
   • •必須入力の追加・削除
   • •入力制限（文字数・形式・範囲など）の変更
   • •エラーメッセージの表示ロジック変更
5. •レイアウト・表示内容の変更
   • •新しいカラムやカードの追加
   • •条件付きで要素を表示／非表示にする変更
   • •レスポンシブ対応やブレークポイントの変更

動作確認項目の書き方（テンプレート）

PRコメントやレビュー結果に、次のような形で「画面動作確認観点」セクションを作る。

### 画面動作確認観点

#### 正常系
- [ ] パターン1
- [ ] パターン2

#### 異常系・バリデーション
- [ ] パターン1
- [ ] パターン2

#### 画面フロー・遷移
- [ ] パターン1

#### レイアウト・表示
- [ ] パターン1

#### アクセシビリティ / UX（必要に応じて）
- [ ] パターン1

典型的な画面ごとの観点

フォーム画面（登録・更新・検索など）

必ず次のパターンを検討する。

• •正常系
  • • 必須項目を正しく入力したとき、登録/更新/検索が成功する
  • • 成功後の画面遷移やメッセージ表示が仕様どおりである
• •異常系・バリデーション
  • • 必須項目を空のまま送信したとき、エラーメッセージがフィールドごとに表示される
  • • 文字数上限・数値の最小/最大など境界値で期待どおりのエラー/成功になる
  • • 不正フォーマット（メール・日付など）で適切なエラーが出る
• •画面フロー
  • • キャンセルボタンや戻る操作で、想定された画面/状態に戻る
• •UX
  • • ローディング中はボタンの多重押下が防止されている
  • • エラー時にユーザーが次に何をすべきか分かるメッセージになっている

一覧画面

• •正常系
  • • データが存在する場合に、一覧が正しい件数・内容で表示される
  • • ページネーション・ソート・フィルタが仕様どおりに動く
• •境界値
  • • 0件のときに「データがありません」など、適切なメッセージ/表示になる
  • • 最大件数付近（1ページ満杯など）で表示崩れがない
• •画面フロー
  • • 行クリックや詳細ボタンから、正しい詳細画面に遷移する

詳細画面 / モーダル

• • 対象データの情報が全て正しく表示される
• • 編集・削除などの操作から、仕様どおりのフロー（確認ダイアログ→結果表示）が動作する
• • モーダル表示・閉じる操作（ボタン/背景クリック/ESCなど）が想定どおりに動作する

手順（レビュー時の思考プロセス）

1. •差分から「どの画面・どのUI要素に効いているか」をざっくり把握する
2. •対象画面の種類を分類する
   • •フォーム / 一覧 / 詳細 / モーダル / ウィザード（ステップ形式） など
3. •上記の「典型的な観点」から、該当するセクションを選ぶ
4. •変更内容をもとに、テンプレートの各セクションに具体的な操作手順と期待結果を書き込む
5. •書き出した項目を見て、
   • •正常系
   • •異常系・バリデーション
   • •画面フロー
   • •レイアウト/表示 のいずれかが抜けていないか確認する

出力フォーマット（最終形）

このスキルを使って画面まわりの動作確認観点を整理するときは、次のようにまとめる。

### 画面動作確認観点

#### 正常系
- [ ] 〇〇画面で、△△ボタンを押したときに□□が表示される

#### 異常系・バリデーション
- [ ] △△を未入力で送信したときに、「○○は必須です」と表示される

#### 画面フロー・遷移
- [ ] 登録成功後、一覧画面に遷移し、登録したデータが先頭に表示される

#### レイアウト・表示
- [ ] ウィンドウ幅を〇〇pxにしてもレイアウトが崩れない

#### アクセシビリティ / UX（必要に応じて）
- [ ] キーボードだけで主要な操作（入力・送信・キャンセル）が行える

このテンプレートに沿って、「どの画面で、どの操作を、どの状態で確認するか」を明文化することで、画面周りの動作確認漏れを防ぐ。