Claude CodeとVS Codeを組み合わせる基本
はじめに
Claude Code はターミナルベースのツールですが、VS Code と組み合わせることで、効率的な開発ワークフローが実現できます。本記事では、基本的な組み合わせ方を解説します。
基本ワークフロー
【Step 1】VS Code でプロジェクトを開く
【Step 2】Claude Code でコード修正
【Step 3】VS Code で diff を確認
【Step 4】VS Code のターミナルで git commit
【Step 5】テスト・ビルド
Step 1：VS Code でプロジェクトを開く
方法
# PowerShell から
code C:\Projects\my-app
# または VS Code のメニューから
File → Open Folder → フォルダ選択
確認すべき項目
✅ .git フォルダが見える
✅ src / main.py など作業対象ファイルが見える
✅ README.md がある
✅ .gitignore がある
Step 2：Claude Code でコード修正
Claude Code の実行
Claude Code CLI で実行
（または VS Code の拡張機能から実行）
結果：
ファイルが自動修正される
Claude Code の出力を確認
VS Code のコンソール / ターミナル で
「修正内容」を表示
Step 3：VS Code で diff を確認
方法1：Git の Source Control パネル
VS Code 左パネル → Source Control
↓
変更されたファイル一覧が表示
↓
各ファイルをクリック → diff 表示
方法2：ターミナルで確認
git diff
# または特定ファイル
git diff src/main.py
確認すべき項目
✅ 変更行が意図通りか
✅ 削除すべき行が削除されているか
✅ 追加すべき行が追加されているか
✅ 不要な変更がないか
Step 4：VS Code のターミナルで commit
ターミナルの開き方
VS Code 下部 → Terminal
（または Ctrl + `）
提案される手順
# 1. ステージング
git add src/main.py
# 2. diff 確認（最終確認）
git diff --cached
# 3. コミット
git commit -m "Fix: function A performance"
Step 5：テスト・ビルド
VS Code のターミナルで実行
# テスト
npm test
# ビルド
npm run build
# ローカルサーバー
npm start
実装例：一連の流れ
例：関数の最適化
【VS Code】
- プロジェクトを開く
- README で目的確認
- function_a.py を確認
【Claude Code】
claude-code --file src/function_a.py
「関数 A の処理時間を 50% 短縮。出力は同じ」
【VS Code】
- diff で修正内容確認 ✅
- ターミナルで git status
- git diff で最終確認
- git add / commit
【テスト】
npm test で動作確認 ✅
よくある失敗
❌ 失敗例1：VS Code を更新せず確認
Claude Code で修正
↓
VS Code で古いバージョンのファイルを見ている
↓
diff が見えない
↓
誤認識
✅ 改善例
VS Code ウィンドウをアクティブにする
↓
ファイルが自動更新
↓
正確な diff を確認
❌ 失敗例2：diff を確認せずコミット
Claude Code で修正
↓
すぐに commit
↓
意図しない変更を含む
↓
後で気づく
✅ 改善例
必ず diff を確認
↓
OK なら commit
↓
NG なら修正
まとめ
Claude Code と VS Code の組み合わせ：
基本ワークフロー：
- VS Code で開く
- Claude Code で修正
- VS Code で diff 確認
- ターミナルで commit
- テスト・ビルド実行
重要ポイント：
- diff 確認を絶対に省略しない
- ターミナルで段階的に実行
- テストで動作確認
安全で効率的な開発が実現します。
Claude Codeで安全に作業するためのGit準備と合わせることで、確実な開発ワークフローが構築できます。