【Gitクライアント Fork】基本的なコマンドの使い方

前日の記事は[ariaki](https://qiita.com/ariaki)さんの[「古のPHP5.6プロジェクトをdeployerでデプロイする」](https://qiita.com/ariaki/items/6d03809957ddbdad964d)でした。

# はじめに
みなさん「Git」の操作は「CUI」ですか？「GUI」ですか？

私のGitの使い始めは「コマンドの意味を理解する」のが大事と考え、「CUI」操作だったのですが、
ある程度理解してきて最近は「Fork」というGitクライアント（GUI）を併用しています。
「差分、ツリー、ブランチ一覧」などはこっちが見やすいからです。

また、なぜ併用しているかというと「Fork」の使い方を一部しか知らないからです。
そのためこの記事を通して自分自身「Fork」の使い方を知っていきたいと思います。

# Forkについて
上記にも記載しましたが、Git クライアントツールです。


インストールについてはこちらから行います。
https://fork.dev/
Mac、Windowsと分かれているためご自身の環境に合わせてダウンロードしてください。

インストールから使用するまでの詳細設定について、
わかりやすい記事がありましたのでこちらを参考していただくといいかなと思います。
https://hugo-de-blog.com/git-fork/

# 基本操作について
### 記事の前提
今回は私が普段「CUI で使用しているコマンドを Fork で使えるようにする」のが目的ため、
Gitコマンドの詳細については基本的には触れないためご承知おきください。

また各操作にはキーボードでのショートカット操作もあったりするので、
興味があれば実際に使って探してみてください。

Gitコマンドの詳細が知りたい方は以下の動画がおすすめです！
https://www.youtube.com/watch?v=7_JtLzI9iqE&t=605s

弊社メンバーが実務でよく使うコマンドからたまに使うコマンドまで丁寧に説明しています。

## ブランチ作成
※`master`や`main`ブランチがある前提です。

1. 派生元となるブランチへ移動します
    a. 移動したいブランチをダブルクリック or 右クリック→「Checkout '`ブランチ名`'」で移動できます。
    b. 今回は`develop`ブランチを派生元とします。
1. 右クリック→「New Branch」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/b64946df-0843-c601-f265-f5d18d741daa.png)
1. 作成したいブランチ名を入力し「Create and Checkout」をクリックで新しいブランチが作成されます。
「Check out after create」にチェックを入れておくことで、作成したブランチへ移動してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/9e254fb6-e75a-5ab3-f59c-0fabe417d0b6.png)
 
## add
Fork では`add`する前は「Unstaged」した後は「Staged」へファイルが移動します。

1. `add`したいファイルを選択し「Stage」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/42f1f791-f6a2-85fa-0e6f-95ce08d83d5e.png)

2. ファイルが「Unstaged → Staged」へ移動し、コミットできる状態となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/3ef9dd8e-533f-0838-0ebd-09d200f80389.png)


## commit 
コミットするファイルを「Stage（add）」したら画面右下にコミットメッセージ、説明文（必要に応じて）を入力したら青い「Commit 2 Files」ボタンを押下でコミット完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/d0b94440-b9bb-30a0-c10b-a4a4e1038ae1.png)

## push
1. `push`したいブランチに移動します。
1. 画面中央上部に「Push」があるのでそれをクリックすると`push`に関する情報を選択できます。
通常はそのままでOKです。
`push`先のリモートブランチも自動で選択先としてくれています。

※例えば`rebase`行ってコミットIDが変わっていたりする場合は「Force push」にチェックをする必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/6a40b6e0-173d-0d16-e337-9828cf04eacf.png)

## fetch
画面中央上部にある「Fetch」ボタンを押下
自動で「Fetch」してくれる設定もありますのでしておくと楽です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/f3be3243-26ca-a7f4-7ed5-375e4a146a1f.png)


## pull
例：リモートの`develop`ブランチの内容をローカルの`develop`ブランチに`pull`する

1. `develop`ブランチに移動します。
1. 「2↓」と表示されていて、差分が出ていることがわかります。
（リモートブランチよりも遅れている状態です）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/231a6b89-6b89-d22c-ff09-3da34c95719f.png)

1. 画面中央上部の「Pull」を押下するとモーダル画面が出るので右下の青い「Pull」ボタンを押下することで`pull`は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/f16d3d00-d517-f109-ad25-26de304fe5db.png)

## stash
1.stash したいファイルを選択して画面中央上部の「Stash」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/74e07ced-5c21-d438-d9d7-3ad7772d705c.png)
2. 必要であればメッセージを入力し「Save Stash」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/d0df8de2-8b26-d7e1-2f53-9e350ca2ae8a.png)

