VSCodeにおけるgitGUI操作方法

<details><summary>Gitに関連する概念</summary>

## Gitとは
`Gitとはソースコードや変更履歴を管理するために使われる、代表的な分散型バージョン管理システム
--Wiki`
## 基本概念
### リポジトリとは
ソースコードと変更履歴を格納する倉庫

### gitにおけるローカルとリモートリポジトリの役割の違い
gitは複数人のプロジェクトのソースコードを管理するものなので、
リモートリポジトリの役割：<font color="Red">共有倉庫</font>
ローカルリポジトリの役割：<font color="Gree">個人倉庫</font>

<font color="Red">共有倉庫</font>の特徴：
 * <font color="Gree">個人倉庫</font>のすべてのソースコードと変更履歴に含むこと
 * ランチ名に`origin/`がつくこと  

<font color="Gree">個人倉庫</font>の特徴：
* ソースコードと変更履歴が共有倉庫の**一部**あるいは**全部**と**必ず一致**すること

### ブランチとは
ブランチ≒<font color="Gree">個人倉庫</font>
### pull,push,fetch,cloneがやっていること

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/745656ec-0a77-08af-4a92-0cbf602d78c3.png)
引用元：[目指せ！脱初心者 Gitの基本を図解で解説](https://and-ha.com/coding/beginners-guide-basics-git/)


### pull,push,fetch,merge,commitとは
fetch：リモートリポジトリの状態を取得するだけ、ローカルブランチのソースコードを更新しない
merge：ターゲットブランチからローカルブランチにソースコードと変更履歴を取り込み、一致させること

:::note warn
mergeの際にターゲットブランチに同名ファイルが存在し、内容が異なるとエラーが出るため、同名ファイルを回避(stash)する必要がある
:::

:::note warn
回避修復(stash apply)を行う際、同名ファイルが存在し、内容が異なるとコンフリクト（衝突）が発生する、解決しないとmergが完成しない
:::

pull：fetch+merge
commit:変更したソースコードを承認すること
push：承認したソースコードをリモートリポジトリにアップロードすること
[おすすめ図解記事ーーgit pull と git pull –rebase の違いって？図を交えて説明します！](https://kray.jp/blog/git-pull-rebase/)
</details>

## VSCode インストール方法
1. git本体インストール
https://github.com/git-for-windows/git/releases/download/v2.44.0.windows.1/Git-2.44.0-64-bit.exe
インストーラ実行中のダイアログで選択肢デフォルトのままで`次へ`を選択する。
途中でpathを自動的に通してくれるチェックボックスがあるので、それだけチェック入れて最後まで進める。
2. Gitの初期設定
 Gitをインストールしたら，まずは次の内容の初期設定をしておきましょう。
 Git for Windowsに同梱されているGit Bashを起動して，以下の内容でコマンドを実行します．
    * ユーザ名とメールアドレス
    * エディタ，マージツールの設定（ここではVSCodeを指定しています）
    * pushのデフォルト方式を指定（追跡ブランチに対してpush）
        ```bash
        $ git config --global user.name 'username'
        $ git config --global user.email 'username@example.com'
        $ git config --global core.editor 'code --wait'
        $ git config --global merge.tool 'code --wait "$MERGED"'
        $ git config --global push.default simple
        $ git config --global pull.rebase false
        $ git config --global core.quotepath false
        ```

1. VSCode Extensionsをインストール
:::note info
Extensions
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/135b32bc-e69a-1ad0-185a-7126747d2f8a.png)
* VSCode内でGitの各種操作をしやすくするための拡張機能
* リポジトリの状態、ブランチ管理を視覚的に行える
:::note info
効果
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/108baf46-6ec0-ee6f-5466-287d67dd5efd.png)

## GitLensにおけるgitの利用する方法
### ブランチ構成に関して
* masterブランチ:ローカルリポジトリにてリーダークラス管理者によって管理(VSCodeのフォルダ指定先)
* 個人ブランチ：ローカルリポジトリにて各開発者が管理する(VSCodeのフォルダ指定先)
* origin/masterブランチ:リーダークラスからGitにより管理
* origin/個人ブランチ：各開発者がGitにより管理
* developブランチ：少人数でアジャイル開発に必要か要検討

### 1.空フォルダからリモートブランチを作成する場合
:::note info
ローカル上でmainブランチを作成
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/205c54dd-ec4e-e172-7df8-aa7740c2cfbd.png)

:::note info
ローカルブランチをリモートブランチとして（github）公開
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/1c662286-85a2-f531-03db-60cd3a306f68.png)
### 1.リモートリポジトリからローカルブランチを作成する場合
:::note info
リモートリポジトリからローカルフォルダにcloneする
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/f687b593-4ed5-cfc5-91d3-d3c1ec1375e8.png)
<br>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/0edc5960-896b-5015-eb09-a77b98dc487d.png)

