GitHubでコードを安全に管理して変更履歴を使いこなせるようになる

この3つは似た名前ですが、まったく別のものです。混乱しやすいので整理しておきましょう。

▲ GitHubのリポジトリ画面。ファイルがクラウドにアップロードされている状態

Git の操作は4ステップで構成されます。この流れを体で覚えることが目標です。

よく使うコマンドの早見表：

実際にコマンドを実行して Git の基本フローを体験します。Windows の操作を先に説明し、その後 Mac の操作を記載します。

▲ Git Bashでの基本操作フロー。赤字=未追跡ファイル、緑字=コミット準備完了

【Windows 版】

GitBASH を起動して以下のコマンドを実行します（Cursor のターミナルでも同様）。

# 練習用フォルダを作成してそこに移動
mkdir git-practice
cd git-practice

# Git リポジトリを初期化
git init

# 練習用ファイルを作成
echo "# My First Git Project" > README.md

# 状態を確認（赤字=未追跡ファイル）
git status

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

# 再度確認（緑字=コミット準備完了）
git status

# コミット（スナップショットを作成）
git commit -m "最初のコミット: READMEを追加"

# 履歴を確認
git log

【Mac 版】

ターミナルで同じコマンドを実行してください（コマンドは同一です）。

git config --global user.name "Your Name"
git config --global user.email "you@example.com"

git config --global init.defaultBranch main

Cursor のターミナルは GitBASH と同じ git コマンドが使えます。コードを書きながら同じ画面でコミットできるため、作業が大幅にスムーズになります。

または View → Terminal からも開けます。

講座00で作成した GitHub リポジトリとローカルを接続します。この接続を「リモート」と呼びます。

# GitHubリポジトリを接続
git remote add origin https://github.com/yourusername/my-first-app.git

# 接続を確認
git remote -v

以下のように表示されれば成功です。

origin  https://github.com/yourusername/my-first-app.git (fetch)
origin  https://github.com/yourusername/my-first-app.git (push)

git remote set-url origin https://github.com/yourusername/my-first-app.git

初回 push には -u オプションが必要です。これ以降の push で git push だけで送れるようになります。

git push -u origin main

▲ 初回 git push が成功したときのターミナル出力

git pull origin main --allow-unrelated-histories

初回設定が完了すると、以降は以下の3コマンドだけで push できます。この3つを定型作業として身につけましょう。

git add .
git commit -m "変更内容を書く（例: ヘッダーのデザインを修正）"
git push

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

push 後、GitHub のリポジトリページで正しく反映されているかを確認します。

▲ push 後の GitHub リポジトリ。最新コミットメッセージと変更日時が確認できる

.gitignore は「Git で管理しないファイルを指定するファイル」です。API キーや大きなファイルを誤って GitHub に公開しないために必須の知識です。

# コメントは # で書く

# 特定のファイルを除外（APIキーなど）
.env
secrets.txt

# 特定のフォルダを除外（大きなファイル群）
node_modules/
dist/
.vscode/

# 特定の拡張子を除外
*.log
*.tmp

.gitignore が機能しているか確認する方法：

# .envが除外されているか確認（表示されれば除外されている）
git check-ignore -v .env

# git status でも確認可（.envが一覧に出なければ除外されている）
git status

git rm --cached .env

# .envをGitの追跡から外す（ファイルは残る）
git rm --cached .env

# .gitignoreに.envを追記する（エディタで追記してもよい）

# 変更をコミット・pushする
git add .gitignore
git commit -m "fix: .envをGit管理から除外"
git push

プロジェクトの種類に合わせた .gitignore を自動生成してくれるサービスです。

.env
node_modules/
dist/
.DS_Store

ファイルを編集したけど「全部元に戻したい」という場合に使います。コミットしていない変更を全部取り消します。

# コミットしていない変更を全部取り消す
git checkout -- .

# 特定のファイルだけ元に戻す場合
git checkout -- index.html

# 削除予定のファイルを確認（-n でドライラン）
git clean -nfd

# 実際に削除する
git clean -fd

「コミットしたけどメッセージを間違えた」「まだコミットしたくなかった」という場合に使います。変更内容は残したまま、コミットだけを取り消せます。

# 直前のコミットを取り消す（変更内容は残る）
git reset --soft HEAD~1

# その後、正しいメッセージで再コミット
git commit -m "正しいコミットメッセージ"

Vercel でデプロイしている場合（講座06で扱います）、本番環境を以前の状態に戻す機能があります。ここでは「そういう機能がある」ことを知っておけば十分です。

講座04で作成したアプリを GitHub に push し、変更 → commit → push のサイクルを3回実践してください。

# アプリフォルダに移動してGitを初期化
cd [アプリのフォルダパス]
git init
git add .
git commit -m "初回コミット: アプリの初期状態"
git remote add origin https://github.com/[ユーザー名]/[リポジトリ名].git
git push -u origin main

# index.htmlを開いてタイトルを変更後
git status
git add .
git commit -m "style: ページタイトルを変更"
git push

# 2回目: CSSでスタイルを変更後
git add .
git commit -m "style: 背景色とフォントサイズを変更"
git push

# 3回目: 新しいコンテンツを追加後
git add .
git commit -m "feat: フッターセクションを追加"
git push