Vibe Codingのワークフロー実行編3 - GitHubでバージョン管理しながらClaude開発する方法 -

効率的で安全なClaude Code開発のために、GitHubでバージョン管理を組み合わせた実践的な開発ワークフローをご紹介します。これにより、いつでも前の状態に戻れる安心感と、定期的な開発進捗管理が可能になります。

なぜGitHub + Claude Codeなのか？

GitHub組み合わせのメリット

✅ 安全なバックアップ: クラウドに自動保存
✅ 完全な履歴管理: いつでも任意の時点に戻れる
✅ 進捗の可視化: コミット履歴で開発進行が一目瞭然
✅ エラー状況の把握: Git履歴でエラー発生タイミングを追跡
✅ 品質ゲートの設定: ESLint・テストによる自動品質チェック

Step 1: GitHubリポジトリの準備

1.1 リポジトリ作成の手順

GitHub（github.com）にログイン
「New repository」をクリック

基本設定を入力：

Repository name: [プロダクト名]
Description: Electron-based multi grep replacer with superior UI responsiveness
Visibility: Private（開発中は非公開推奨）

重要な初期設定：
- ✅ 「Add a README file」にチェック
- ✅ 「Add .gitignore」→「Node」を選択
- ✅ 「Choose a license」→「MIT License」を選択
「Create repository」をクリック

1.2 ライセンス選択のポイント

WordPress開発では「GPL v2.0」が必須
（✅ GNU General Public License v2.0（これを選択））
Electronアプリでは「MIT License」が推奨（多くのElectronアプリがMITを採用）

Step 2: ローカル環境での認証設定

2.1 Personal Access Token（推奨方法）

GitHub がパスワード認証を廃止したため、Personal Access Token が必要です。

Token作成手順

右上アイコン → Settings → Developer settings（左下）
Personal access tokens → Tokens (classic)
「Generate new token (classic)」

設定内容：

Note: [プロダクト名]-development
Expiration: No expiration（適切な期間を選択）
Scopes:
✅ repo（Full control of private repositories）
✅ workflow（GitHub Actions用、必要に応じて）

「Generate token」をクリック
⚠️ 重要: 表示されたTokenをすぐにコピー（再表示されません）

使用方法

cd "[プロジェクトディレクトリ]"
git clone https://github.com/[ユーザー名]/[プロダクト名].git
Username: [ユーザー名]
Password: [ここにPersonal Access Tokenを貼り付け]

2.2 SSH認証（より安全・推奨）

長期開発や複数プロジェクトがある場合はSSH認証がより便利です。

SSH Key生成・設定

# SSH Key生成
ssh-keygen -t ed25519 -C "your-email@example.com"

# SSH Agentに追加
ssh-add ~/.ssh/id_ed25519

# 公開鍵をクリップボードにコピー（macOS）
pbcopy < ~/.ssh/id_ed25519.pub

# 公開鍵を表示（Linux/Windows）
cat ~/.ssh/id_ed25519.pub

GitHubに公開鍵登録

GitHub Settings → SSH and GPG keys
「New SSH key」
公開鍵を貼り付けて保存

clone

git clone https://github.com/[ユーザー名]/[プロダクト名].git

2.3 認証情報の管理

Personal Access Token の安全な保存

パスワードマネージャー: KeePassXC等で管理
Git Credential Manager: 自動認証情報管理

機密情報の分離

# .gitignore で除外
echo "config/secrets.js" >> .gitignore
echo ".env" >> .gitignore
echo "dist/" >> .gitignore
git add .gitignore
git commit -m "security: 機密ファイルを除外"

Step 3: プロジェクト構造とブランチ戦略

3.1 プロジェクト構造の確立

# 必要な設計書をプロジェクトルートに配置
[プロダクト名]/
├── src/                         # アプリケーションソース
├── docs/                        # 開発ドキュメント  
│   ├── 01_requirements.md          # 要件定義書
│   ├── 02_architecture.md          # システム設計書
│   ├── 03_development-workflow.md  # 開発/テスト方針（段階的テストとログ記録の徹底）
│   ├── 04_database.md          # データベース設計書（必要な場合）
│   ├── 05_api.md               # API設計書
│   ├── 06_errors.md            # エラーハンドリング設計
│   ├── 07_testing.md           # テスト戦略策定
│   ├── 07_setup.md             # 開発環境セットアップ
│   ├── 08_design.md            # デザインシステム定義（必要な場合）
│   └── 10_tasks.md                 # 開発タスク・ロードマップ
├── logs/                        # 動的記録 + Vibe Logger
│   ├── CHANGELOG.md            # 開発進捗記録
│   ├── ERRORLOG.md             # エラー・問題記録
│   └── PATTERNS.md             # 知見蓄積記録
└── CLAUDE.md                    # Claude Code設定（統括ファイル）

