こんにちは、とまだです。
Claude Codeで実装した後、こんな不安を感じたことはありませんか？
「このコード、セキュリティホールはないかな？」
「パフォーマンスは大丈夫だろうか？」
「テストは十分に書けているだろうか？」
実装は終わったけど、品質面での不安が残ることってありますよね。
今回は、Claude Codeのカスタムコマンドを使って、これらの品質チェックを自動化する方法をご紹介します。
実際に使っているコマンドを通じて、レビュー指摘を激減させる仕組みを解説していきます。
忙しい人のために要約
- レビュー依頼前の自動チェックによりレビュー指摘が激減
- 実装者もレビュー者も両方ハッピーな仕組み作り
- セキュリティ、パフォーマンス、SEOなど多角的なチェックを自動化
- 実装直後にチェックすることで、問題を早期発見
なぜ品質チェックの自動化が必要なのか
コードを書き終えた後の品質チェックは、意外と見落としがちです。
料理で例えるなら、味見をせずに完成としてしまうようなもの。
作った本人は「きっと大丈夫」と思っていても、実際には塩が足りなかったり、火の通りが甘かったりすることがあります。
コードも同じで、動作確認だけでは気づかない問題が潜んでいることが多いんです。
特に個人開発では、レビュアーがいないため、自分で品質をチェックする必要があります。
チーム開発でも、レビュー前に自己チェックすることで、指摘事項を減らせます。
そして、問題点を見つけてもらった後に 見つかった問題点を修正して と伝えるだけでOKなのです。
見つかった問題点を修正してください
もちろん自分で「正しい指摘かどうか」を確認する目線は大事ですが、修正自体は自動化できているのがポイントです。
品質チェックコマンドの全体像
私が実際に使っている品質チェックコマンド（の一部）は、大きく6つのカテゴリーに分かれています。
- 総合的なコードレビュー
- パフォーマンスチェック
- セキュリティチェック
- SEOチェック
- テストカバレッジチェック
- デザイン・UIチェック
それぞれが異なる観点から品質を確認し、問題を早期に発見できるようになっています。
では、実際に使っているカスタムコマンドについて具体的に見ていきましょう！
総合コードレビューコマンド
まずは基本となる、総合的なコードレビューコマンドです。
.claude/commands/code-review.md：
現在の実装について、以下の観点で総合的なコードレビューを実施してください。
## レビュー観点
### 1. コードの品質
- 可読性：命名は適切か、処理の流れは理解しやすいか
- 保守性：将来の変更に対応しやすい構造か
- 重複：DRY原則に従っているか
- 複雑度：関数やメソッドが適切な大きさに分割されているか
### 2. ベストプラクティス
- 言語・フレームワーク固有のイディオムに従っているか
- エラーハンドリングは適切か
- ログ出力は適切なレベルで行われているか
### 3. 潜在的な問題
- バグの可能性がある箇所
- エッジケースの考慮漏れ
- 型の不整合やnull参照の危険性
各問題点について、具体的な改善案も提示してください。
優先度（高/中/低）も付けてください。
このコマンドを実行すると、Claude Codeが実装全体を俯瞰してレビューしてくれます。
人間のレビュアーとは違った視点で問題を見つけてくれることが多いです。
実際に、このコマンドで「変数名が曖昧」「エラー処理が不足」といった指摘を受けたこともあります。
パフォーマンス最適化チェック
次に、パフォーマンス面での問題を発見するコマンドです。
.claude/commands/performance-check.md：
現在の実装のパフォーマンスを分析し、改善点を提案してください。
## チェック項目
### フロントエンド
- 不要な再レンダリングが発生していないか
- 重い計算処理が適切にメモ化されているか
- 画像やアセットの最適化余地
- バンドルサイズへの影響
- 遅延ローディングの活用余地
### バックエンド
- データベースクエリの最適化余地（N+1問題など）
- キャッシュの活用可能性
- 非同期処理の適切な使用
- メモリリークの可能性
### 共通
- アルゴリズムの計算量
- 不要なループや処理
- リソースの適切な解放
改善案は、実装の難易度と効果のバランスを考慮して提案してください。
このコマンドで実際に発見できた問題の例をご紹介します。
実際に発見できた問題例
あるReactプロジェクトで、リスト表示のコンポーネントを実装した際のことです。
このコマンドを実行したところ、以下のような指摘を受けました。
「配列のmapメソッド内で、毎回新しいオブジェクトを生成しています。これが不要な再レンダリングの原因になっています」
確かに、以下のようなコードを書いていました。
items.map(item => ({
...item,
displayName: item.firstName + ' ' + item.lastName
}))
この処理を useMemo でメモ化することで、パフォーマンスが改善されました。
このような細かい問題は、自分では気づきにくいものです。
セキュリティ脆弱性の検出
セキュリティは後から対応すると大変なので、実装時にチェックすることが重要です。
.claude/commands/security-check.md：
現在の実装にセキュリティ上の問題がないか確認してください。
## 重要チェック項目
### 入力値の検証
- ユーザー入力の適切なバリデーション
- SQLインジェクション対策
- XSS（クロスサイトスクリプティング）対策
- パストラバーサル対策
### 認証・認可
- 適切な権限チェック
- セッション管理の安全性
- トークンの適切な管理
### データ保護
- 機密情報の適切な暗号化
- ログへの機密情報出力の防止
- 環境変数の適切な管理
### その他
- CSRF対策
- レート制限の必要性
- セキュリティヘッダーの設定
発見した問題は、CVSSスコアに基づく深刻度と共に報告してください。
修正方法も具体的に提示してください。
実際に防げたセキュリティ問題
フォーム処理を実装した時の話です。
このコマンドを実行したところ、「ユーザー入力をそのままHTMLに埋め込んでいる箇所があります」という指摘を受けました。
確認してみると、確かにサニタイズ処理を忘れていた箇所がありました。
// 危険なコード
element.innerHTML = userInput;
// 修正後
element.textContent = userInput;
XSS攻撃を受ける可能性があった危険な実装を、事前に発見できました。
SEO最適化のチェック
Webアプリケーションでは、SEOも重要な品質要素です。
.claude/commands/seo-check.md：
現在の実装がSEOに与える影響を分析してください。
## チェック項目
### テクニカルSEO
- ページの読み込み速度への影響
- Core Web Vitalsへの影響
- 構造化データの実装状況
- サイトマップへの反映必要性
### コンテンツSEO
- メタタグの適切な設定
- 見出しタグの階層構造
- 画像のalt属性
- 内部リンク構造
### モバイル対応
- レスポンシブデザインの実装
- モバイルでのユーザビリティ
### その他
- canonical URLの設定
- robots.txtへの影響
- リダイレクトの適切性
改善提案は、実装コストと期待される効果を明記してください。
このコマンドは、特に新しいページを追加した時に重宝します。
メタタグの設定忘れや、画像のalt属性漏れなど、SEOに影響する細かい部分を指摘してくれます。
慣れていれば事前に気付けますが、SEO対策（特に Core Web Vitals など）を業務で意識していない方は、特に重宝するかと思います。
テストカバレッジの分析
テストの網羅性を確認するコマンドも重要です。
.claude/commands/test-coverage.md：
現在の実装に対するテストカバレッジを分析してください。
## 分析項目
### カバレッジの確認
- 現在のテストでカバーされている範囲
- テストが不足している重要な処理
- エッジケースのテスト漏れ
### テストの質
- テストケースの網羅性
- モックの適切な使用
- アサーションの妥当性
### 追加すべきテスト
- 正常系で不足しているケース
- 異常系で不足しているケース
- 境界値テスト
- 統合テストの必要性
優先度の高いテストケースから順に、具体的なテストコードも提示してください。
このコマンドの優れている点は、テストコードまで生成してくれることです。
生成されたコードをそのまま使えることも多く、テスト作成の時間を大幅に短縮できます。
UI/UXデザインのチェック
最後に、デザイン面でのチェックコマンドです。
.claude/commands/design-check.md：
現在の実装のUI/UXデザインをチェックしてください。
## チェック項目
### 一貫性
- デザインシステムとの整合性
- 他の画面との統一感
- カラーパレットの適切な使用
### ユーザビリティ
- 操作の直感性
- エラー時のフィードバック
- ローディング状態の表示
### アクセシビリティ
- キーボード操作への対応
- スクリーンリーダー対応
- コントラスト比
- フォーカス管理
### レスポンシブ対応
- 各ブレークポイントでの表示
- タッチデバイスでの操作性
改善案は、実装の優先順位と共に提示してください。
デザイナーのレビューには及びませんが、基本的なユーザビリティの問題は発見できます。
「エラーメッセージが表示されない」「ローディング中の表示がない」といった、UXに関わる問題を指摘してくれます。
効果的な品質チェックのワークフロー
これらのコマンドを効果的に使うには、適切なタイミングで実行することが大切です。
実装直後のチェックフロー
機能を実装したら、まず総合的なコードレビューを実行します。
/code-review
基本的な問題を修正したら、次に特化型のチェックを実行します。
/performance-check
/security-check
必要に応じて、SEOやデザインのチェックも行います。
段階的な品質向上
すべての問題を一度に修正する必要はありません。
優先度の高い問題から順に対応していきましょう。
セキュリティ関連は最優先で修正し、パフォーマンスは余裕があれば対応する、といった具合です。
重要なのは、問題を認識しておくことです。
後から対応する場合でも、どんな問題があるか把握しておけば、適切なタイミングで対処できます。
カスタムコマンドを育てるコツ
品質チェックコマンドは、使いながら改善していくものです。
フィードバックを反映させる
実際のレビューで指摘された内容を、コマンドに追加していきましょう。
たとえば、「ログ出力が多すぎる」という指摘を受けたら、それをチェック項目に追加します。
こうすることで、同じ指摘を二度と受けなくなります。
プロジェクト特有のルールを追加
プロジェクトには、それぞれ固有のコーディング規約やルールがあります。
これらをカスタムコマンドに組み込むことで、プロジェクトに最適化された品質チェックができます。
たとえば、「APIのレスポンスは必ずcamelCaseにする」といったルールがあれば、それをチェック項目に追加します。
定期的な見直し
月に一度くらいは、コマンドの内容を見直しましょう。
使われていない項目は削除し、新しく必要になった項目は追加します。
プロジェクトの成長と共に、品質チェックコマンドも進化させていくことが大切です。
実際の効果
これらの品質チェックコマンドを導入してから、開発の質が大きく向上しました。
レビューでの指摘事項が減少し、バグの発生率も低下しています。
特にセキュリティ面では、潜在的な脆弱性を事前に発見できるようになりました。
また、コードの一貫性も保てるようになり、保守性が向上しています。
何より、実装後の不安が減り、自信を持ってコードを提出できるようになりました。
まとめ
Claude Codeのカスタムコマンドを使った品質チェックは、コードの品質を大幅に向上させます。
総合的なレビューから、セキュリティ、パフォーマンス、テストカバレッジまで、多角的にチェックすることで、問題を早期に発見できます。
重要なのは、実装直後にチェックを実行することです。
問題は早期に発見するほど、修正コストが低くなります。
今回ご紹介したコマンドを参考に、プロジェクトに合わせた品質チェックコマンドを作成してみてください。
品質の高いコードを効率的に書けるようになるはずです。
次回は、GitHub CLIと連携した開発フロー自動化について詳しく解説する予定です。
Claude Code の関連記事
他にも Claude Code や AI 駆動開発の記事を書いていますので、よかったらこちらもご覧ください。