[VScode] git/ GitHub を管理する方法

# 概要
Visual Studio Code を利用して、git で作業ディレクトリ（ローカルディレクトリ/リモートディレクトリ）を管理する方法についてまとめる。

# 前提知識
[ターミナルで git/github を管理する方法](https://qiita.com/ub0t0/items/04b67ac95a1adb8cbe3c)

# 環境
- Visual studio Code 1.47.2
- git 2.17.2 （ユーザー名、メールアドレスなどの初期設定済み）

# 事前準備
作業フォルダとして事前に「gitVScode」を作成し、「hogehoge.md」 を格納
![スクリーンショット_2020-09-29_14_30_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/db167318-03bc-c9d6-0258-025ea13ec432.png)



# ローカルディレクトリの管理

### git init //フォルダをバージョン管理の対象にする
[Initialize Repository] をクリック
![スクリーンショット_2020-09-29_14_24_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/7252c477-557f-9e8b-4e17-1c304f1c154e.png)

フォルダに「.git」が作成された
![スクリーンショット 2020-09-29 14.39.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/93e7be12-7ae8-8e7b-1a2f-248c3d034ea9.png)
※「.git」は隠しファイルであるため、隠しファイルを表示するように設定
　mac の場合、`command + shift + . `で表示/非表示の切り替えが可能


### git add //記録対象の指定
変更がある場合に左側のアイコンに❶といったように表示される
対象ファイルのプラスマーク（[Stage Changes]）をクリック
![スクリーンショット_2020-10-12_11_04_47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/b1aff656-7885-985c-1813-4b29612d4c10.png)


複数ファイルを一括でステージさせたい場合は [Changes] の横をホバーすると [+] が出てくる
![スクリーンショット_2020-10-12_11_05_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/d1548a5d-8959-d706-51e2-e89dd0de2536.png)


### git commit  // 変更点の記録
[Message] にコミットメッセージを入力する
![スクリーンショット_2020-10-12_11_09_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/57130dc9-981a-768e-b778-d4bcac7b121d.png)

入力したら、[✔︎] をクリックすると commit 完了
![スクリーンショット_2020-10-12_11_11_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/a139720a-1c66-6062-493a-e8daf7cefaac.png)


# リモートディレクトリ(GitHub) の管理
### GitHub でリポジトリを作成
[Your profile] → [Repositories] → [New] をクリック
![スクリーンショット 2020-09-10 17.05.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/abfe8a08-7a2d-ac7c-6c0d-0db69221e5bb.png)

[Create a new repository] ページが表示されるので、[Repository name] を入力する。ここでは、ローカルフォルダとあわせて「gitvscode」とする。
![スクリーンショット 2020-09-29 15.39.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/dbf00482-d073-fba6-8200-8272cebfddd7.png)

設定が完了したら、[Create Repository] をクリックする
![スクリーンショット_2020-09-29_15_40_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/c57f0768-ef7c-789b-961a-0b3d05e7423c.png)


画面に表示された [HTTPS] か [SSH] をコピーする
ここでは、[GitHubでssh接続する手順~公開鍵・秘密鍵の生成から~](https://qiita.com/shizuma/items/2b2f873a0034839e47ce)を参照し、SSH の設定を行っている

### git remote add //ローカルディレクトリを github のリモートディレクトリに紐づける
[・・・] → [Remote] → [Add Remote] をクリック
![スクリーンショット_2020-09-29_15_48_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/8ff9d8c1-ac87-2267-2d19-15f819b9f759.png)

GitHub でコピーした https/SSH を貼り付けてエンターキー
![スクリーンショット_2020-09-29_15_48_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/6dbe1c7d-1909-bef3-9ee2-72a9f1d81b36.png)

[Remote name] に「origin」と入力し、エンター
![スクリーンショット 2020-09-29 21.22.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/87501c4f-0e32-4a0c-865f-a69673475745.png)

ターミナルで`git remote -v`を入力し、正しく登録できたか確認![スクリーンショット_2020-09-29_21_24_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/f54ddbd5-b0c3-3552-af39-90ebf471d5cb.png)

### git push //commit 済みのディレクトリを github に更新

[・・・] → [Push] をクリック
![スクリーンショット 2020-09-29 21.35.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/288a8136-dc21-ef63-d07c-8057a9a4e6e7.png)

 初回は以下のようなメッセージがでる。このメッセージは、新規ブランチなので、リモートに紐づけるブランチ（追跡ブランチ/アップストリームブランチ）がない、というメッセージ。
![スクリーンショット 2020-09-29 21.35.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/f2998d63-de8e-ee21-471b-69b6a7743471.png)
参照:[Git で新規ブランチを切って Push する時に何やら怒られるヤツの回避方法](https://neos21.hatenablog.com/entry/2017/05/10/080000)

[OK] をクリックした後に追跡ブランチを確認する`git branch -vv`を実行

```:TERMINAL
gitVScode $ git branch -vv
* master 8bd914e [origin/master] add message
```


[Cancel] をクリックして、`git push -u origin master`を実行後、追跡ブランチを確認

```:TERMINAL
gitVScode $ git push -u origin master 
Counting objects: 3, done.
Writing objects: 100% (3/3), 214 bytes | 214.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/xxxxx/gitvscode.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

gitVScode $ git branch -vv
* master 58b5df5 [origin/master] add message
```
`git push -u origin master`を実行した時と、追跡ブランチが同様に設定されていることが確認できたので、初回に表示されるメッセージは [OK] を選択して問題ないことがわかった。



### git pull // ローカルリポジトリに最新版を適用
github 上で変更した場合は pull コマンドを利用して、ローカルリポジトリも更新する

[・・・] → [Pull] をクリック
![スクリーンショット 2020-09-29 21.34.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/dd334cdc-a8f5-0555-2b7c-6f8fda1e4e0e.png)


# VScode では利用しないコマンド
### git status //ステータスの表示 
[Changes] 以下にファイル名が並んでおり、ファイルの追加、編集、削除を行うと自動的に `U`, `M`, `D`がファイル名の横に記載される
![スクリーンショット 2020-09-29 14.54.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/a6bb94ff-12a7-050d-9991-b3fa15e2a58b.png)
ステータスの表示にあたる画面


### git log // ログの表示
デフォルトでは git log に替わる UI がないため、ログを見やすく表示することができるアドインツール（Git History）をインストールする必要がある
![スクリーンショット_2020-09-29_21_47_42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/3effd0d3-0d66-563b-d72d-3510810f2026.png)

 [Git : View History (git log)] アイコンが表示される。クリックするとログが表示される。
![スクリーンショット_2020-09-29_15_28_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/e9046306-9f05-6663-e7d5-5c04fe07c7ab.png)



# 参照
- [VSCodeの機能で最低限必要なGit操作をしたい！](https://qiita.com/mnao305/items/b3c5f5943066a0bb8e2e)
- [君には1時間でGitについて知ってもらう(with VSCode)](https://qiita.com/jesus_isao/items/63557eba36819faa4ad9)
- [VSCodeでのGitの基本操作まとめ](https://qiita.com/y-tsutsu/items/2ba96b16b220fb5913be)
- [gitでローカルのブランチが追跡しているリモートブランチを確認する方法](https://qiita.com/kz_morita/items/c624f8cf27ec82de0baa)