3.「stash」した内容は左側の「Stashes」で確認でき、目的の箇所をクリックすると編集していたファイルや内容を確認できます。右クリックから削除することもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/fb04800b-7a26-0aa0-02f5-3dc43897cdec.png)

4.stash した内容を戻したい場合は対象の箇所を右クリック→「Apply メッセージ名」 をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/78038c96-a741-6341-966b-ea1099c0ba97.png)
5.「Apply」押下で「stash」していた内容を戻すことができます。
（stashしていた内容は削除されます、残すこともできます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/05dd557d-28e8-a570-817e-4d200910214f.png)

### 差分の確認方法
画面左上の「Local Changes」をクリックすると画面中央に修正・新規作成したファイル、右側には修正差分が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/0bbb60a3-c803-8bfa-35af-adb92e8ca30a.png)

## merge
例：`b`ブランチを`a`ブランチにマージしたい場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/bf449e75-4161-c269-4c4a-673913db25b4.png)

1. `b`ブランチに移動します。
1. 画面左側の`b`ブランチを`a`ブランチへ「ドラッグ & ドロップ」し「Merge 'b' into 'a'...」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/dbf63973-5aab-a810-b7d3-2e9527e20e7f.png)

1. 内容を確認して「Merge」をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/5f4a2f74-83ae-e7aa-af9e-27b3fddda1c6.png)

1. `b`ブランチに`a`ブランチがマージされました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/4b2d7178-17b8-79a2-7995-6ed5783e0c75.png)



## rebase
`rebase` でできることは多くありますが、
ここでは私がよく使う以下２つについて紹介します
（他気になる方は調べてみてください）

### 複数コミットをまとめる
1. まとめたいコミットの一つ前の行を選択して「Interactively Rebase '対象ブランチ名' to Here...」をクリックします。
今回は`a`ブランチの赤枠のコミット１、２、３を一つにまとめます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/2a70bd24-12fc-f467-e1c0-0706df5aa24d.png)

1. 以下のような画面が表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/31390153-22ce-93be-bcc7-9fd1c89e314d.png)

1. コミット１に対して２、３をまとめたいので２、３の行を「Pick→Squash」のように変更し、右下の「Rebase」をクリックします。
※コミットメッセージを変更したい場合は「Rebase」をクリックする前に「Reword」をクリックして変更することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/d23d3a35-330d-6794-61f2-8b4aa32faad8.png)


1. `a`ブランチの3つあったコミットを一つにまとめることができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/c364f0d2-3c3c-fb09-1c51-5b12e9ce82d0.png)


### ブランチの派生元を変更し上流の更新を取り込む（派生元を変更する）
ここでは開発中の`y`ブランチの派生元を`develop`ブランチに変更し、`develop`ブランチにコミットされている変更分を `y`ブランチにも取り込みたいとします
（`ｘ`ブランチでコミットされた「hoge関数作成」）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/b485122a-17c0-a1a3-146c-0d0d187c08a8.png)

操作としては`merge`と同じです。

`y`ブランチを`develop`ブランチで`rebase`したいので、
1. 画面左のブランチ一覧の`y`ブランチに移動します
1. `y`ブランチを`develop`ブランチへ「ドラッグ & ドロップ」し、
「Rebase 'y' on 'develop'」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/78467143-4844-ccbd-d9a6-732ad0162366.png)

1. 内容を確認して「submit」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/62d6c8a2-a8f8-b867-d3e4-f0a73328c9ce.png)


1. `y`ブランチが`develop`ブランチから派生され、「hoge関数作成」のコミットの内容も取り込まれました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/0a14fef9-4dee-f683-ef85-fb2e5dfc66ed.png)

## revert
ここでは「hoge関数の文言修正」のコミットに対して行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/70415e2c-c23c-3104-5fd5-b5db689e0783.png)

1. 対象のコミットを右クリック → 「Revert Commit...」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/f6e3f748-dcb4-5948-4c7e-a5dea31c6cf5.png)

1. 「Revert」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/df685f29-fcdd-37f3-0f1b-7b63e094daf9.png)

1. 対象のコミットを打ち消すコミットが作成されました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/f478175e-0fe4-196a-d101-cfba887160da.png)

## reset（--soft, --mixed, hard）
1. `reset`したいブランチへ移動します。
ここでは`z`ブランチとし「挨拶をする関数作成」のコミットまで戻りたいとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/0b0aad9b-e07e-a86f-9149-1dc947dc7820.png)

