公開日2025.03.19
最終更新日2025.03.19
こんにちは、ピピよです。このシリーズもこれで3作目。
本作でも、初心者に優しく、コマンドをなるべくたたかないで操作できるように話ができたらな～と思います。
こちらの記事は
の続編となっています。前作と前々作の作業を実施してからチャレンジしてくださいね。
今回は、
- ・ブランチについて
- ・ブランチの作成と操作
- ・マージについて
- ・マージの方法
をやっていきます。
開発環境
説明している環境はこちらです。
- Windows11
- Git
- VSCode（日本語化済）
- VSCodeの拡張機能：GitLensとGitGraph
※GitGraphを使った操作があるので、忘れずにご用意を
作業場所（ブランチ）を分ける
前回、リモートリポジトリにコラボレーターを追加しましたね。
これからの開発は、複数のコラボレーターと一緒に進めていくことになるわけです。
リモートリポジトリを作成すると、mainという作業場所ができた状態になります。
そのまま同じ場所で作業を進めてしまうと、不具合が生じる可能性が考えられます。
そうならないために、ひとりひとりのやることに応じた作業場所を用意します。この作業場所が「ブランチ」です。
ブランチとは～”もしも”の存在を複数つくる～
作業場所と聞くと、台や箱を用意して編集するものだけを切り分けていくような想像をするのではないでしょうか？実はそうではありません。
完全に一致した説明ではないのですが、わかりやすくたとえ話で。
ブランチは、タイムトラベル作品のにある「あの時〇〇していたら」で作られるパラレルワールドのような、ドッペルゲンガーのような存在たち。
ある分岐点（ブランチを作成した時）から同じフォルダが同じタイミングで存在している状態になる感じです。
例えば、勇者が冒険に出るときに初期装備に何を選ぶかで覚える技やストーリーが変わってくる場合。違いがある体のパーツだけで分かれていくことはないですよね。違う道順だけストーリー別に削っていくわけではありません。
web開発だったりすると。webページを構成するファイルが格納されたフォルダ全体が分岐していく感じです。CSSフォルダだけ切り取っても正しくwebページとして見れないですしね。
ブランチの作成
さっそくブランチを作っていきましょう。
ブランチの作成手順
1、チェックインしているブランチを確認
自分がいまいる（チェックインしている）ブランチを確認します。VSCodeを開き、ローカルリポジトリを読み込ませましょう。
Githubと接続されたリポジトリであれば、画面左下部にソース管理のアイコンとブランチ名が表示されます。
Point：分岐する場所
ブランチを作成する時、分岐していく場所は現在いるブランチからです。
2、画面左下部のブランチ名をクリックして新しいブランチを作成
画面左下部のブランチ名をクリック
すると、画面上部にブランチの操作用画面が表示されます。
「新しいブランチの作成」をクリック
ブランチの名前を入力
Point：ブランチの命名
ブランチの命名規則は、開発チームなどにより異なります。
| ブランチ名 | 説明 |
|---|---|
| main | 完成品 |
| develop | 開発中 |
| feature/xxx | 新規開発 |
| hotfix/xxx | 公開しているページの修正 |
入力が終わったらエンター
最後に、ソース管理の画面に切り替えて
ブランチの発行をクリック（Gitに変更履歴を登録（プッシュ）します）
ブランチの操作
次はブランチの操作についてです。
ブランチの切り替え
先ほどと同様に、画面左下部のブランチ名をクリックして、画面上部にブランチの操作用画面を表示させます。
その後、入力箇所にブランチ名を入力してエンターをするか、操作用画面の下に表示されているブランチ名をクリック
画面左下部のブランチ名が変わっているかを確認。
以上です。
ブランチの削除
ブランチの削除は、「Git Graph」を活用すると簡単なので、そちらをご紹介いたします。
画面左下部の「Git Graph」をクリック
Descriptionの中から削除するブランチ名を探す。
ブランチ名を右クリックして、「Delete Branch…」をクリックします。
※白い丸がついた、現在いるブランチは削除できないので注意
ポップアップのチェックボックスは、
| チェック項目 | 説明 |
|---|---|
| Force Delete（強制削除） | 通常の削除では削除できない場合に使用 |
| Delete this branch on the remote（リモートブランチも削除） | GitHubやGitLabなどのリモートリポジトリ上のブランチも削除 |
の操作が必要であればチェックを追加します。
Point：削除のタイミング
ブランチは、使用しなくなったら削除していきます。
削除のタイミングは開発チームで決めておきましょう。
マージ ～ブランチは最終的に一つに統合～
ある地点から分岐していったブランチたちは、最後に一つに統合されることになります。
コラボレーターの中で、役割分担をして作業を行った一つ一つの機能を一つのブランチに集約するわけです。
この最後にまとめる作業を「マージ」と言います。
マージされるまでの分岐の始まりとマージはこんな感じ。
まず、developブランチを作成して、開発の内容を管理します。
feature/html、feature/cssなどをdevelopブランチから分岐させていって、開発が完了したらdevelopブランチへマージ。
最後にdevelopブランチの情報を完成品のmainへマージして完了です。
マージの方法
最後に、マージの方法をお伝えします。
視覚的にもわかりやすいので、「Git Graph」を使用します。
マージの手順
1、ブランチを切り替えて、「Git Graph」を開く
情報を取り込みたいブランチへ移動します。
白い丸がついているブランチが、現在チェックインしているブランチです。
画面左下のボタンで、「Git Graph」を開きます。
2、マージ実行
情報を取り込む側のブランチを右クリック。
「marge into current branch」をクリックします。
ポップアップのチェックボックスは、
| チェック項目 | 説明 |
|---|---|
| Create a new commit even if fast-forward is possible | 履歴を明確に残す場合に使用 |
| Squash Commits | 履歴をシンプルにしたいときに使う |
| No Commit | マージはするが、コミットせずにステージング状態にする |
の操作が必要であればチェックを追加します。
今回は、ポップアップ内のチェックボックスをすべて外して、「Yes, merge」をクリック。
ソース管理画面を開き「変更の同期」ボタンをクリック。
ポップアップの「OK」をクリック。
リモートリポジトリのブランチへ取り込んだ情報がプッシュされます。これで作業終了です。
Point：競合の可能性
同じファイルを編集していると「競合」という状態になる可能性があります。
そのため、操作は慎重に行いましょう。
競合してしまった時の操作は、次回の記事で説明予定です。
さいごに
今回は、ブランチとマージについて紹介しました。
慣れない作業で、最初は不安かもしれませんが、自分で作ったリポジトリで練習して慣れていきましょう！