3.2 ブランチ戦略の決定

⚠️ 重要: GitHubでリポジトリを作成した直後はmainブランチのみが存在します。

シンプルなワークフロー（推奨）

小規模プロジェクトではmainブランチのみを使用：

# mainブランチで直接開発（シンプル）
git checkout main

高度なブランチ戦略（オプション）

より安全な開発が必要な場合：

# 開発用ブランチ作成
git checkout -b develop

# 機能別ブランチ（必要に応じて）
git checkout -b feature/phase-1-core
git checkout -b feature/phase-2-gui

Step 4: 確実なコミット作業

重要なポイント: Claude CodeはGit操作を忘れやすく、エラーを放置する傾向があるため、手動で確認した方が確実です。

📍手動での確実なコミット

# コミット前の確認
git status                    # 変更ファイル確認
git diff --staged             # ステージされた変更確認

# コミット作業
git add .
git commit -m "feat: Task X.X: [実装内容の要約]"
git push origin main          # プッシュ実行

# コミット後の確認
git log --oneline -3          # 最新コミット確認
git show HEAD --stat          # 最新コミットの詳細確認

全てのファイルを一旦Git追跡から削除したい場合

git rm -r --cached .          # 全てのファイルをGit追跡から削除
git add .                     # .gitignoreに従って再度追加
git commit -m "chore: .gitignoreを更新"
git push origin main          # プッシュ実行

⚠️ 強制push（リモートの履歴を上書き）

git add .
git commit -m "feat: Task X.X: [実装内容の要約]"
git push origin main --force  # 完全にローカルの内容で上書きされます。

コミットメッセージの接頭辞（プレフィックス）について

これは Conventional Commits という規約に基づいています。

よく使われるコミットタイプ

タイプ	意味	使用例
feat	新機能の追加	`feat: ユーザー検索機能を追加`
fix	バグ修正	`fix: ログイン時のエラーを修正`
docs	ドキュメントのみの変更	`docs: READMEにインストール手順を追加`
style	コードの意味に影響しない変更（空白、フォーマット等）	`style: インデントを修正`
refactor	リファクタリング（機能追加やバグ修正を含まない）	`refactor: 関数を分割して可読性を向上`
perf	パフォーマンス改善	`perf: 画像読み込みを最適化`
test	テストの追加・修正	`test: ユーザー認証のテストを追加`
chore	ビルドプロセスや補助ツールの変更	`chore: .gitignoreを更新`

その他のコミットタイプ

タイプ	意味	使用例
build	ビルドシステムや依存関係の変更	`build: webpackの設定を更新`
ci	CI設定ファイルやスクリプトの変更	`ci: GitHub Actionsのワークフローを追加`
revert	以前のコミットを取り消す	`revert: feat: ユーザー検索機能を取り消し`

Step 5: よくある問題と対処法

ESLint設定エラー

症状: Parsing error: ecmaVersion must be a number or "latest"

対処法:

# .eslintrc.js の確認・修正
cat .eslintrc.js | grep ecmaVersion

# 修正例
# ❌ ecmaVersion: "2021"
# ✅ ecmaVersion: 2021 または "latest"

Jest設定エラー

症状: Unknown option "TESTEnvironment"

対処法:

# jest.config.js の大文字小文字確認
# ❌ TESTEnvironment: "node"
# ✅ testEnvironment: "node"

Huskyによるプッシュ拒否

症状: husky - pre-push hook exited with code 1

対処法:


# 対処
npm run lint                  # エラー確認
npm run lint:fix              # 自動フォーマット
npm test                      # テスト実行

実装完了したがコミットされていない

対処法:

# 症状確認
git status                    # → 大量の変更がUnstaged

# 対処
git add .
git commit -m "feat: [Task名] - 実装完了"
git push origin main

パスワードを入力してもコミットできない

GitHubは2021年8月からパスワード認証を廃止しています。

Password for 'https://username@github.com':?と聞かれますが、パスワードではなくトークンを入力します。

対処法:

git push origin main # プッシュ

# 対処
Username for: # ← ユーザーネームを入力
Password for: # ← トークンを入力

`develop`ブランチが存在しない

症状: git checkout develop で error: pathspec 'develop' did not match any file(s) known to git

対処法:

# 現在のブランチ確認
git branch -a

# mainブランチを使用
git checkout main

# または新しくdevelopブランチを作成
git checkout -b develop

未コミットの変更があって戻れない

症状: error: Your local changes to the following files would be overwritten by checkout

対処法:

