バイブコーディングを分かりやすくご紹介するために、漫画を始めてみました＾＾
今回は第4回目。ひつじのバイブコーディング学校がスタート。最初の授業です。よかったら、読んでみてくださいね。
Git管理で生成AIと自分の作業を区別しよう
バイブコーディングでWebアプリを作るとき、AIにコードを書いてもらうだけでなく、自分の作業ときちんと切り分けておくことも大切です。
そこで出てくるのが「Git（ギット）」。Gitについて、もう少し詳しくお伝えしていきますね。
Gitとは？
Gitは、いつ・だれが・なにを変更したかを記録できる、バージョン管理システムです。
Webアプリ開発では、ほぼ必須といっていいくらい、重要なしくみです。
バイブコーディングでのGitの使い方
バイブコーディングは、いってみれば、生成AIとの共同作業です。
生成AIに作業を任せると、うっかり既存のコードを書き換えられてしまったりするかもしれません。
そんなときにも、Gitで作業を区切っておけば、「ここまでは自分がやった」「ここから先はAIがやった」とちゃんと見分けがつきます。
Gitの4つの基本ステップ
Gitには、以下のような基本ステップがあります。
-
📝 ステージング： 変更したファイルの中から、記録に残したいものを「準備エリア」に移す
-
💾 コミット： 準備エリアの内容を「確定した記録」として保存する
-
☁️ プッシュ： ローカル（自分のパソコン）の記録を、GitHubなどのリモートリポジトリにアップロードする
-
📥 プル： リモートリポジトリの変更を、自分のパソコンやサーバーに反映する
バイブコーディングではステージングやコミットを活用しよう
生成AIに作業を頼む前に、まずは自分の変更をステージングしておきましょう。作業がある程度まとまっていれば、コミットまでしてからAIにパスすると安心です。
実際の方法は、下記の動画版を見てみてくださいね。6分あたりから、ステージングとコミットを実施しています。
↓↓
大きな機能追加には「ブランチ」も活用しよう
Devin や Claude Code などを使って、大きな機能をまとめてAIに追加してもらうときには、ブランチの活用もおすすめです。
「ブランチ」とは、メインの開発ラインから枝分かれした別の作業スペースのこと。
チーム開発では、外部の人に依頼するときにブランチを使うのが基本ですが、 バイブコーディングでも、AIを“外部の開発者”として扱うイメージでブランチを使うと安全です。
さいごに
「マンガで分かるバイブコーディング」で、楽しみながら、バイブコーディディングを学んでもらえたら嬉しいです。
「面白い」「続きみたい」と思っていただけたら、ぜひ、Xでフォローしてくださいね。新しくマンガを書いたら、Xに投稿していきます。
★第１回目から読みたい！と思ったらこちらから★
なお、今回の連載で行っている「バイブコーディングを基本から学んでWebサイトを公開する」方法は、【バイブコーディングセミナー】にて実践いただけます。
Git管理についても、セミナー内で実践していきます。
現在、その【バイブコーディングセミナー】を一部、無料でプレゼントしております。ご興味あれば、ぜひ下記からご覧ください。
わたしのほうでは、Webアプリ開発セミナー、コンサル、内製化支援なども行っております。本格的なご相談をご希望の方は、こちらのページもご覧ください。