1. 画面中央の戻りたいコミットを右クリック → 「Reset 'y' to Here...」をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/8f92b0d6-5384-e6ec-929e-18b854f7045c.png)

1. クリックするとResetの詳細が表示されるので「Reset Type」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/31b8aaf2-a9ea-7b2e-0b85-1e6baf768e84.png)

1. ここでは　Mixed（デフォルト） を選択し右下の「Reset」をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/53bf9820-4214-fbe5-a4b9-ff8948115243.png)

1. コミット履歴を確認すると「挨拶をする関数作成」の状態までHEADが戻り、「hogehoge関数を作成」のコミットをする前（`add`する前まで）の状態に戻っています
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/c5759909-755d-5c2e-3efd-b80aa56d6798.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/15368a7e-6566-7fda-7e8b-88c54b79fc77.png)


## コンフリクトの解消方法
`merge`や`rebase`ではコンフリクトが発生することがあります。

今回は例として`ｚ`ブランチを`develop`ブランチにマージ、
コンフリクトを発生させそれを解消してみます。
`develop`ブランチと`z`ブランチがコンフリクトする状態を作っています。
（ソースコードは割愛します）

1. `ｚ`ブランチを`develop`ブランチにマージします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/f0dd4916-2a26-6d15-c4b8-869e4b1f464d.png)

1. 「The merge will require manual resolution」とありますが、そのまま進めて右下の「Merge」をクリックします。
（直訳するとマージは手動で解決する必要がある）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/f7912f1c-4850-76f6-5cde-a5e334b1f89d.png)

1. コンフリクトしているので、コンフリクトを解消してからコミットしてください、といった内容が表示されます。
コンフリクトをなかったことにしたい場合は画面右上の「Abort」をクリックし、コンフリクト前の状態に戻します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/3632e135-9d38-5766-1d27-41eb7cefb472.png)

1. コンフリクトしているファイルを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/86b497ef-976c-ef2f-7157-a37a01471290.png)

1. 「Merge in Fork」をクリックで内容が確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/1e16ca9d-2c1a-e879-c013-5dedc264032f.png)

1. どちらか片方の取り込みで問題なければチェックボックスのチェックを外すことで、
チェックがついている方の状態を反映することになります。
以下は`z`ブランチのチェックを外して見た状態で、`develop`ブランチの状態を反映する状態です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/c2d159ac-7f37-0375-6cd8-bbd22935889b.png)

1. 今回はどちらの状態も取り込みたいので、「Merge in Fork」をクリックし修正を行います。
修正が完了したら、画面右下の「Resolve」をクリックして決定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/9f2c6d02-ed41-6a39-25e5-a950b1414088.png)

1. `add`された状態になるので適宜メッセージを変更してコミットボタンを押せば完了です。
`develop`ブランチに`z`ブランチがマージされました。
。ｔｗ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/1815aa61-c4ec-d9e0-9768-3759ed9b22b4.png)

## cherry-pick
`c`ブランチに対して`b`ブランチの「phpでhoge」というコミットを取り込むとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/f17c40d2-4cea-68b2-dabc-6471b486cdc5.png)

1. `c`ブランチに移動し、「phpでhoge」の箇所で右クリックし「Cherry-pick Commit...」をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/59a667c1-31b3-12a3-6642-ef623a5cbddf.png)

1. 画面右下の「Cherry Pick」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/032bf194-52a0-141f-efa9-d8b1a80aad90.png)

`c`ブランチに「phpでhoge」のコミットを取り込むことができました。
（コンフリクトした場合は解消することが必要です）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/3812d6e1-9296-dca8-07d3-bb1906f127e2.png)

## まとめ
今回の普段使っているコマンドを「Fork」で行う方法を紹介しましたが、
「Fork」の機能としてはほんの一部にしかすぎないと思うので便利な操作を見つけたらまた紹介できればと思います。

また機能を紹介するにあたり、
当然Gitの理解が必要になるため改めて勉強できて良い機会となりました。

明日は [@tkek321](https://qiita.com/tkek321) さんの[最低限これだけおさえる DB インデックス](https://qiita.com/tkek321/items/a5db528a9666360075d1)です。

## 参考サイト・本
https://fork.dev/

https://hugo-de-blog.com/git-fork/

https://www.amazon.co.jp/%E7%8B%AC%E7%BF%92Git-%E3%83%AA%E3%83%83%E3%82%AF%E3%83%BB%E3%82%A6%E3%83%9E%E3%83%AA/dp/4798144614/ref=tmm_other_meta_binding_swatch_0?_encoding=UTF8&qid=1702775742&sr=8-1