VSCodeだけで、gitを操作しよう

# はじめに
gitのセットアップは済んでいる前提で、話を進めます。インストールが終わってない方は、<a href="https://git-scm.com/book/ja/v2/%E4%BD%BF%E3%81%84%E5%A7%8B%E3%82%81%E3%82%8B-Git%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">こちらのページ</a>を参考にしてみてください。

# vscodeの拡張機能

- GitLens — Git supercharged
- Git History
- Git Graph

# gitの用語集

| 用語 | 意味 |
|:----|:----|
| リポジトリ | 履歴管理を行う場所 |
| ローカルリポジトリ | 自分のPCにあるリポジトリ |
| リモートリポジトリ | GitHubにあるリポジトリ |
| インデックス | コミットしたいファイルを登録する場所 |
| ステージング | ファイルをインデックスにあげること |
| コミット | 変更を保存すること |
| ブランチ | 複数の履歴を管理するもの |
| マージ | 片方のブランチの変更を、もう片方のブランチに反映させること |
| プッシュ | ローカルリポジトリの変更をリモートリポジトリに反映させること |
| プル | リモートリポジトリの変更をローカルリポジトリに反映させること |
| クローン | リモートリポジトリをコピーして、ローカルリポジトリを作成すること |

参考：https://qiita.com/toshi_um/items/72c9d929a600323b2e77

# gitを用いた開発の流れ

1. GitHubにソースコードをあげる
2. developブランチを作る
3. コードを編集する
4. コミットする
5. プッシュする
6. プルする
7. ３〜６を繰り返す
8. masterブランチにマージする

基本的にmasterブランチは直接いじらないようにする。

# ソースコードをGitHubにあげる

### 1. gitのソース管理プロバイダに登録する

左のタブで、git（上から三つ目のタブ）を選択して、プラスボタン(赤の丸で囲んだやつ)をクリックする。

<img width="1501" alt="スクリーンショット 2019-12-25 14.43.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/ef848736-fc4f-1b42-f7e9-295699e0ca22.png">

初回のコミットをする。変更を保存したいファイルの左側にあるプラスボタンを押して、ステージングする。入力欄にコメントを打って、チェックボタン（赤のまるで囲んだやつ）を押すと、コミットができる。

<img width="1501" alt="スクリーンショット 2019-12-25 14.56.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/632bb34c-c6e4-c33c-0971-67e721e91691.png">

### 2. GitHub上でリポジトリを作る

リポジトリを作成して、URL（赤線で囲んだ部分）をコピーしておく。

<img width="1388" alt="スクリーンショット 2019-12-25 14.40.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/fa0b1102-6b84-cf69-1753-387cf1f73090.png">

<img width="1388" alt="スクリーンショット 2019-12-25 14.41.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/a173c936-d94f-fb76-b253-299fd912963f.png">

### 3. GitHubにソースコードをあげる

F1キー（または、fn+F1）を押して、「Git:リモートの追加」を選択する。

<img width="1501" alt="スクリーンショット 2019-12-25 15.03.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/a084c028-e941-2bb3-cd4f-f5613c864165.png">

リモート名は「origin」にする。

<img width="1501" alt="スクリーンショット 2019-12-25 15.04.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/2a25e510-f58d-93a8-0cc0-eb260eb59fe3.png">

先ほどコピーしたURLをペーストする。

<img width="1501" alt="スクリーンショット 2019-12-25 15.05.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/8d028c2c-5a00-33e2-b3c3-077da58b4e07.png">

# GitHubからソースコードをダウンロードする

GitHubにアクセスして、URL（赤線で囲まれた部分）をコピーする。

<img width="1381" alt="スクリーンショット 2019-12-25 15.23.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/bc6a85f5-74db-bdcd-51f8-2982ed5543a9.png">

F1キー（または、fn+F1）を押して、「Git:クローン」を選択する。

![スクリーンショット 2019-12-25 15.31.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/9d86d3e4-4b19-2de7-4da7-9ac1605d66fa.png)

先ほどコピーしたURLをペーストする。

![スクリーンショット 2019-12-25 15.32.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/9321dbd2-c820-5ede-046f-b66c5a678041.png)

# gitの基本的な操作

### ブランチを作成する

左下のmasterを選択する。

<img width="1501" alt="スクリーンショット 2019-12-25 15.40.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/b32ac91a-82a8-051e-7c9b-d413e4885a78.png">

「新しい分岐の作成」を選択する。

<img width="1501" alt="スクリーンショット 2019-12-25 15.40.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/dd5bf4a0-6087-9038-cf2d-22df1e388a5f.png">

ブランチ名を入力する。今回は、「develop」にした。

<img width="1501" alt="スクリーンショット 2019-12-25 15.40.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/2f991575-7654-6450-dc22-7db6f71df277.png">

### 変更を保存する（コミットする）

赤線で囲まれたボタンは左から順に、「ファイルを開く」、「変更をステージング」、「変更の破棄」です。今回は、変更を保存したいので、プラスボタンを押してステージングする。

<img width="1501" alt="スクリーンショット 2019-12-25 15.48.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/e651130f-3ea6-1550-ddf9-5d0b47487ee3.png">

入力欄にコメントを追加して、チェックボタンを押す。ちなみに、 「 ⌘ ＋ リターンキー 」 でもコミットできる。

<img width="1501" alt="スクリーンショット 2019-12-25 15.54.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/87d310ac-36e6-891d-415e-10d930540c72.png">

### 変更をGitHubにあげる（プッシュする）

赤線で囲まれた部分をクリックする。初めてこのボタンを押すときは、雲のマークになっている。基本的に、このボタンを押しておけば、リモート上で変更があれば、プルもできる。

<img width="1501" alt="スクリーンショット 2019-12-25 16.03.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/c7bdbfb9-d2e8-5e8b-af58-41e81670c6cb.png">

### ブランチを切り替える（チェックアウトする）

左下のブランチ名（赤線で囲まれた部分）をクリックする。

<img width="1501" alt="スクリーンショット 2019-12-25 16.21.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/8dae78cb-f8e9-9dbe-f841-51eed712e70f.png">

切り替えたいブランチを選択する。

<img width="1501" alt="スクリーンショット 2019-12-25 16.26.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/f67fdf40-73ec-a691-21f0-57c6b6cb1c04.png">

### 異なるブランチ同士で変更を合わせる（マージする）

今回は、developブランチでの変更を、masterブランチに反映させる。まず、進んでいない方のブランチに切り替える。（今回は、masterブランチに切り替える）

F1キー（または、fn+F1）を押して、「Git:ブランチをマージ」を選択する。

<img width="1501" alt="スクリーンショット 2019-12-25 16.17.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/b1de1065-5a74-c297-2bc1-5829417c6150.png">

developを選択する。

<img width="1501" alt="スクリーンショット 2019-12-25 16.17.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519787/9dc3c156-e824-555b-16ea-399cc2eaa605.png">