# High Quality Commit - Examples このドキュメントでは、実際の開発シナリオでの具体的な使用例を示します。 ## 例1: 初回実装でのgitコミット ### シナリオ 新機能「ユーザープロフィール編集」を実装し、初めてgit commitする ### 手順 ```bash # 1. ブランチ状況確認 git status # On branch feature/user-profile-edit # Changes not staged for commit: # modified: src/components/UserProfile.tsx # modified: src/api/user.ts # new file: src/components/ProfileEditForm.tsx git log --oneline --graph origin/main..HEAD # (no commits yet on this branch) # 2. 戦略判断: ブランチに初めてのgitコミット → 新規gitコミット # 3. git commit実行 git add -A git commit ``` ### gitコミットメッセージ ``` feat: add user profile editing feature Implement profile editing functionality: - Add ProfileEditForm component with validation - Add PUT /api/users/:id endpoint - Integrate form with existing UserProfile component Users can now update their display name, email, and bio. Closes #234 ``` ## 例2: レビュー指摘への対応（Squash） ### シナリオ PR作成後、レビューで「バリデーションロジックを改善してください」という指摘を受けた ### 手順 ```bash # 1. 現在のコミット確認 git log --oneline --graph origin/main..HEAD # * a1b2c3d feat: add user profile editing feature # 2. 指摘箇所を修正 # src/components/ProfileEditForm.tsx を編集... # 3. 戦略判断: 既存コミットと同じテーマ → Squash # 4. 既存コミットに統合 git add -A git commit --amend ``` ### 更新されたコミットメッセージ ``` feat: add user profile editing feature Implement profile editing functionality: - Add ProfileEditForm component with enhanced validation - Add PUT /api/users/:id endpoint - Integrate form with existing UserProfile component Validation improvements: - Email format validation with regex - Display name length constraints (3-50 chars) - Real-time validation feedback Users can now update their display name, email, and bio. Closes #234 ``` ```bash # 6. 強制push（PRを更新） git push --force-with-lease ``` ## 例3: 独立した機能追加（新規コミット） ### シナリオ ユーザープロフィール編集機能の実装後、別途「プロフィール画像アップロード」機能を追加することになった ### 手順 ```bash # 1. 現在のコミット確認 git log --oneline --graph origin/main..HEAD # * a1b2c3d feat: add user profile editing feature # 2. プロフィール画像アップロード機能を実装 # ... # 3. 戦略判断: 既存コミットとは独立した機能 → 新規コミット # 4. 新規コミット作成 git add -A git commit ``` ### gitコミットメッセージ ``` feat: add profile picture upload Implement profile picture upload functionality: - Add image upload component with drag-and-drop - Add POST /api/users/:id/avatar endpoint - Add image cropping and preview - Store images in cloud storage Supports JPEG, PNG, and WebP formats up to 5MB. Closes #235 ``` ```bash # 5. 結果確認 git log --oneline --graph origin/main..HEAD # * e4f5g6h feat: add profile picture upload # * a1b2c3d feat: add user profile editing feature ``` ## 例4: WIPコミットの整理（Interactive Rebase） ### シナリオ 開発中に多数の小さなコミットを作成してしまった。PR作成前に整理したい。 ### 現状のコミット履歴 ```bash git log --oneline --graph origin/main..HEAD # * h7i8j9k WIP: fix typo # * e4f5g6h WIP: add validation # * b2c3d4e feat: add profile form # * y9z0a1b WIP: experiment with layout # * v6w7x8y feat: add user model # * s3t4u5v fix: import statement ``` ### 手順 ```bash # 1. Interactive rebaseを開始 git rebase -i origin/main # 2. エディタが開く ``` ### エディタでの編集 変更前： ``` pick v6w7x8y feat: add user model pick s3t4u5v fix: import statement pick y9z0a1b WIP: experiment with layout pick b2c3d4e feat: add profile form pick e4f5g6h WIP: add validation pick h7i8j9k WIP: fix typo ``` 変更後： ``` pick v6w7x8y feat: add user model squash s3t4u5v fix: import statement drop y9z0a1b WIP: experiment with layout pick b2c3d4e feat: add profile form squash e4f5g6h WIP: add validation squash h7i8j9k WIP: fix typo ``` ### 保存後の編集 2つのコミットメッセージを編集： **1つ目のコミット：** ``` feat: add user profile model Define user profile data structure with TypeScript: - User interface with profile fields - Profile validation schema - Type-safe profile operations Includes display name, email, bio, and avatar URL. ``` **2つ目のコミット：** ``` feat: add profile editing form Implement profile editing UI component: - Form layout with Material-UI - Real-time field validation - Success/error feedback Users can update their profile information with immediate validation. ``` ### 結果確認 ```bash git log --oneline --graph origin/main..HEAD # * m1n2o3p feat: add profile editing form # * j4k5l6m feat: add user profile model # クリーンな履歴に整理された！ ``` ## 例5: 複数機能の段階的実装 ### シナリオ 大きな機能「認証システム」を、Model → API → UIの順で段階的に実装 ### 手順 #### ステップ1: モデル実装 ```bash # 実装... git add src/models/ git commit -m "feat: add authentication model Define authentication data structures: - User model with credentials - JWT token interface - Session management types Provides type-safe authentication operations." git push ``` #### ステップ2: API実装 ```bash # 実装... git add src/api/auth.ts git commit -m "feat: add authentication API endpoints Implement authentication REST API: - POST /api/auth/login - User login - POST /api/auth/logout - User logout - POST /api/auth/refresh - Token refresh - GET /api/auth/me - Get current user Uses JWT for secure token-based authentication." git push ``` #### ステップ3: UI実装 ```bash # 実装... git add src/components/auth/ git commit -m "feat: add authentication UI components Implement authentication user interface: - LoginForm component with validation - Protected route wrapper - Session persistence - Auto token refresh Provides complete authentication UX." git push ``` ### 最終的な履歴 ```bash git log --oneline --graph origin/main..HEAD # * q5r6s7t feat: add authentication UI components # * n2o3p4q feat: add authentication API endpoints # * k8l9m0n feat: add authentication model # 各コミットが独立してレビュー可能 # 各コミットが単独でビルド・テスト可能 ``` ## 例6: バグ修正とテスト追加 ### シナリオ バグを発見し、修正とテストを同時に実施 ### 手順 ```bash # 1. 現在の作業を確認 git status # On branch fix/validation-bug # 2. バグ修正とテスト追加 # src/utils/validation.ts を修正 # src/utils/validation.test.ts を追加 # 3. コミット git add -A git commit ``` ### gitコミットメッセージ ``` fix: correct email validation regex Fix email validation to properly handle plus signs (+) in addresses. Previously, emails like "user+tag@example.com" were incorrectly rejected. Changes: - Update regex pattern to include + character - Add comprehensive test cases for edge cases Closes #456 ``` ## まとめ これらの例から学べる重要なポイント： 1. **適切な戦略選択**: シナリオに応じてSquash/新規gitコミット/Rebaseを使い分け 2. **明確なメッセージ**: 「なぜ」その変更が必要だったのかを記述 3. **論理的な単位**: 各gitコミットが独立して理解できる粒度 4. **継続的な改善**: レビューフィードバックを反映して品質向上 これらの原則に従うことで、チーム全体の生産性が向上します。