サンプルコードで身につける: ブランチ→実装→確認→コミット — 開発の基本ループ

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

11機能ぶんのコマンド列を通しで見る

ブランチを切ってから main に合流するまでの一連の流れです。真ん中の「実装→確認→コミット」だけが何周も繰り返され、前後の手順は1機能につき1回だけです。

# ── 1機能の始まりから終わりまで ──

# 【最初に1回】main を最新にしてブランチを切る
git switch main
git pull
git switch -c feature/favorite-button

# 【何周も回す】実装 → ng serve で確認 → コミット
git add src/app/favorite-button/
git commit -m "feat: お気に入りボタンを配置"

# 【最後に1回】プッシュしてレビューを依頼し、main に合流
git push -u origin feature/favorite-button
# → GitHub などでプルリクエストを作成してレビューへ

2git switch -c — ブランチを作って移動する

git switch -c は「ブランチを作る」と「そこへ移動する」を同時に行います。ブランチ名は feature/機能名のように、何の作業か分かる名前を付けるのがチームでの慣習です。

# ブランチを新規作成して、そのまま移動する(-c は create の意味)
git switch -c feature/favorite-button
# => Switched to a new branch 'feature/favorite-button'

# ブランチ名の付け方の例(チームの規約があればそれに従う):
#   feature/favorite-button  … 機能追加
#   fix/login-error          … バグ修正

# 既存のブランチへ移動するときは -c を付けない
git switch main

3書き始める前に現在地を確認する

作業前に git branch と git status で「どのブランチにいるか」「手元に未コミットの変更はないか」を見る習慣を付けます。main のまま書き始める事故はこの一手間で防げます。

# いま自分がどのブランチにいるかを確認(* が現在地)
git branch
#   main
# * feature/favorite-button

# 手元の変更状況を確認
git status
# On branch feature/favorite-button
# Changes not staged for commit:
#   modified:   src/app/favorite-button/favorite-button.ts

# コードを書く前にこの2つを見るのを習慣にする。
# 「main にいた!」に気づけるのはこの瞬間だけ

4なぜ main に直接コミットしないのか

main は全員が信頼して取り込む共有の土台なので、常に動く状態を保つ必要があります。ブランチに隔離すれば作りかけのコードが他人に影響せず、失敗してもブランチごと捨てられます。

# ── main とブランチの役割分担 ──
#
# main ブランチ
#   ・全員がここから作業を始める共有の土台
#   ・「いつでも動く」ことが信頼の前提
#   ・直接コミットすると、作りかけの壊れた状態が全員に配られる
#
# feature ブランチ
#   ・自分の作業を隔離する場所。壊れていても誰にも影響しない
#   ・レビューを通ってから main に合流する

# 方針が変わったらブランチごと捨てられる(main は無傷)
git switch main
git branch -D feature/favorite-button

5ループを何周も回した実例

1つの機能でも、コミットは1回ではなく小さく何回も積みます。各コミットの時点で動作確認が済んでいるので、どこまで戻っても動く状態が保証されているのが強みです。

# feature ブランチ上で「実装→確認→コミット」を4周した記録
git log --oneline main..feature/favorite-button
# a1b2c3d feat: お気に入りをlocalStorageに保存
# d4e5f6a feat: お気に入り一覧に件数バッジを表示
# 7g8h9i0 feat: クリックで☆/★を切り替える
# j1k2l3m feat: カードにお気に入りボタンを配置

# どのコミット時点でも ng serve で動作確認済み。
# 4周目で壊れても3周目まではいつでも戻れる