gh-getty104-claude-code-marketplace-getty104/skills/high-quality-commit/examples.md

High Quality Commit - Examples

このドキュメントでは、実際の開発シナリオでの具体的な使用例を示します。

例1: 初回実装でのgitコミット

シナリオ

新機能「ユーザープロフィール編集」を実装し、初めてgit commitする

手順

# 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作成後、レビューで「バリデーションロジックを改善してください」という指摘を受けた

手順

# 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

# 6. 強制push（PRを更新）
git push --force-with-lease

例3: 独立した機能追加（新規コミット）

シナリオ

ユーザープロフィール編集機能の実装後、別途「プロフィール画像アップロード」機能を追加することになった

手順

# 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

# 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作成前に整理したい。

現状のコミット履歴

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

手順

# 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.

結果確認

git log --oneline --graph origin/main..HEAD
# * m1n2o3p feat: add profile editing form
# * j4k5l6m feat: add user profile model

# クリーンな履歴に整理された！

例5: 複数機能の段階的実装

シナリオ

大きな機能「認証システム」を、Model → API → UIの順で段階的に実装

手順

ステップ1: モデル実装

# 実装...

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実装

# 実装...

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実装

# 実装...

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

最終的な履歴

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: バグ修正とテスト追加

シナリオ

バグを発見し、修正とテストを同時に実施

手順

# 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. 継続的な改善: レビューフィードバックを反映して品質向上

これらの原則に従うことで、チーム全体の生産性が向上します。