Imported from yukinouz/react-api-user-list (
.rulesync/skills/review-guideline/SKILL.md). Install upstream withnpx skills add yukinouz/react-api-user-list --skill review-guideline. Copyright stays with the author.
Pre-Review (PR 提出前セルフレビュー)
目的
PR を提出する前に、開発者自身がコードの品質をチェックし、レビュアーの負担を軽減する。 「完璧」を目指すのではなく、「継続的改善」を目指す。
Instructions
ユーザーが PR 提出前のセルフレビューを依頼したら、以下の手順で対応してください:
1. 変更内容の取得
# 変更ファイル一覧を取得
git diff main...HEAD --name-only
# 変更行数を取得
git diff main...HEAD --stat
# 変更内容を取得
git diff main...HEAD
2. PR サイズのチェック
以下の基準を満たしているか確認:
- 変更行数: ~300 行以下(超えそうなら分割を提案)
- 変更ファイル数: ~10 個以下(超えそうなら分割を提案)
- 理想のレビュー完了時間: 20 分以内
サイズが大きい場合は、分割方法を具体的に提案する。複数セクションを一度に含む PR の場合は、目安 300 行を境に、2〜4 セクション程度を 1 PR にまとめる形で分割を提案する(1 セクション 1 PR だと diff が細かくなりすぎるため避ける)。
3. コードレビュー観点でのチェック
以下の観点で変更内容をレビュー:
TypeScript
- ユーザー・API レスポンス(
totalCount,users)・ページネーション状態など、ドメインに沿った型があるか(anyや過度な型断言に逃げていないか)
コンポーネント分割
- 一覧表示・ページネーション・データ取得など、責務と粒度が分かれているか(1 ファイルに詰め込みすぎていないか)
テスト実装
- アプリケーションまたはコンポーネントに対するテストが追加・更新されているか
- ページネーションやデータ取得など、主要な振る舞いをテストで担保しているか
アプリケーション要件
-
http://localhost:4000/usersから MSW モック経由でデータを取得しているか - 取得データをテーブル形式で表示しているか(1 ページ 10 件)
- ページに「ユーザーリスト」というタイトルが表示されているか
- ユーザーが見つからなかった場合の表示が用意されているか
API とモックデータ
- クエリパラメータ
page(デフォルト 1)とpageSize(デフォルト 10)を正しく渡しているか - レスポンスの
totalCountとusers(id,name)を正しく扱っているか - 存在しないページ(
users: []+ 404)の空状態・エラー状態を考慮しているか - 500 レスポンス(モックで約 1% 発生)のエラー表示や再試行など、必要に応じて考慮しているか
ページネーション
-
totalCountとpageSizeから最終ページを計算し、First/Previous・Next/Last の無効化タイミングが正しいか - ローディング中は 4 ボタンすべてが無効になっているか
3.1 設計
- コードはシステムに適した、良い設計になっているか
- 適切な責務分離ができているか
3.2 機能
- コードは作者の意図どおりに動作するか
- ユーザーにとって望ましい挙動か
- エッジケースは考慮されているか
3.3 複雑さ
- もっと単純にできないか
- 将来、他の開発者が容易に理解・利用できるか
- 不要なメモ化(useCallback, useMemo, React.memo)を使用していないか
3.4 命名
- 変数、クラス、メソッドなどの名前は明確か
- S-I-D 原則(Short, Intuitive, Descriptive)に従っているか
- on/handle の使い分けは正しいか
- is/has の使い分けは正しいか
3.5 コメント
- コメントは明確で有用か
- 「なぜ」を説明しているか(「何を」ではなく)
- 自己記述的なコメントは含まれていないか
- TODO/FIXME/NOTE/WARNING が適切に使用されているか
3.6 スタイル
- ESLint・Prettier・命名規則・ファイル構成・プロジェクトのスタイルガイドに従っているか
- TypeScript の型定義は明示的か(any 禁止)
- 既存のスタイル方針(
App.css等)と矛盾しないか
3.7 テスト
- テストコードは追加・更新されているか
3.8 アクセシビリティ
- セマンティックな HTML(
<main>,<section>,<nav>や見出し階層など)が適切に使われているか - マークアップに
role属性やaria-label等が、必要に応じて適切に付与されているか
3.9 セキュリティ
- 秘密情報(API キー、パスワード等)が含まれていないか
- console.log やデバッグコードが残っていないか
4. レビュー結果の出力
以下の形式で結果を出力:
## PR セルフレビュー結果
### サイズ
- 変更行数: XX 行 [OK/要分割]
- 変更ファイル数: XX 個 [OK/要分割]
### チェック結果
#### 問題あり(対応必須)
- [ファイル名:行番号] 問題の説明と修正提案
#### 提案(任意)
- [nit] [ファイル名:行番号] 改善提案(対応しなくても良い)
### 総評
レビュー可能な状態かどうかの判断と、必要に応じて改善点のサマリー
5. 修正の支援
問題が見つかった場合、ユーザーに確認の上で修正を支援する。
レビューコメントのラベル
重要度に応じて以下のラベルを使用:
| ラベル | 説明 |
|---|---|
[must] |
対応必須の問題 |
[nit] |
仕上げレベルの指摘(無視しても良い) |
[ask] |
質問・確認事項 |
[suggest] |
提案(より良い方法がある場合) |
[praise] |
良いコードへの称賛(学びの共有) |
[no rush] |
今やらなくても良いが、将来的には解決したい提案。タスク化や修正を検討する。 |
Examples
ケース 1: 小さな PR のセルフレビュー
User: "PRを出す前にセルフレビューして"
Claude:
1. 変更内容を取得
- 変更ファイル: 3 個
- 変更行数: 85 行
2. サイズチェック: OK
3. コードレビュー実施
4. 結果出力:
## PR セルフレビュー結果
### サイズ
- 変更行数: 85 行 [OK]
- 変更ファイル数: 3 個 [OK]
### チェック結果
#### 問題あり(対応必須)
- なし
#### 提案(任意)
- [nit] src/components/Pagination/Pagination.tsx:15 - handleButtonClick は handleClick で十分です(コンテキストが明確なため)
### 総評
レビュー可能な状態です。軽微な命名の改善提案がありますが、必須ではありません。
ケース 2: 大きな PR の分割提案
User: "/review-guideline"
Claude:
1. 変更内容を取得
- 変更ファイル: 15 個
- 変更行数: 450 行
2. サイズチェック: 要分割
3. 結果出力:
## PR セルフレビュー結果
### サイズ
- 変更行数: 450 行 [要分割] ※目安: ~300 行
- 変更ファイル数: 15 個 [要分割] ※目安: ~10 個
### 分割提案
この PR は以下のように分割することを推奨します:
**PR 1: ユーザーリスト表示の追加**
- src/components/UserTable/UserTable.tsx
- src/hooks/useUsers.ts
- src/types/user.ts
推定: 150 行, 3 ファイル
**PR 2: ページネーションの追加**
- src/components/Pagination/Pagination.tsx
- src/hooks/usePagination.ts
推定: 120 行, 2 ファイル
**PR 3: テストの追加**
- src/components/UserTable/UserTable.test.tsx
- src/components/Pagination/Pagination.test.tsx
- ...
推定: 120 行, 9 ファイル
分割して PR を作成しますか?
ケース 3: 問題が見つかった場合
User: "セルフレビューお願い"
Claude:
## PR セルフレビュー結果
### サイズ
- 変更行数: 120 行 [OK]
- 変更ファイル数: 4 個 [OK]
### チェック結果
#### 問題あり(対応必須)
- src/hooks/useUsers.ts:25 - `any` 型が使用されています。API レスポンス用の型定義に変更してください
- src/components/Pagination/Pagination.tsx:30 - ローディング中もページネーションボタンが有効のままです
#### 提案(任意)
- [nit] src/hooks/useUsers.ts:30 - `data` より `users` の方が明確です
### 総評
3 件の必須対応事項があります。修正後に再度セルフレビューを実行してください。
---
修正を手伝いましょうか?
注意事項
- レビューは「継続的改善」を目指し、「完璧」を求めない
- 個人の好みではなく、設計の原則や既存コードの一貫性を重視
- 学びにつながるコメントは積極的に共有
- 重要度が高くない指摘には
[nit]を付ける