**cloneが完成したら下記のようになる**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/320f32f7-2ccb-9ffa-7cc5-cf6e0b02a1ed.png)
**画面の左下にmainブランチが表示されていることが確認できます。
これでローカルブランチの作成が完了しました。
次に仕事上での操作として個人ブランチを作成します。**

:::note info
個人ブランチを作成する
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/c194a892-6106-757e-3fe4-45cddd6bc81c.png)
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/b4af8593-f1b6-a945-75ba-15790233c825.png)
<br>
個人ブランチ名を入力し、「Enter」を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/8951b48f-dae9-03ec-124a-973af77d868b.png)
<br>
画面左下のブランチ名が個人ブランチになっていることを確認する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/0f06462a-ad81-e7d0-94c6-234920306ca5.png)

:::note info
個人ブランチをリモートリポジトリにpushする
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/0c699221-c62a-6fac-d619-0aea09010e69.png)
以上までが個人ブランチの作成プロセス
*******
### 2.個人ブランチからソースコードをアップロードするプロセス
:::note info
#### リモートリポジトリの最新情報取得(fetch)
リモートリポジトリの最新情報取得(fetch)
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/868c7e66-ef31-6ae0-0299-b3ce1167a94e.png)

:::note info
#### リモートリポジトリの最新情報取得(~~pull(rebase)~~ pull)
リモートリポジトリの最新情報取得(~~pull(rebase)~~ pull)
:::
~~pull(rebase)を行う理由は、アジャイル開発において、毎日ソースコードをコミット＆プッシュする状況になることが想定されるので、マージコミットを作成しないpull(rebase)は、コミット履歴を綺麗にすることができます.~~

rebaseは初心者に厳しいので、pullでいい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/1be65add-89ed-46f5-4f6f-e4e9241b5a87.png)


:::note info
#### ローカル変更を退避する(stash)
ローカル変更を退避する(stash)
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/767f4d4d-c7a0-0010-6fd0-239c8e4046d4.png)

:::note info
#### 退避を戻す(stash apply)
退避を戻す(stash apply)
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/3439a9b6-c95c-fb0c-daba-836648128908.png)

:::note info
#### 変更承認（stage）する
変更承認（stage）する
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/fde532e7-6384-181f-fb3f-54c1f739c4c0.png)
<br>
修正ファイルがChangesからStaged Changesに移していることが確認できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/ba884a4e-5acb-1ac1-ce1d-20db740557f0.png)


:::note info
（commit）の変更説明をMessage欄に入れる
:::
変更説明形式に関して、
{関連案件}_{修正箇所1}_{修正箇所2}のフォマードで入れましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/25afa265-4197-886e-4cfb-69bb4378ad26.png)

:::note info
#### アップロード(commit & push)する
アップロード(commit & push)する
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/5235bff2-aba7-71e4-3361-edc0eee8210d.png)

:::note info
リモートリポジトリの同名ブランチを確認
:::
最新のコミット履歴を確認する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/89d7c461-b03c-8361-a78c-4d3bd7163d6b.png)

*******
### 3.ブランチを切り替える方法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/62a792a7-2ba1-1ed5-9ed9-e5d1413f487e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/6053bf64-5af9-4f86-842c-585a7ce26c47.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/a0c483be-4a32-c0b2-ac77-922ef1101672.png)
*******
### 4.masterブランチ更新（リリース）方法
ローカルリポジトリのmasterブランチにてpullを行う,マージコミット履歴を確認するため、pull --rebaseを使わずに通常のpullで良い

:::note info
#### 個人ブランチからmasterブランチの最新情報をpull
個人ブランチからmasterブランチの最新情報をpull
:::
:::note info
#### masterブランチに切り替える
masterブランチに切り替える
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/f73191ff-16a7-ad29-873f-92ee4c94a06f.png)

:::note info
#### 各開発者からソースコードをpullする
各開発者からソースコードをpullする(pull from)
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/7472cbb1-4a78-72a6-241a-fea24527d1c7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3735166/6254caaf-11bc-3257-7950-d9f98594ec99.png)


*******







## 参考文献
[VSCodeでのGitの基本操作まとめ](https://qiita.com/y-tsutsu/items/2ba96b16b220fb5913be)
[git pull と git pull –rebase の違いって？図を交えて説明します！](https://kray.jp/blog/git-pull-rebase/)
[目指せ！脱初心者 Gitの基本を図解で解説](https://and-ha.com/coding/beginners-guide-basics-git/)