Claude Code Tips集 - 生産性を爆上げする実践テクニック¶

# 危険性を理解した上で自動承認
claude --dangerously-skip-permissions "プロジェクトの全ファイルを分析して課題を報告"

# またはShift+Tabでモード切り替え
# Plan Mode → Normal Mode → Auto-Accept Mode

# CLAUDE.md
## プロジェクト概要
React + TypeScript + Tailwind CSSのWebアプリ

## 開発ルール
- ESLint + Prettierの設定に従う
- コンポーネントは関数型で作成
- テストは必須（Jest + Testing Library）
- セキュリティ重視（XSS/CSRF対策）

## よく使うコマンド
- 開発サーバー: `npm run dev`
- テスト実行: `npm run test`
- ビルド: `npm run build`

# ~/.claude/templates/ に保存
echo "以下のコードをレビューして、パフォーマンスとセキュリティの観点から改善点を指摘してください：" > code-review-template.txt

# 使用時
claude "$(cat ~/.claude/templates/code-review-template.txt) $(cat src/components/UserForm.tsx)"

# パターン1: 特定の技術的負債の解消
claude "プロジェクト全体でReact Class ComponentをFunction Componentに変換してください"

# パターン2: セキュリティ強化
claude "すべてのAPIエンドポイントにCSRF保護とレート制限を追加してください"

# パターン3: パフォーマンス最適化
claude "画像の遅延読み込みと重いコンポーネントのReact.memoを実装してください"

# 新機能実装時
claude "ユーザー認証機能を実装し、同時に以下のテストケースも作成してください：
- 正常なログイン/ログアウト
- 不正な認証情報でのエラーハンドリング
- トークンの有効期限切れ処理
- セッション管理のテスト"

# API仕様書生成
claude "既存のExpressサーバーコードからOpenAPI仕様書を生成してください"

# README.md自動更新
claude "プロジェクトの現在の状態を分析して、README.mdを最新の構成に更新してください"

# フェーズ1: 基盤設計
claude "eコマースサイトの商品検索機能を段階的に実装します。
フェーズ1：データベース設計と基本的なAPIエンドポイントの作成から始めてください"

# フェーズ2: 機能拡張（前フェーズ完了後）
claude "商品検索のフェーズ2：フィルタリング機能とソート機能を追加してください"

# フェーズ3: UX向上（最終段階）
claude "商品検索のフェーズ3：検索候補の表示とオートコンプリート機能を実装してください"

# Step 1: エラー分析
claude "以下のエラーログを分析して原因を特定してください：
[エラーログを貼り付け]"

# Step 2: 解決策の提示
claude "上記のエラーに対して、3つの解決策を優先度順に提示してください"

# Step 3: 実装
claude "最も安全で効果的な解決策を実装してください"

# 包括的なコードレビュー
claude "以下の観点で変更されたファイルをレビューしてください：
1. コーディング規約の遵守
2. パフォーマンスの問題
3. セキュリティ脆弱性
4. テストカバレッジ
5. ドキュメントの更新必要性"

# ログパターン分析
claude "過去1週間のエラーログを分析して、頻発する問題とその解決策を報告してください"

# パフォーマンス分析
claude "アプリケーションのパフォーマンスログから、ボトルネックを特定して最適化案を提示してください"

# 環境設定の最適化
claude "Docker設定とCI/CDパイプラインを見直して、環境間の差異をなくしてください"

# 依存関係の管理
claude "package.jsonとlockファイルを分析して、バージョン競合を解決してください"

# セキュリティチェック
claude "以下の観点でセキュリティ監査を実行してください：
- SQL インジェクション対策
- XSS 対策  
- CSRF 対策
- 認証・認可の脆弱性
- データ暗号化の状況"

# デスクトップデザインからモバイル対応
claude "このデスクトップ向けのReactコンポーネントを、タブレットとスマートフォンに最適化してください"

# アクセシビリティ対応
claude "既存のUIコンポーネントにWCAG 2.1 AAレベルのアクセシビリティ対応を追加してください"

# カスタムクラスの生成
claude "よく使われるスタイルパターンを分析して、再利用可能なTailwindクラスセットを作成してください"

# スタイルの最適化
claude "CSSバンドルサイズを削減するため、未使用のTailwindクラスを特定して削除してください"

# マイクロインタラクション
claude "ボタンクリック、ページ遷移、フォーム送信時の滑らかなアニメーションを実装してください"

# ローディング状態の改善
claude "データ取得中のスケルトンスクリーンとプログレスバーを実装してください"

# CI/CDパイプライン構築
claude "以下の要件でGitHub Actionsワークフローを作成してください：
- プルリクエスト時：テスト実行、リント、セキュリティチェック
- マージ時：ビルド、ステージングデプロイ
- リリースタグ時：本番デプロイ"

# テスト戦略の構築
claude "単体テスト、統合テスト、E2Eテストの自動実行環境を構築してください。
Jest + Testing Library + Cypress を使用し、カバレッジ90%を目標とします"

# ログ・メトリクス設定
claude "Node.jsアプリケーションのパフォーマンス監視とエラートラッキングを設定してください。
Prometheus + Grafana + Sentry を使用します"

# 技術比較分析
claude "React状態管理ライブラリ（Redux、Zustand、Jotai）を比較分析して、
プロジェクトに最適な選択肢を根拠と共に提案してください"

# ベストプラクティス調査
claude "2025年のフロントエンド開発ベストプラクティスを調査して、
現在のプロジェクトへの適用可能性と実装方法を提案してください"

# 技術仕様書更新
claude "コードベースの変更に合わせて、API仕様書と技術設計書を更新してください"

# 開発者向けガイド作成
claude "新しい開発者がプロジェクトに参加した時のオンボーディング資料を作成してください"

# 技術的負債の可視化
claude "プロジェクト全体を分析して、技術的負債を優先度順にリストアップし、
改善計画を提案してください"

# 依存関係の最適化
claude "パッケージの依存関係を分析して、不要な依存関係の削除と
セキュリティ脆弱性のあるパッケージの更新を提案してください"