Git不慣れ勢を束ねて安全なチーム開発をするメモ


# git操作をVScode上で行い、開発フローをさっさと動かしたい
## ■ 本稿について
:::note
本稿は当初チーム開発時のメンバー向けにまとめたものです。
ある程度、端折っていた背景などを記載しました。
:::

git初心者同士でのチーム開発において、git操作を詳しく知らないメンバーも含め安全に行う必要がありました。しかし、開発期間はごくわずか...この状況を回避するために、下記の対応をとりました。
- **Gitコマンドの基礎的な内容を理解する（私）**
- **各種操作をGUI上で完結させる拡張機能を色々と導入する**
- **シンプルな開発フロー(Github flow)を採用し、コマンド実行に相当する操作を限定する**
- **各操作をGUI上での操作に置き換え、チームメンバーに教える**
本稿はその際の、コマンドやGUI操作に関するメモをまとめたものになります。

こういった取り組みのおかげか、チームの開発をすんなりフローに乗せることができました。

:::note warn
<font color="red">※ Gitコマンドの理解はしている人は不測の事態においては必要不可欠です。最低でも１人は一生懸命勉強しましょう。</font>
:::

## ■ 前提条件
### 対象とする動き
Github flowを回すうえで、
> - cloneする
> - pullする
> - branchを切る
> - commit/pushする
> - pull requestを作成する
> - mergeする
> - branchを削除する

といった操作について調べました。
commitの取り消しや、mergeの取り消しなどは極力行わなずに済む運用ルールとし、面倒なトラブルシューティングが発生しないように配慮します。
※大規模な開発で無ければ運用でカバーできるはず…

### 用語
デフォルトの名称を使用している。独自の名称を付けている場合は置き換えること
- `origin`: プロジェクトのリモートリポジトリの名称
- `main`: リポジトリのメインブランチ

### 環境
VSCODE上でgitにアクセスできる状態になっている

※参考　私が使用している拡張機能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/f45c7523-9c23-6b75-3d1e-b8146320b7ae.png)

- Git Graph: コミットの履歴などを可視化できる。グラフ上からのコマンド実行も可能
- GitHub Pull Requests: コミット時、コミット後にプルリクエストが作成できる。また、mergeも可能
- GitLens — Git supercharged: git上の色々な情報をVSCODE上で確認できる
- Start git-bash: ターミナル上でgit-bashが使用可能になる

## ■ 開発をはじめる  （Githubflowを前提として）
### 1. リポジトリのクローン(初回)
:::note 
<details>
<summary>対応するコマンド</summary>

```powershell:terminal
# ローカルリポジトリを置きたい階層に移動
cd working_directry
# クローンを実行
git clone https://github.com/xxxxxxxxxx.git
#　➡リポジトリ名と同じ名前のフォルダが作成される。
``` 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/52770a3d-7239-dd96-25e1-90b4e806e2c7.png)
クローンするときのURLの取得＠Github
</details>

:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/1477ca6a-a7a5-a4fc-bc7d-3537f9b3bdd4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/f67be79f-f359-b9b1-70bb-c1085873826d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/4dd32368-791e-bc20-eb13-0206b1de40ab.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/db69e2dd-b018-155b-da77-564557164232.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/361c4abc-d189-a8f8-f377-bd67800e172b.png)


### 2. データの最新化(リモート側の最新の状態を反映する)
:::note 
<details>
<summary>対応するコマンド</summary>

```powershell:terminal
# ローカルリポジトリの階層に移動
cd working_directry(local_repositry)
# ワークツリーをmainブランチに切り替え(pullの挙動には影響しないが確認用にやっておく)
git checkout main
#　➡エクスプローラータブにmainブランチのファイルが表示される。

# pullを実行する
git pull origin main
#　➡github上のメインブランチのデータを取得しローカルリポジトリ・ワークツリーに反映する。

``` 
</details>

:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/54610d77-4c29-4eb5-bbcb-9600f34cf869.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/bc990e75-e8c3-6806-dcad-4a3f8b9e14da.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/8b0a130b-dc19-28d2-3be1-98fb00d6a762.png)
後のコンフリクトの原因となるので確実にpullしておくこと
### 3. 作業用ブランチを作成し切り替える



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/76adf9ab-df14-d6fb-871d-fb9af3b1d650.png)
ブランチ名は任意だが`feature_dsuke_0224_1`のように重複しないようにしておくとよい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/926ca2a6-d8d3-4a5e-5019-fb80495da862.png)
branchの発行をクリックするとGithub上にもブランチが作成される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/119ff134-cb8a-e1d2-de2f-662d65c005fe.png)

::: note 
point
ブランチを作成した時点でbranchでチェックアウトされるため、エクスプローラーで表示されているファイルの変更は作業用のブランチに適用される。
:::

### 4. 完成したコードをコミット＋プッシュする


作業用ブランチにいることを確認して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/814d7098-57b5-237a-5ef4-93393df22495.png)
コミットし、pullrequestを作成をクリックする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/20985ea2-b422-5227-3ac8-e1a945fe89e0.png)

:::note
プルリクエスト単体を後から行ってもOK

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/4812504e-28d2-a571-207c-554e0a3cd349.png)

:::


base mainとなっていることを確認し、コメントを書いてcreate

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/ebbf87bf-9d98-eb19-7bac-d8b4b5c6d625.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/f7d4a8e2-3f92-b6ed-9bc4-1149087b5f5a.png)


---
**マージ担当**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/3d872e38-a182-9625-a42e-83200b6dcfeb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/067d3042-bdb6-ca53-a79e-67da2623d369.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/e1a0ccc5-5b08-af15-536e-b940d38106c1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/fcf68cb3-26c4-b74a-bd20-896d22925ede.png)
ブランチがローカルリモート共に削除される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/4417c26d-a531-3304-2bfb-8acc79700db2.png)
ブランチが削除されmainブランチに切り替わる。リモート側の情報と同期を行う
マージされたmainのデータがローカルに反映される(セルフでマージした場合)

---

**プルリクエスト送信者**
mergeされたことを確認したらブランチをメインに切り替える。
<details>
<summary><font color ="red"><b>確認方法</b></font></summary>
Show commit graphをクリック

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/50bc28aa-390e-24e0-a89f-5fc09b62c6df.png)
 該当するプルリクエストが承認されマージされていることが確認できる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/41495245-fa12-241d-60a5-a8960f52340c.png)
---
---
</details>

次にbranchのツリーを開き不要となったbranchを選択して左クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/b4588abc-8304-c035-37fd-fa4b1e4efe4b.png)
Delete branchを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/8d1c130b-1e4d-652b-a4e7-cd61bfa6d2dc.png)
Delete Branch & Remoteを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/e5e06cf8-5697-fecf-4325-365b20939215.png)
branchが削除される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/bd205896-80fb-799e-83f0-738d3c37bfe4.png)

:::note warn
REMOTEが削除されない場合
fetch prune を実行する[^1]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562770/c1a84004-c3ba-6439-f0e8-af57f78ef97a.png)
[^1]:  [消したはずのリモートブランチがローカルで表示されるので削除する](https://qiita.com/mitarashi397/items/48b9edf1ae6d3b8a2105)
:::
--- 





## ■ お世話になった参考ページ
https://qiita.com/rotomx/items/2c8693c11a070c00def1

https://zenn.dev/praha/articles/db1c4bcc4ef48c

https://zenn.dev/masatotezuka/articles/0c561138491569

https://tech-blog.rakus.co.jp/entry/20220624/git#git-clone%E3%81%A3%E3%81%A6

https://dev.classmethod.jp/articles/introduce-git-flow/

https://qiita.com/tatane616/items/aec00cdc1b659761cf88