Git / GitHubの基本 ── コードを保存・管理・公開する仕組み

なぜGitが必要なのか

バイブコーディングでコードを書いていると、こんなことが起きる：

• AIに修正を頼んだら前より悪くなった。元に戻したい
• 昨日まで動いていたのに今日動かない。何が変わった？
• 作ったサイトをインターネットに公開したい
• チームメンバーと同じコードを同時に編集したい

これを全て解決するのがGitとGitHubだ。

Git    = コードの「セーブポイント」を作る仕組み（ローカルで動く）
GitHub = セーブデータをクラウドに保存・共有する場所（Webサービス）

ゲームのセーブ機能と同じ。いつでも過去の状態に戻れるし、クラウドに保存しておけばPCが壊れても安心だ。

GitとGitHubの全体像

まずGitの世界の登場人物を整理しよう。

基本用語一覧

データの流れ

あなたのPC（ローカル）          GitHub（リモート）
┌────────────┐                ┌────────────┐
│            │  ── push ──▶   │            │
│ ローカル    │                │ リモート    │
│ リポジトリ  │  ◀── pull ──  │ リポジトリ  │
│            │                │            │
└────────────┘                └────────────┘
  ▲ commit
  │
┌────────────┐
│ ステージング │  ← git add で追加
│ エリア      │
└────────────┘
  ▲ git add
  │
┌────────────┐
│ 作業ディレク │  ← ここでファイルを編集
│ トリ        │
└────────────┘

Gitのインストール

Mac の場合

ターミナルを開いて以下を入力する。Xcode Command Line Toolsの一部として自動的にインストールが始まる：

git --version
# → 初回は「インストールしますか？」と聞かれるので許可
# → git version 2.x.x と表示されればOK

もしHomebrewを使っているなら、最新版を入れることもできる：

brew install git

Windows の場合

1. git-scm.com にアクセス
2. 「Download for Windows」をクリック
3. インストーラーを実行（設定はデフォルトのままで基本OK）
4. 途中の「Adjusting your PATH」では 「Git from the command line and also from 3rd-party software」 を選択

インストール後、Git Bash（一緒にインストールされるターミナル）を開いて確認：

git --version
# → git version 2.x.x と表示されればOK

初期設定（最初の一度だけ）

Gitを使う前に、名前とメールアドレスを登録する。これはコミット履歴に「誰が変更したか」を記録するためのもの。

# 名前を設定（GitHubのユーザー名と合わせるのがおすすめ）
git config --global user.name "あなたの名前"

# メールアドレスを設定（GitHubに登録したメールと同じにする）
git config --global user.email "your@email.com"

設定内容を確認するには：

git config --global --list
# → user.name=あなたの名前
# → user.email=your@email.com

git config --global core.editor "code --wait"

GitHubアカウントの作成

1. github.com にアクセス
2. Sign up → メールアドレス、ユーザー名、パスワードを設定
3. 無料プラン（Free）でOK（個人利用はほぼ全て無料）
4. メール認証を済ませる

GitHubの無料プランでできること

基本操作の流れ

Gitの基本操作は、大きく分けて3ステップだ。

Step 1：リポジトリを作る（最初の1回）

cd my-project        # プロジェクトフォルダに移動
git init             # Gitを初期化（セーブ機能ON）

git init を実行すると、フォルダ内に .git という隠しフォルダが作られる。ここにGitの全データが格納される。

Step 2：変更をステージングする

# 全ファイルをステージングに追加
git add .

# 特定のファイルだけ追加したい場合
git add index.html
git add src/style.css

# 現在の状態を確認（何がステージングされているか）
git status

Step 3：コミットする

git commit -m "ヘッダーのデザインを追加した"

-m の後に書くのがコミットメッセージ。「何を変えたか」を短く書く。

Step 4：GitHubにプッシュする

# 初回のみ：リモートリポジトリを登録
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
git push -u origin main

# 2回目以降
git push

GitHubでリポジトリを作成してpushする手順

GitHubのWeb画面とターミナルを行き来する流れを詳しく解説する。

実際のコマンド例

# ① ローカルでGitを初期化してコミット
cd my-portfolio
git init
git add .
git commit -m "初回コミット：ポートフォリオサイトの基本構造"

