Vibe Coding で Git・Github を活用するガイド
初心者でも安心！手を動かしながら学ぶ実践ガイド
Note
🎯 このガイドで学べること
Git と Github を使って、Webサイト制作をもっと安全で効率的にする方法を、実際に手を動かしながら学びます。「なんだか難しそう…」と思っていた Git が、実はとても便利で楽しいツールだということがわかりますよ！
🤔 Git と Github って何？
Git とは？
Git は、あなたのコードの「履歴を管理するツール」です。
例えるなら、ゲームの「セーブ機能」のようなもの。重要なポイントでセーブしておけば、失敗しても安心して元に戻れますよね？Gitも同じで、コードの重要な変更点を記録しておけるんです。
Github とは？
Github は、Gitで管理されたコードを「クラウド上に保存・共有できるサービス」です。
GoogleドライブやDropboxのコード版だと思ってください。自分のコードをオンラインに保存して、どこからでもアクセスできるし、他の人と共有もできます。
Tip
💡 つまり…
Git = コードの履歴管理ツール（ローカル）
Github = コードをクラウドに保存・共有するサービス
Git サーバーと Github
Githubは「Gitサーバー」の一種です。他にも GitLab、Bitbucket などがありますが、Githubが最も人気で使いやすいので、このガイドではGithubを使います。
🔄 自動化と Github
Githubの素晴らしいところは、**「コードをプッシュするだけで、自動的にWebサイトが更新される」**ことです！
従来は、FTPでファイルをアップロードしていましたが、今は Git push するだけで全て自動化できます。
非エンジニア向けの連携サービス
Tip
🎯 おすすめの選び方
初心者の方は Netlify から始めるのがおすすめです。慣れてきたら、用途に応じて他のサービスも試してみましょう！
🌳 ブランチって何？
ブランチとは？
ブランチとは、コードの「平行世界」を作る機能です。
メインの世界（main ブランチ）を壊すことなく、別の世界で実験や開発ができます。うまくいったら、メインの世界に統合（マージ）します。
main ブランチ: ●─────●─────●─────●
↘ ↗
feature ブランチ: ●───●───●
(実験・開発)このように、安全に開発を進められます！
ブランチを使うメリット
🛠️ ブランチの使い方（Visual Studio Code）
Warning
⚠️ 作業前の重要なチェック
必ずリポジトリを「クリーン」な状態にしてから始めましょう！
クリーンとは：未保存の変更や、追跡されていないファイルがない状態
ステップ1: リポジトリをクリーンにする
- VS Code で
Ctrl+Shift+G（ソース管理を開く） - 変更があるファイルをすべて確認
- 必要な変更は commit、不要な変更は破棄
- 「Changes」の欄が空になったらOK！
ステップ2: ブランチを作成する
- VS Code 下部のステータスバーで現在のブランチ名をクリック
- 「Create new branch…」を選択
- ブランチ名を入力：
feature/新しい機能の名前
例：feature/header-design、feature/contact-form
ステップ3: アクティブなブランチを確認する癖をつける
VS Code 下部のステータスバーで、現在どのブランチにいるかを常に確認しましょう。
これを癖にすることで、間違ったブランチで作業するミスを防げます。
ステップ4: 完成したら main にマージする
- 作業が完了したら、すべての変更を commit & push
- ステータスバーでブランチ名をクリック
- 「main」を選択してmainブランチに切り替え
- 再度ブランチ名をクリックし、「Merge Branch…」を選択
- マージしたいブランチ（先ほど作ったfeatureブランチ）を選択
Tip
💡 ブランチ名の付け方のコツ
feature/ の後に、何を作っているかわかる名前をつけましょう。
例：feature/pricing-page、feature/mobile-menu
🚀 Netlify での活用方法
Important
📋 前提条件
既にNetlifyとGithubを連動させていることが前提です。まだの方は、先にNetlifyでGithubリポジトリをデプロイしてください。
ステップ1: Netlifyでブランチデプロイを有効にする
- Netlifyダッシュボードから対象のプロジェクトを選択
- 「Site configuration」→「Build & deploy」→「Continuous Deployment」をクリック
- 「Branches and deploy contexts」の「Configure」ボタンを押す
- 「Branch deploys」で「Let me add individual branches」を選択
- 「
feature/*」を追加（これで feature/ で始まるすべてのブランチが対象になります）
Tip
🎯 これで何ができるようになる？
feature ブランチを push するたびに、自動的に専用のプレビューURLが生成されます！
URLの形式：https://feature-header-design--yoursite.netlify.app
📝 実際のWebサイト更新フロー
ステップ1: 開発ブランチを作成
リポジトリをクリーンにしてから、feature/更新内容 のブランチを作成
ステップ2: 開発作業
ファイルを編集しながら、要所要所で：
- 変更を commit（変更を記録）
- push（Githubに送信）
「今日はここまで」「この機能は完成」といったタイミングで commit するのがおすすめです。
ステップ3: プレビューで確認
push するたびに、Netlifyが自動的にプレビューサイトを更新します。
ブラウザでプレビューURLにアクセスして、実際の見た目を確認しましょう。
ステップ4: 完成したらマージ
- 作業が完了したら、最後の commit & push を実行
- VS Code で main ブランチに切り替え（チェックアウト）
- feature ブランチを main にマージ
- main ブランチを push
ステップ5: 本番サイトの更新完了！
main ブランチが push されると、自動的に本番サイトが更新されます。
数分待ってから、本番URLにアクセスして確認してみましょう。
Note
🎊 お疲れさまでした！
これで Git と Github を使った、プロ仕様のWebサイト更新フローが身につきました！
最初は慣れないかもしれませんが、繰り返すうちに「なんて便利なんだ！」と感じられるはずです。
小さく始めて、少しずつ慣れていきましょう。失敗を恐れずに、楽しんで学習を続けてくださいね！
Tip
🚀 次のステップ
このフローに慣れてきたら、以下にもチャレンジしてみましょう：
- Github Desktop の活用
- Pull Request を使った本格的な開発フロー
- その他のデプロイサービス（Cloudflare Pages、Vercel）の活用
vibe coding git github 活用ガイド 初心者向け 実践ガイド webサイト制作 安全 効率的 履歴管理 セーブ機能 クラウド保存 共有サービス 自動化 github連携 netlify cloudflare vercel ブランチ 平行世界 実験開発 visual studio code ソース管理 リポジトリ クリーン状態 commit push merge マージ プレビュー機能 ブランチデプロイ 本番サイト更新 フロー