このレッスンでやること
アプリ開発の最後のトピックとして、アプリをデプロイした後の Gitブランチ運用について解説します。ここまでは主にmainブランチ一本でClaude Codeに開発を進めてもらってきましたが、本番公開後はそれだとリスクがあるため、Git Flow ブランチ戦略を軽く取り入れていきましょう。
main ブランチ一本のリスク
MVPを作る段階では、mainブランチ一本で開発を進めても問題ありません。しかし、本番環境でアプリが公開された後は事情が違います。
例えば、以下のような状況が起こりたらどうでしょうか。
- Claude Code で修正を依頼
- その修正で誤ってアプリが動かなくなるバグが混入
- mainに push → Vercel が自動デプロイ
- 本番環境がバグを含んだ状態で公開
- 利用ユーザーに迷惑をかけてしまう
これを防ぐため、少なくとも develop ブランチを切り出して、そちらで開発してからmainにマージする運用に切り替えましょう。
ブランチとは
「ブランチ」は日本語で「枝」という意味です。コードを枝のように分けて並行して開発し、タスクが終わったら幹（main）に戻す、というスタイルで使います。
develop ブランチを切る
Claude Code に以下のように依頼すれば、自動でブランチ切り替えをやってくれます。
すでに本番環境でデプロイしているので、
mainはそのままにして、今後は develop ブランチを新しく作って
そこから開発を進めていこうと思います。
ブランチを切ってください。コミットしていない変更がある場合は、先にコミット・プッシュしてから develop に切り替える手順をClaudeが提案してくれます。
推奨運用パターン
シンプル版（1ブランチ追加）
手軽に始めたいなら develop ブランチを1つだけ切り、ここで作業して、出来上がったら main にマージします。
main ●─────────────● ← 本番
level │ ↑
│ マージ
develop └●──●──●──┘ ← 開発チーム開発版（featureブランチも使う）
慎れてきたら、機能ごとに feature ブランチを切りましょう。例: ログイン機能追加を feature/login で作業し、完了したら develop にマージ。develop で動作確認してから main にマージします。
main ●───────────────●
develop └●────●─────●─┘
feature/login └●──●─┘Vercel のプレビューデプロイ
Vercel には develop ブランチや feature ブランチを push すると、プレビュー用の一時URLを自動生成してくれる機能があります。これを使えば、main にマージする前に本番と同じビルドで動作確認できるため、より安全にデプロイできます。
hotfix ブランチ
Git Flow には他にも、release や hotfix というブランチもあります。特に重要なのがhotfixで、これは「緊急のバグ修正」用に、main から直接ブランチを切り出して修正し、mainとdevelop両方にマージする高速レーンです。
ただし、ブランチを切りすぎると管理が複雑になるため、最初は develop と feature だけで十分です。チーム規模やリリース頻度に合わせて複雑さを調整しましょう。
コミットはセーブポイントにもなる
ブランチを切り、その都度コミットを重ねることは、ゲームのセーブポイントのような役割も果たします。「あの時点に戻りたい」と思ったら、そのコミット・ブランチに戻れるので、作業の安全性が格段に上がります。
Git コマンドは AI に任せてもOK
Git には add / commit / push / merge / checkout / rebase / pull などさまざまなコマンドがありますが、最近のAIはこれらを適切に使い分けてくれます。ただし、名前と意味を理解しておくと、AIに適切な指示を出しやすくなります。
まとめ
本番公開後は main ブランチ一本ではなく、最低 develop ブランチを切り、さらに慎れてきたら feature ブランチ も使う運用にしていきましょう。Vercel のプレビュー機能と組み合わせれば、本番を壊さずにアップデートを進められます。
Web開発は学ぶことがたくさんあります。パフォーマンス最適化、セキュリティ、デザインなど、興味のある領域を本等で学ぶとAIの使いこなしもその分上手くなります。「作りながら学ぶ」が一番早いので、今回のアプリ作りをスタートラインに、さらに深掠りしていってください。