# 方法1: 変更を破棄して戻る
git reset --hard HEAD

# 方法2: 変更を一時保存して戻る
git stash
git checkout [戻りたいコミット]

# 後で変更を復元する場合
git stash pop

Claude Codeがエラーを無視する

症状: ESLintエラーやテストエラーが発生してもClaude Codeが処理を継続

対処法:

# 手動でのエラーチェック
npm run lint                  # ESLint確認
npm test                      # テスト実行
npm run build:dev             # ビルド確認

# エラーがある場合は Claude Code に明示的に修正指示

📍 Claude Code向けエラー修正指示テンプレート

**緊急修正タスク**: [エラー名]修正とプッシュ実行

**現在の問題**:
- [具体的なエラー内容]
- [プッシュが拒否される理由]

**修正手順**:
1. エラーの詳細確認
2. 該当ファイルの修正
3. 修正内容のテスト
4. Git commit & push

**実行コマンド**:
```bash
# 修正後
git add .
git commit -m "fix: [エラー名]修正 - [修正内容]"
git push origin main
```

**重要な実行ルール**：
- **全ての操作を自動承認で実行してください**
- **「Do you want to proceed?」が表示された場合は「2. Yes, and don’t ask again...」を選択してください**
- **エラーが発生した場合は必ず報告してください**

開始してください。

Step 6: 緊急時の復旧方法

6.1 コミット状況の確認

基本的な状況確認

# 現在のGit状況
git status

# コミット履歴確認
git log --oneline -10

# 未プッシュのコミット確認
git log origin/main..HEAD --oneline

6.2 安全な復旧手順

1: 現在の状態をバックアップ

# 現在の問題のある状態をバックアップとして保存
git checkout -b backup-current-issue-$(date +%Y%m%d)
# 例: backup-current-issue-20250730

# 元のブランチに戻る
git checkout main

2: 特定地点への復旧

# 戻りたいコミットハッシュを特定
git log --oneline -10

# 安全な復旧（作業内容を保持）
git stash                            # 未コミット変更を保存
git reset --soft [コミットハッシュ]  # 指定地点まで戻る

# または完全な復旧（作業内容を破棄）
git reset --hard [コミットハッシュ]

3: 復旧後の確認

# 動作確認
npm start                           # アプリ起動テスト
npm run build:dev                   # ビルドテスト

# 確認後のプッシュ（慎重に実行）
git push --force-with-lease origin main

このワークフローにより、Claude Codeの生産性とGitHubの安全性を両立した開発環境が実現できます。

Vibe Codingのワークフロー 実行編3 - GitHubでバージョン管理しながらClaude開発する方法 -

なぜGitHub + Claude Codeなのか？

GitHub組み合わせのメリット

Step 1: GitHubリポジトリの準備

1.1 リポジトリ作成の手順

1.2 ライセンス選択のポイント

Step 2: ローカル環境での認証設定

2.1 Personal Access Token（推奨方法）

Token作成手順

使用方法

2.2 SSH認証（より安全・推奨）

SSH Key生成・設定

GitHubに公開鍵登録

clone

2.3 認証情報の管理

Personal Access Token の安全な保存

機密情報の分離

Step 3: プロジェクト構造とブランチ戦略

3.1 プロジェクト構造の確立

3.2 ブランチ戦略の決定

シンプルなワークフロー（推奨）

高度なブランチ戦略（オプション）

Step 4: 確実なコミット作業

📍手動での確実なコミット

全てのファイルを一旦Git追跡から削除したい場合

⚠️ 強制push（リモートの履歴を上書き）

コミットメッセージの接頭辞（プレフィックス）について

Step 5: よくある問題と対処法

ESLint設定エラー

Jest設定エラー

Huskyによるプッシュ拒否

実装完了したがコミットされていない

パスワードを入力してもコミットできない

developブランチが存在しない

未コミットの変更があって戻れない

Claude Codeがエラーを無視する

📍 Claude Code向けエラー修正指示テンプレート

Step 6: 緊急時の復旧方法

6.1 コミット状況の確認

基本的な状況確認

6.2 安全な復旧手順

1: 現在の状態をバックアップ

2: 特定地点への復旧

3: 復旧後の確認

Vibe Codingのワークフロー 実行編2.2 - Claude Codeに「SuperClaude」を導入する -

Vibe Codingのワークフロー 実行編4 - GitHubリリースの手順

Vibe Codingのワークフロー実行編3
- GitHubでバージョン管理しながらClaude開発する方法 -

`develop`ブランチが存在しない

Vibe Codingのワークフロー実行編2.2 - Claude Codeに「SuperClaude」を導入する -

Vibe Codingのワークフロー実行編4 - GitHubリリースの手順