【Git】ローカル開発/ブランチ開発でよく使うコマンド実施例

ブランチを作って開発し、mainへマージして削除するまでを、VSコードの画面で順に追った例です。コマンドの意味や一覧はブランチ編にまとめています。

ブランチ開発はどんな順番で進めるの?

「作る → 移動する → 開発してコミットする → mainへ戻る → マージする → 削除する」の6手順です。この記事ではこの流れを画面付きで追っています。

git switch -c Appendix-Page
git add .
git commit -m "コミットメッセージ"
git switch main
git merge Appendix-Page
git branch -d Appendix-Page
本記事で使用しているコマンドの解説:ブランチ開発でよく使うコマンド一覧

Gitはインストール済、以下のプロジェクトディレクトリ(フォルダ)を用意し、エディタはVSコードを使います。

テスト用に準備したプロジェクトディレクトリ(Git-Practice)

Git-Practice/
├── index.html
├── css/
│   └── style.css
└── js/
    └── script.js
目次

【git branch / git checkout】ブランチの新規作成 & ブランチの移動

まずVSコードエディタで対象のフォルダを開き、ターミナルを開きます。

VSコードでGit-Practiceフォルダを開きターミナルを表示した画面

なお、本記事は前回の続きなので、リポジトリの初期化(git init)は済ませてあります。

前回記事:ローカル開発での基本コマンド実施例

では、早速 git branch で新しくブランチを作成し、ブランチがちゃんと作成されているか確認してみます。

git branch でAppendix-Pageブランチを作成し一覧で確認した画面
git branch Appendix-Page

「Appendix-Page」という名前のブランチを新規に作成するコマンド。
Appendixとは「付属」「後づけ」という意味で、ここでは「補足ページの開発に関するブランチ」という意味です。

git branch

現在のブランチ全てを一覧表示するコマンド。

「Appendix-Page」というブランチが作成され、一覧にも表示されています。
ただ、このままではブランチを作成しただけで「main」ブランチの方にいる状態(mainの方に「*」がついて緑色表示)なので、git checkout を使ってブランチを移動します。

git checkout でAppendix-Pageブランチへ移動した画面

再度 git branch で確認すると、「Appendix-Page」の方に「*」がついて緑色表示になっており、ブランチの移動を確認できました。

【git checkout -b / git switch -c】ブランチの作成と移動を同時に実行

上記の操作(ブランチを作成し、そのブランチに移動)を一つに纏めた git checkout -b というコマンドもあります。
また、Git 2.23で導入された新しいコマンド git switch -c を使っても同様のことが行えます。

ブランチの新規作成と移動を1つのコマンドで同時に実行した画面
git checkout -b Appendix-Page

「Appendix-Page」という名前のブランチを新規に作成し、そこに移動するコマンド。

git switch -c Appendix-Page

上記と同じ。Git 2.23で導入された新しいコマンドで、ブランチの切り替えをより直感的に行えます。

念のため git branch で確認すると、新しくブランチ(Appendix-Page)が作成されており、そこに移動した状態となっています。

【git merge】ブランチでの更新内容をメインに統合(マージ)

作成したブランチに移動した後は、基本コマンド編と同様に開発を進めていきます。
ここでは、新しく「appendix.html」というファイルを作り、簡単なページを作成しました。

ブランチ側でappendix.htmlを作成しコミットした画面
git add .
git commit -m "Appendix.htmlを作成"

すべてのファイルをステージングエリアに追加し、リポジトリに記録します。

git log --oneline

念のため、コミット履歴に反映されているか確認します。

無事に更新内容をコミットでき、ブランチでの開発が終了したので、開発結果を「main」ブランチに統合(マージ)します。
統合されるブランチ(この場合は「Appendix-Page」ブランチ)にいる状態では統合できないので、git switch または git checkout で「main」ブランチに移動してから、git merge コマンドを実行します。

git switch main でmainブランチへ戻り git branch で確認した画面
git switch main
git branch

「main」ブランチに移動し、念のため移動できたか確認します。
こちらでは「appendix.html」ファイルを作成していないため、まだフォルダに存在しないことが確認できます。

git merge でAppendix-Pageの内容をmainへ統合した画面
git merge Appendix-Page

次に「Appendix-Page」ブランチでコミットした内容を現在のブランチ「main」に統合(マージ)します。
コマンド実行後、「appendix.html」ファイルがフォルダに表示されました。

git log --oneline --graph --all

コミット履歴を確認しておきます。オプションは --oneline のみでもOKですが、ブランチでの開発状況が視覚的にわかりやすくなる --graph オプションと、全ブランチのコミット履歴を表示する --all オプションも付けました。

今回、「main」ブランチの方では更新を行わずにマージしたため、あたかも「main」ブランチでそのまま開発したかのような(「Appendix-Page」ブランチのコミットが「main」ブランチに直接追加されたような)コミット履歴となりました。これを「Fast-forward」マージといいます。

これでも問題ありませんが、チーム開発などではブランチで開発したことをわかりやすく残しておきたい場合もあり、その場合はマージする際に --no-ff オプションを使用します。

git merge --no-ff Appendix-Page

--no-ff オプションについては次項にて使用例があります。

【git merge –no-ff】ブランチで追加更新 & メインに統合

再び「Appendix-Page」ブランチにて追加開発を行います。
git switch コマンドでブランチを移動し、開発を行ったあと、git addgit commit コマンドでリポジトリに記録します。

Appendix-Pageブランチで追加の更新をコミットした画面

開発終了後は「main」ブランチにマージするため、git switch main でブランチを切り替えます。
切り替えると、前項のマージ後に開発した内容が消えます。

追加コミット後にmainブランチへ移動し内容が消えた状態の画面

続いて前項同様マージを行いますが、今回は --no-ff オプションを使ってマージコミットを作り、「Appendix-Page」ブランチで開発されたことがコミット履歴に残るようにします。

git merge --no-ff を使いマージコミットを作成した画面
git merge --no-ff Appendix-Page

--no-ff オプションを使用するとマージコミットが強制的に作られ、コミット履歴にマージされたブランチの情報が含まれるようになります。

git log --oneline --graph --all

--graph オプションと --all オプションを使用することで、コミット間の分岐がわかりやすく表示されました。

【git branch -d / git branch -D】ブランチを削除

ブランチでの開発が終わり用済みになったら、git branch -d コマンドで不要なブランチを削除します。

git branch -d でマージ済みのブランチを削除した画面
git branch -d Appendix-Page

「main」ブランチにいる状態で上記コマンドを実行すると、「Appendix-Page」ブランチが削除されます。
削除対象のブランチにいる状態では実行できません。

まだマージしていないブランチを削除する場合、誤入力防止措置としてエラーとなり、削除されません。
それでも強制的に削除したい場合は git branch -D コマンドを使うことで削除できます。

git branch -D で未マージのブランチを強制削除した画面
git branch -D Appendix-Page

まだマージしていないブランチでも強制削除するコマンドです。

-D はマージ状況を確認せずに削除します。マージし忘れたブランチを消してしまうと、そのブランチだけにあったコミットは辿りにくくなります。まずは -d を使い、エラーが出た理由を確認してから -D を使ってください。

まとめ

ローカル/ブランチ開発でよく使うGitコマンドの実行例を紹介しました。

ローカル開発のGitコマンドに関する記事一覧

この記事に出てきた用語

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次