# ② GitHubのリモートリポジトリを登録
git remote add origin https://github.com/your-name/my-portfolio.git

# ③ メインブランチの名前をmainに設定（初回のみ）
git branch -M main

# ④ プッシュ
git push -u origin main

コミットメッセージの書き方

コミットメッセージは「未来の自分への手紙」。後から見返したときに「何をしたか」がすぐにわかるように書こう。

良い例・悪い例

おすすめのフォーマット

# プレフィックスを付けるとさらに見やすい
git commit -m "feat: ダークモード切り替え機能を追加"
git commit -m "fix: スマホでメニューが閉じないバグを修正"
git commit -m "style: フッターのレイアウトを調整"
git commit -m "docs: READMEに環境構築手順を追記"

ブランチの基本

ブランチは「今の状態を壊さずに新しいことを試す」ための仕組みだ。

ブランチのイメージ

main ─────●─────●─────●─────●─────●──── 本番用（安定版）
                 │                 ▲
                 └──●──●──●───────┘
                  feature-login（新機能を開発中）

mainブランチは常に「動く状態」を保ち、新機能や実験はブランチを切って行う。完成したらmainに合流（マージ）させる。

ブランチの基本操作

# 新しいブランチを作成して切り替え
git checkout -b feature-login

# 今いるブランチを確認
git branch
# * feature-login   ← 今ここ
#   main

# ブランチで作業してコミット
git add .
git commit -m "feat: ログインフォームのHTMLを作成"

# mainブランチに戻る
git checkout main

# ブランチの変更をmainに統合
git merge feature-login

# 不要になったブランチを削除
git branch -d feature-login

よく使うコマンドまとめ

基本操作

取り消し・復元

情報確認

バイブコーディングでのGitの使い方

AIにコードを書いてもらうバイブコーディングでは、Gitは命綱だ。

鉄則：AIに変更させる前に必ずコミット

具体的なシナリオ

# --- シナリオ：AIにナビゲーションバーを作ってもらう ---

# ① 今の状態をセーブ
git add .
git commit -m "feat: トップページの基本構造を完成"

# ② AIに「ナビゲーションバーを追加して」と指示
# → AIがコードを生成

# ③ 確認：ブラウザで見てみる → いい感じ！
git add .
git commit -m "feat: レスポンシブなナビゲーションバーを追加"

# ④ 次にAIに「ダークモードを追加して」と指示
# → AIがコードを変更 → デザインが崩れた...

# ⑤ 元に戻す！
git checkout .
# → ナビゲーションバーが完成した状態に戻った

# ⑥ 指示を変えて再挑戦
# → 「既存のCSSを変更せずにダークモードを追加して」と指示

Claude Codeを使う場合

Claude CodeはGitを自動的に活用してくれる。コミットの提案もしてくれるので、手動でコマンドを打つ場面は少ない。ただしGitの概念を理解しておくと、以下の場面で役立つ：

• Claude Codeが「コミットしますか？」と聞いてきたとき、適切に判断できる
• 何か問題が起きたときに git log や git diff で自分で状況を把握できる
• 「このコミットに戻して」と的確に指示できる

.gitignore ── 管理しないファイルを指定する

プロジェクトにはGitで管理すべきでないファイルがある。それを指定するのが .gitignore ファイルだ。

.gitignore に書くべきもの

.gitignore の書き方

プロジェクトのルート（一番上のフォルダ）に .gitignore というファイルを作成する：

# .gitignore の内容例

# 依存パッケージ
node_modules/

# 環境変数（APIキーなどの秘密情報）
.env
.env.local

# ビルド成果物
dist/
build/
.output/

# OS生成ファイル
.DS_Store
Thumbs.db

# ログファイル
*.log

よくあるトラブルと解決法

トラブル1：pushしたら「rejected」エラー

! [rejected] main -> main (fetch first)

原因：GitHubのリモートに自分の手元にない変更がある。

解決策：

# まずリモートの変更を取り込む
git pull origin main

# 自動マージされたら、改めてpush
git push

トラブル2：コンフリクト（衝突）が発生

同じファイルの同じ箇所を別々に変更すると発生する。

<<<<<<< HEAD
自分の変更内容
=======
相手の変更内容
>>>>>>> branch-name

解決策：

