こんにちは、TAKUです。
普段は営業として外回りをしながら、副業としてFlaskアプリやElectronアプリを個人開発しています。AI活用が当たり前になった今、コードを書く機会が一気に増えました。
そこで避けて通れないのが 「バージョン管理」 です。
「昨日まで動いていたのに、今日触ったら動かなくなった」「複数の機能を並行して試したい」「会社PCと自宅PCで同じプロジェクトを触りたい」――こういう悩みを全部解決してくれるのがGitです。
この記事では、Git の基礎 → VS Code との連携 → Claude を使った開発フロー までを通しでまとめました。同じように本業の傍らでアプリ開発をしている人の参考になれば嬉しいです。
第1章: Gitとは何か
Gitは ファイルの変更履歴を記録・管理するツール です。
例えるなら「無限のUndo機能付きセーブポイントシステム」。以下のことができます。
- いつ・誰が・何を変更したか記録
- 過去の任意の時点に戻せる
- 複数の機能を並行して開発できる(ブランチ)
- 他の人と安全に共同作業できる
副業でアプリ開発する人にとって特に大きいのは 「思い切ったコード変更ができるようになる」 こと。失敗してもすぐ元に戻せる安心感は、開発スピードに直結します。
第2章: 最初のセットアップ(一度だけ)
Gitをインストールしたら、自分の情報を登録します。
# 名前とメールアドレスを設定(コミット履歴に残る)
git config --global user.name "TAKU"
git config --global user.email "your-email@example.com"
# デフォルトブランチ名をmainに(現在の標準)
git config --global init.defaultBranch main
# 設定確認
git config --listポイント: メールアドレスはGitHubで登録するものと揃えておきましょう。後でGitHub連携した時にコミットが「自分のもの」として認識されます。
第3章: 基本の流れ ― 3つのエリアを理解する
Gitの最重要概念です。ファイルは3つの場所を移動します。
[作業ディレクトリ] → [ステージング] → [リポジトリ]
実際のファイル コミット予定の箱 履歴として保存
│ │ │
│ git add │ git commit │
└─────────────────>└─────────────────>│なぜ「ステージング」が間にあるのか? → コミットしたい変更だけを選べるからです。10個ファイルを編集しても、関連する3個だけまとめてコミットできます。
これに気付いたとき「あ、Gitって賢いな」と思いました。
第4章: プロジェクトを始める
例として myapp というFlaskプロジェクトを管理してみましょう。
# プロジェクトフォルダを作成して移動
mkdir myapp
cd myapp
# Gitリポジトリとして初期化(.gitフォルダができる)
git init
# 最初のファイルを作成
echo "print('Hello')" > app.py
# 現在の状態を確認(これを頻繁に使います)
git statusgit status の出力:
Untracked files:
app.py「app.pyはまだGitに認識されてないよ」という意味です。
第5章: 変更を記録する(add → commit)
# ステージングに追加
git add app.py
# 全ての変更をまとめて追加する場合
git add .
# コミット(履歴として確定)
git commit -m "最初のコミット: Hello表示のapp.py追加"
# 履歴を確認
git logコミットメッセージの書き方のコツ
良い例:
feat: ユーザー認証機能を追加fix: 日本語パスでの文字化けを修正refactor: app.pyをモジュール分割
悪い例:
更新修正aaa
3ヶ月後の自分が読んで分かるように書く――これだけ守れば十分です。
第6章: .gitignore ― 管理しないファイルを指定
機密情報や自動生成ファイルは絶対にGitに入れません。プロジェクトルートに .gitignore を作成。
Flask/Python/Electronプロジェクト向けの例:
# Python
__pycache__/
*.pyc
venv/
.env
# Electron / Node
node_modules/
dist/
build/
# IDE
.vscode/
.idea/
# OS
Thumbs.db
.DS_Store
# 機密情報
config.local.json
*.key重要: APIキーやパスワードを書いた .env ファイルは絶対にコミットしないでください。一度コミットすると履歴に残り、削除しても完全には消えません。GitHubに公開した瞬間、世界中から見えます。
第7章: ブランチ ― 並行開発の核心
ブランチは「履歴を枝分かれさせる機能」です。
使うシーン
- 本番コードを壊さずに新機能を試したい
- 複数の機能を並行開発
- バグ修正と機能追加を分けたい
# 現在のブランチ一覧を確認
git branch
# 新しいブランチを作って移動(よく使うコマンド)
git switch -c feature/login
# 作業して、コミット
echo "def login(): pass" >> app.py
git add .
git commit -m "feat: ログイン関数のスケルトン追加"
# mainブランチに戻る
git switch main
# featureブランチの内容をmainに統合(マージ)
git merge feature/login
# 不要になったブランチを削除
git branch -d feature/loginブランチのイメージ:
main: A --- B --- C ----------- M
\ /
feature: D --- E --- (mergeで合流)第8章: 過去に戻る方法
直前のコミット内容を確認
git log --oneline # 1行ずつ簡潔に表示
git show HEAD # 直前のコミット詳細ファイルの変更を取り消す
# 作業ディレクトリの変更を破棄(まだaddしていない場合)
git restore app.py
# ステージングから取り下げる(addは取り消すが変更は残す)
git restore --staged app.py
# 直前のコミットをやり直す(メッセージ修正など)
git commit --amend -m "新しいメッセージ"過去のコミットに戻る
# 安全な方法: 履歴を残したまま打ち消す
git revert <コミットID>
# 強力だが危険: 履歴ごと巻き戻す(共有前のみ使用)
git reset --hard <コミットID>第9章: GitHubとの連携(リモートリポジトリ)
PCのローカルだけでなく、クラウド(GitHub)にも保存することで、バックアップ・共有・複数PC同期ができます。
会社PC↔自宅PC間の同期にも有効です。
# GitHubで作ったリポジトリを登録
git remote add origin https://github.com/yourname/myapp.git
# ローカルの内容をアップロード(初回は -u を付ける)
git push -u origin main
# 2回目以降
git push
# リモートの最新変更を取得
git pull第10章: 実践的なワークフロー例
例えば「app.py」に新機能を追加する流れを通しで示します。
# 1. 最新状態に更新
git switch main
git pull
# 2. 機能用ブランチを作成
git switch -c feature/rss-source-add
# 3. コードを編集して動作確認
# (追加機能の実装)
# 4. 状態確認
git status
git diff # 変更内容を表示
# 5. コミット
git add app.py templates/sources.html
git commit -m "feat: 追加UI実装"
# 6. さらに改善
git add .
git commit -m "fix: ソース重複登録のバリデーション"
# 7. GitHubにアップ
git push -u origin feature/rss-source-add
# 8. mainにマージ(GitHubのPull Request経由がおすすめ)
git switch main
git merge feature/rss-source-add
git push
# 9. ブランチ削除
git branch -d feature/rss-source-addこのサイクルが回り始めると、開発が一気に楽しくなります。
第11章: よく使うコマンド一覧
| コマンド | 用途 |
|---|---|
git status | 現在の状態確認(毎回打つ) |
git diff | 変更内容を表示 |
git log --oneline --graph | 履歴を視覚的に表示 |
git add <file> | ステージングに追加 |
git commit -m "msg" | コミット |
git switch <branch> | ブランチ切替 |
git switch -c <branch> | ブランチ作成+切替 |
git merge <branch> | ブランチを統合 |
git pull | リモートから取得 |
git push | リモートに送信 |
git stash | 作業を一時退避 |
第12章: トラブル時の頼れる味方
# 作業中に急に別ブランチに切り替えたい時
git stash # 一時退避
git switch other-branch
# 作業後...
git switch original-branch
git stash pop # 退避した変更を戻す
# 操作を間違えた時の救世主(全ての操作履歴を表示)
git refloggit reflog は 「やらかした時の最後の頼み綱」 です。reset –hardで消したコミットも、ここから復元できます。
- 第1章: Gitとは何か
- 第2章: 最初のセットアップ(一度だけ)
- 第3章: 基本の流れ ― 3つのエリアを理解する
- 第4章: プロジェクトを始める
- 第5章: 変更を記録する(add → commit)
- 第6章: .gitignore ― 管理しないファイルを指定
- 第7章: ブランチ ― 並行開発の核心
- 第8章: 過去に戻る方法
- 第9章: GitHubとの連携(リモートリポジトリ)
- 第10章: 実践的なワークフロー例
- 第11章: よく使うコマンド一覧
- 第12章: トラブル時の頼れる味方
- 第2部: VS Code内蔵Gitでエディタ完結のワークフローを作る
- 第3部: VS Code × Claude で「AIペアプログラミング」環境を作る
- 第4部: GitとClaudeを組み合わせた最強ワークフロー
第2部: VS Code内蔵Gitでエディタ完結のワークフローを作る
ここまでコマンドで説明してきましたが、正直「毎回コマンド打つのめんどくさい」と思いませんでしたか?
実は VS CodeのGit機能を使えば、ほぼコマンドラインに戻る必要がなくなります。
第13章: VS Code × GitHub 連携 ― 全体像
主に3つの紐づけが必要です。
[VS Code] ──①── [Git本体] ──②── [GitHub認証] ──③── [リモートリポジトリ]
エディタ コマンド アカウント連携 クラウド保存先①Gitのインストール → ②GitHubアカウント連携 → ③リポジトリ作成・接続、の順で進めます。
第14章: VS CodeにGitHubアカウントを連携
操作手順
- VS Code左下の 人型アイコン(アカウント) をクリック
- または
Ctrl + Shift + P→Sign in to GitHubと入力
- または
- 「Sign in with GitHub」 を選択
- ブラウザが自動で開き、GitHubのログイン画面が表示される
- GitHubにログイン → 「Authorize Visual-Studio-Code」 をクリック
- ブラウザに「Visual Studio Code を開きますか?」と表示 → 「開く」
- VS Codeに戻ると、左下にGitHubユーザー名が表示されれば成功
認証情報の保存
毎回パスワードを聞かれないように:
# 既に設定されているか確認
git config --global credential.helper
# Windowsの場合
git config --global credential.helper manager
# Macの場合
git config --global credential.helper osxkeychain第15章: 既存プロジェクトをGitHubに上げる(VS Codeだけで)
ここからが本題。コマンドを一切打たずにGitHubに公開する手順です。
- VS Codeでプロジェクトフォルダを開く
File → Open Folderでmyappを選択
- 左サイドバーのソース管理アイコン(枝分かれマーク)をクリック
- ショートカット:
Ctrl + Shift + G
- ショートカット:
- 「Initialize Repository」 ボタンをクリック
- これで
git initが実行される
- これで
- ファイルの変更が一覧表示されるので、各ファイル横の + をクリックしてステージング
- 一括でやるなら「Changes」横の +
- メッセージ欄にコミットメッセージを入力
初回コミット: プロジェクト初期化- 「Commit」ボタン(✓マーク)をクリック
- 「Publish Branch」ボタンが出現するのでクリック
- ここでGitHubに新リポジトリが作られる
- ダイアログで選択
Publish to GitHub public repository(公開)Publish to GitHub private repository(非公開 ← 個人開発はこっち)
- リポジトリ名を確認して Enter
完了です。GitHubのページに行くと、myapp リポジトリが作られています。
この感動は実際に体験してほしい。 ターミナルで何行もコマンド打ってた作業が、ボタン数回で終わります。
第16章: VS Code 上での日常操作
画面構成(ソース管理ビュー)
┌─────────────────────────────┐
│ メッセージ欄(コミットメッセージ)│
├─────────────────────────────┤
│ [✓ Commit] [↻ Sync] │ ← ボタン
├─────────────────────────────┤
│ ▼ Staged Changes (2) │ ← addされた変更
│ M app.py │
│ A config.json │
├─────────────────────────────┤
│ ▼ Changes (3) │ ← 未add の変更
│ M templates/index.html │
│ M static/style.css │
│ U new_feature.py │
└─────────────────────────────┘記号の意味:
- M (Modified): 変更されたファイル
- A (Added): 新規追加
- D (Deleted): 削除
- U (Untracked): 新規ファイル(未追跡)
基本操作の流れ
- 変更内容を確認: ファイル名をクリックすると、左右に「変更前 vs 変更後」が表示される(差分ビュー)。
- ステージング: ファイル横の + アイコンをクリック。
- コミット: メッセージ入力 → ✓ Commit ボタン。
- プッシュ: コミット後、「Sync Changes」 ボタンをクリック。
ステータスバー(画面最下部)の見方
🔀 main ↓2 ↑1 ⚠ 0 ⓘ 0main: 現在のブランチ名↓2: GitHubから取得していない変更が2件↑1: ローカルにあるがGitHubに送ってないコミットが1件
クリックすれば対応する操作が走ります。
第17章: ブランチ操作もGUIで
ブランチを作る 左下の main をクリック → Create new branch → ブランチ名入力
ブランチを切り替える 左下の main をクリック → 切り替えたいブランチを選択
マージする コマンドパレット (Ctrl + Shift + P) → Git: Merge Branch → マージ元を選択
これだけで、ブランチ運用の全機能が使えます。
第18章: 入れておくべき拡張機能
GitLens(必須級)
- 各行に「誰がいつ変更したか」を表示
- コミット履歴をビジュアル表示
- ファイル履歴を時系列で追える
Git Graph
- コミット履歴を樹形図で美しく表示
- ブランチの分岐・マージが一目瞭然
Git History
- ファイルごとの変更履歴を見やすく表示
これらを入れると、「自分が何をしたのか」が圧倒的に分かりやすくなります。
第3部: VS Code × Claude で「AIペアプログラミング」環境を作る
ここからが本記事のクライマックス。Gitで安全網を張った上で、Claudeにコーディングを任せるフェーズです。
第19章: VS Code × Claude の連携方法
主に3つの選択肢があります。
| 方法 | 特徴 | おすすめ度 |
|---|---|---|
| Claude Code拡張機能 | Anthropic公式・ターミナル統合・エージェント機能 | ★★★ |
| Cline (拡張機能) | 自律的にコード編集・ファイル操作 | ★★ |
| Continue (拡張機能) | 軽量・チャット中心・Ollamaも繋げる | ★★ |
副業でAIアプリ開発する人なら、Claude Code が最も強力でおすすめ。Flaskアプリ全体を理解させて、複数ファイルを横断した修正を任せられます。
第20章: Claude Code とは
Anthropic公式のVS Code拡張で、Claudeがエディタ上で直接コードを読み・書き・編集してくれる「エージェント型」のツールです。
ターミナル版と同じClaude Codeエージェントが、プロジェクト全体を読んで、ファイルを編集し、コマンドを実行し、新しいファイルを作成します。すべてVS Code内で完結し、ファイルが変更される前に差分ビューが表示されるので安心です。
第21章: セットアップ
事前準備
| 項目 | 要件 |
|---|---|
| VS Code | 最新版(1.98.0以上推奨) |
| Node.js | 18以上 |
| Claudeアカウント | Claude.ai有料プラン または APIクレジット |
Claude Code CLI のインストール
npm install -g @anthropic-ai/claude-code確認:
claude --versionVS Code拡張機能のインストール
- VS Codeを開く
- 左サイドバーの拡張機能アイコンをクリック(
Ctrl + Shift + X) - 検索バーに
Claude Codeと入力 - Anthropic社が公式発行しているものを選択
- 「Install」 をクリック
サインイン
- 左サイドバーのClaude Codeアイコンをクリック
- 認証画面で 「Claude.ai Subscription」 を選択
- ブラウザが開く → ログイン → 「Authorize」
- VS Codeに戻ると認証完了
第22章: 基本的な使い方
ファイルを指定して質問
プロンプト内で @ を入力すると、プロジェクト内の任意のファイルを参照できます。
例:
@app.py のログイン関数にバリデーションを追加して。
必須パラメータが欠けてたら明確なエラーメッセージを投げるように。差分レビュー(ここが最重要)
変更が適用される前に差分ビューが表示されます。
流れ:
1. Claudeが「こう変更します」と差分を表示
↓
2. 緑(追加)・赤(削除)で視覚的に確認
↓
3. [Accept] [Reject] [Revise] を選択
↓
4. Acceptで実ファイルに反映これにより、勝手にコードが書き換わる心配がありません。
第23章: 重要設定 ― CLAUDE.md でルールを教える
プロジェクトルートに CLAUDE.md を作成すると、Claudeに永続的なルールを教えられます。
副業開発者向けの例:
# このプロジェクトのルール
## 環境
- Windows 11 (日本語ユーザー名パス)
- Python 3.11 + Flask
- 文字エンコーディング: UTF-8 を厳守
- データベース: SQLite
## コーディング規約
- コメントは日本語
- 関数名は英語スネークケース
- print文ではなく logging モジュール使用
## 避けてほしいこと
- グローバル変数の濫用
- 仮想環境外でのライブラリインストールこれで毎回プロンプトに環境説明を書かずに済みます。
第24章: 権限の事前許可で作業効率を爆上げ
プロジェクトルートに .claude/settings.json を作成:
{
"permissions": {
"allow": [
"Bash(npm:*)",
"Bash(python:*)",
"Bash(pip:*)",
"Bash(git:*)",
"Bash(ls:*)",
"Bash(cat:*)"
]
}
}これで毎回「このコマンド実行していい?」と聞かれずに済みます。
第4部: GitとClaudeを組み合わせた最強ワークフロー
ここまでで以下が揃いました。
- ✅ Git で変更履歴の管理
- ✅ VS Code GUI で操作を視覚化
- ✅ Claude Code で実装を AI に任せる
これらを組み合わせると、「AIが書いたコードを安全に取り込む開発スタイル」 が完成します。
第25章: 黄金パターン ― Git × Claude のワークフロー
ステップ1: 新機能用のブランチを切る
VS Codeの左下の main をクリック → Create new branch → feature/category-filter などと入力。
これだけで安全網ができました。何が起きても main ブランチには影響しません。
ステップ2: Claude Code に実装を依頼
@app.py @templates/index.html にカテゴリ別フィルタ機能を追加して。
要件:
- URL: /category/<name> でフィルタ
- ヘッダーにカテゴリプルダウン追加
- 既存のlike/dislike学習データを壊さない
- SQLiteスキーマを変更する場合は migration スクリプトも作ってステップ3: 差分をレビューして承認
Claudeが提案してきた変更を1つずつ確認。
- 「ここは違う」→ [Reject] してプロンプトで指示
- 「これでOK」→ [Accept] で反映
ステップ4: 動作確認
python app.pyブラウザで動作確認。問題なければ次へ。
ステップ5: VS Code でコミット
ソース管理タブ → 変更を確認 → メッセージ入力 → ✓ Commit
feat: カテゴリ別フィルタ機能を追加
- /category/<name> エンドポイント追加
- ヘッダーUIにプルダウン実装
- categories テーブルにtag列追加するmigrationステップ6: 動作がおかしくなったら即ロールバック
# 直前のコミットを取り消す
git reset --hard HEAD~1
# またはブランチごと捨てる
git switch main
git branch -D feature/category-filterこの「いつでも戻せる安心感」があるからこそ、AIに大胆な変更を任せられるんです。
ステップ7: 完成したらマージ
ブランチを main にマージ → GitHub に push。
# VS Code 左下の main クリック → feature/category-filter から切り替え
# その後、コマンドパレットで Git: Merge Branch第26章: 副業開発者のためのデイリーフロー
実際に1日の中でどう使うか、具体的に書いてみます。
[朝の通勤電車]
スマホでデスクトップ版Claudeに「今夜やりたい機能の構想」を相談
↓ 結論をメモ
[昼休み]
↓
[夜 21:00 帰宅後]
↓
1. VS Code起動 → プロジェクトを開く
2. git pull で最新化(別PCで作業してた場合)
3. ブランチ作成: feature/今夜の機能
4. Claude Code に CLAUDE.md と一緒に実装依頼
5. 差分レビューしながら実装
6. 動作確認
7. コミット
8. 区切りがついたら push
↓
[深夜 寝る前]
git status で「今日の変更」を振り返りこのサイクルが回り始めると、営業の合間でもアプリが着実に育っていく感覚になります。
第27章: トラブル事例と対策
ケース1: Claudeが大量にファイルを書き換えて、何が起きたか分からない
# 全部の変更を破棄
git restore .または VS Code のソース管理タブで「Discard All Changes」。
ケース2: コミット後にやらかしに気づいた
# 直前のコミットを取り消す(変更内容は残る)
git reset --soft HEAD~1ケース3: 「会社PCで触ったコード、自宅で続きしたい」
# 会社PCで
git add .
git commit -m "WIP: 途中まで"
git push
# 自宅PCで
git pullGitHubが「両方の作業環境の同期サーバー」として機能します。
ケース4: 日本語ユーザー名で文字化け
# 文字化け対策
git config --global core.quotepath falseVS Codeの設定で files.encoding を utf8 に。
第28章: まとめ ― なぜこの組み合わせが最強か
この記事で紹介した3つの要素は、それぞれ役割が違います。
| ツール | 役割 |
|---|---|
| Git | 過去に戻れる「タイムマシン」 |
| VS Code | コマンドを覚えなくて済む「操作盤」 |
| Claude Code | コードを書いてくれる「AI同僚」 |
そして組み合わせると、こんな効果が生まれます。
- 大胆に試せる ― Gitで戻せるから、AIに何でも頼める
- 学習効率が上がる ― 差分ビューでAIのコードを読みながら学べる
- 副業時間が活きる ― 短時間でも着実に進む
営業として日中フル稼働しながら、夜と週末でアプリ開発をしたい人にとって、これは本当に強力な環境です。
次にやること
最後に、この記事を読んだあとに試してほしい順番をまとめます。
- Git をインストールして
git configで初期設定 - VS Code に GitHub アカウントを連携
- 既存プロジェクトを1つ選んで 「Initialize Repository」→ Publish
- Claude Code 拡張機能をインストール → サインイン
- CLAUDE.md をプロジェクトに置いて、Claude に文脈を教える
- ブランチ切って、AIに小さな変更を頼んで、コミットしてみる
ここまでできれば、もう開発スタイルが一段階アップグレードされています。
副業エンジニアとしての一歩、ぜひ踏み出してみてください。
それでは、また別の記事でお会いしましょう。
TAKU
この記事で紹介した内容は、すべて実際に試して動作確認したものです。質問やフィードバックがあれば、気軽にコメントください。
コメント