1. コンフリクトが発生したファイルを開く
2. <<<<<<<、=======、>>>>>>> のマーカーを手動で削除
3. 残したい内容だけを残す
4. ファイルを保存して git add → git commit

# コンフリクトを解消した後
git add .
git commit -m "fix: マージコンフリクトを解消"

トラブル3：大きなファイルをpushできない

remote: error: File large-video.mp4 is 150.00 MB; this exceeds GitHub's file size limit of 100.00 MB

解決策：

# 大きなファイルをGitの管理から除外
echo "large-video.mp4" >> .gitignore

# すでにコミットしてしまった場合は履歴からも削除が必要
git rm --cached large-video.mp4
git commit -m "chore: 大きなファイルをGit管理から除外"

トラブル4：間違えてコミットしてしまった

# 直前のコミットメッセージを修正したい
git commit --amend -m "正しいメッセージ"

# 直前のコミットを取り消したい（変更は残す）
git reset --soft HEAD~1
# → ファイルの変更はそのまま、コミットだけ取り消される

トラブル5：「fatal: not a git repository」と言われる

原因：Gitが初期化されていないフォルダでコマンドを実行している。

解決策：

# 正しいフォルダにいるか確認
pwd

# Git初期化がまだなら
git init

セットアップ完了チェックリスト

• git --version でバージョンが表示される
• git config --global user.name で名前が設定されている
• git config --global user.email でメールが設定されている
• GitHubアカウントを作成した
• git init → git add → git commit の流れがわかった
• git push でGitHubにコードをアップロードできた
• .gitignore の役割を理解した

FAQ ── よくある質問

Q1. GitとGitHubは必ず両方必要ですか？

Gitだけでもローカルでバージョン管理は可能だ。ただしGitHubを使わないと「クラウドバックアップ」「サイト公開（GitHub Pages / Vercel / Cloudflare Pages）」「他の人との共同作業」ができない。バイブコーディングでサイトを公開したいなら、GitHubはほぼ必須と考えてよい。

Q2. コミットはどのくらいの頻度ですればいいですか？

「1つの作業が終わるごと」が目安。具体的には「ヘッダーを作った」「フォームを追加した」「バグを修正した」など、1つの意味のあるまとまりごとにコミットする。バイブコーディングでは「AIに1回指示を出して結果がOKだったタイミング」がちょうどいい。1日の終わりにまとめて1コミットだと粒度が粗すぎる。

Q3. プライベートリポジトリでも無料で使えますか？

はい、GitHubの無料プランでもプライベートリポジトリは無制限に作成できる。共同作業者の招待も無制限。個人開発では無料プランで困ることはほぼない。

Q4. 一度pushした機密情報（APIキーなど）を消すにはどうすればいいですか？

GitHubからファイルを削除しても、コミット履歴に残ってしまう。完全に消すには git filter-branch や BFG Repo-Cleaner などの特殊なツールが必要で手順が複雑になる。**最善策は「最初から.gitignoreに入れておくこと」と「APIキーを即座に無効化して新しいキーを発行すること」**だ。

Q5. SourceTreeやGitHub DesktopなどのGUIツールを使ってもいいですか？

もちろんOK。GUIツールはコマンドを覚えなくてもGitを操作でき、視覚的に変更を確認できるメリットがある。ただしバイブコーディングではターミナルとの行き来が多いため、基本的なコマンドも知っておくと効率が良い。最初はGUIツールで慣れて、徐々にコマンドを覚えていくのがおすすめ。

Q6. 「git add .」と「git add -A」の違いは何ですか？

git add . はカレントディレクトリ以下の変更を全てステージングする。git add -A はリポジトリ全体の変更（削除されたファイルも含む）をステージングする。プロジェクトのルートディレクトリで実行する限り、実質的にはほぼ同じ動作になる。

Q7. 「main」と「master」の違いは何ですか？

以前はGitのデフォルトブランチ名が master だったが、2020年以降 main に変更された。GitHubで新しく作るリポジトリは main がデフォルト。古いリポジトリでは master のままの場合もある。名前が違うだけで機能は同じだ。

次はいよいよAIコーディングツールの使い方を学ぼう。Gitの基本を押さえた今なら、安心してAIにコードを書いてもらえるはずだ。