Visual Studio Code、Gitでファイルのバージョン管理

##Visual Studio CodeでGitを利用

内容
・Git for Windows　セットアップ
・Visual Studio Code　設定
・ブランチをきる　ブランチのマージ
・GitHubのリモートリポジトリにプッシュ

1. 下記サイトよりGit for Windowsをダウンロード
https://gitforwindows.org/

2. ダウンロードした[Git-2.29.2.2-64-bit.exe]をダブルクリックしてインストールを実行
・Next
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/233a0ce5-e9e1-826f-d348-d67ebef0caa1.png)
・Next
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/a934a9f6-dc73-224a-d563-333243be095e.png)
・Next
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/330d59ff-ad2a-4f6b-d33b-e26cca86407b.png)
・Next
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/f484eb99-c0ec-9d90-dcb4-b7701faa72d9.png)
・Next
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/312d0f2e-ae78-98f7-395a-99c64d677da4.png)
・Use Git from Git Bash onlyにチェックしNext
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/63495af6-a6d0-860e-ac97-b7bde2279735.png)
・Next
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/bde6d71c-cf02-df3b-badf-a5e216ed601a.png)
・Next
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/4044fc0f-7955-78f5-f229-d637250c2b84.png)
・Next
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/11e9429b-1d29-6cb2-239b-1e79a8f9f693.png)
・Next
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/7d57a840-aab4-f48b-3adf-32143e9f9098.png)
・Next
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/a2511b81-3dbd-c2bd-a3e1-505d83685b2b.png)
・Next
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/0f167bdc-2c70-9516-fefd-52ba0fae3bde.png)
・Install
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/27546d6e-bdfe-2974-9e55-10d6ecdeec93.png)
・チェックをはずしてFinish
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/0cc0498e-23a3-57d1-7b7e-d3e30b3622e9.png)

・VSCにプラグイン[Git History]をインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/49cdb391-79c2-a779-911e-214327950f41.png)

・VSCに同様の手順でプラグイン[GitLens]をインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/99447c65-87a2-198f-31f1-7372f537e07a.png)

・GitBash起動（windowsのスタートメニューより）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/3e648958-822b-9270-68d6-f5bb233d0e27.png)

・GitBash起動後の設定
ユーザ名設定
$ git config --global user.name 'snow'
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/eb1abc27-73ba-f8ef-1644-a2aa82a4b381.png)

メールアドレス設定
$ git config --global user.email 'XXXXXX@gmail.com'
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/5bbabd55-2fe3-73ba-5f3a-b7281a00421d.png)

##VSCodeでローカルファイルのバージョン管理
VSCodeで任意のフォルダを開く
例）[C:\share\testdir]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/e6496add-5dcc-ef58-61b5-d14efd133ddf.png)

ローカルリポジトリ作成
Gitリポジトリの作成（初期化）を実施
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/ba523a5c-7b72-9af7-fecb-c22dee94cb38.png)

初期化するとVSCが次の表に表示され[C:\share\testdir]に[.git]が生成される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/2385f30c-2899-8e53-0a98-3512197aa4b7.png)
VSCでsample.txtを作成し保存
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/45247f29-3ead-5a55-a20b-f9eb73a684f5.png)
作成したsample.txtをコミット
ファイルの作成と編集を行うとサイドバーのソース管理に更新ファイルの一覧が表示
「+」アイコンでステージング実行　「-」アイコン：取り消し
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/9c32fcd4-f7f1-a70d-2dcd-ebc63a542f6f.png)

ステージング後、コミットメッセージを入力しチェックアイコンでコミットが完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/b7da84d6-d9f8-e094-0fff-bdc45b55339f.png)

sample.txtを編集し保存
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/7e7b3412-834d-1b6a-655e-dc7ea1c5b933.png)

ここまでのコミットログを確認
Ctrl + Shift + Pでコマンドパレットを開き>Git: Viewと入力しGit: View History 「git log」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/8d41750e-13ab-c824-9c82-adad691859af.png)
git logが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/00f3d08e-1110-6c14-dd7a-c3d402020431.png)
①、②の順で選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/5f3b74f2-e4ee-591b-f85a-d9598c7486e3.png)

最後にコミットしたファイル内容が表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/74140c69-ec40-1dc0-7795-71280a31b621.png)
[sample.txt]を選択すると[sample.txt(作業ツリー)]に差分が表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/66ed497a-aff9-08cc-d5bc-7fcaef81fb22.png)

getLensでリポジトリ状態を確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/114f4771-e5f5-9e7d-806d-d1bf126e3f65.png)

getLensで編集中ファイルの差分を表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/0ad233f1-ab43-99df-077e-ac6e6d7f1afc.png)

ブランチの作成（masterからブランチを作成）
ブランチ名（master）をクリックし，新しいブランチを作成を実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/13930fe6-697d-bee8-9110-1d8e7805709b.png)

新規ブランチ名「sub-branch1」を入力しEnter押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/8cbc1070-ac63-4f6d-48ea-a9e9d00f4f20.png)

GitLensでブランチを確認
ブランチ「sub-branch1」がチェックアウトされている（チェックマークがついている）ことを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/ed6fa111-33b6-c466-c694-aa6f5885ea41.png)

Git Historyでブランチ「sub-branch1」を確認
Ctrl + Shift + PでGit: View History 「git log」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/36188379-58da-7a47-7233-ec4ff090b9ff.png)

ブランチのスイッチ（Git History）
ブランチ「master」にスイッチ（チェックアウト）する場合
図の順に選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/6039ad91-28ae-ad51-7124-74999afe5e5e.png)

GitLensでブランチを確認
ブランチ「master」がチェックアウトされている（チェックマークがついている）ことを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/8b55578d-aca9-ada4-7322-51e67df6c59d.png)

ブランチのスイッチ（GitLens）
スイッチしたいブランチを右クリックし[Switch to Branch]を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/ef6cb64a-90ab-f01f-3bb2-4933ef1b3735.png)

ブランチが「sub-branch1」にスイッチされていることを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/1d24e83e-46bc-cbfa-9183-d76f8f2b5813.png)

sample.txtの変更をステージング
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/040bf384-ee41-2a44-ea6e-af959a5f9fbc.png)

ステージングしたsample.txtの変更をコミット
コミットメッセージを入力し②のチェックマークを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/41333227-4a96-2511-4bcf-b2f356587cf2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/0da6f249-128e-94ed-adf3-14eeef585259.png)

GitHistoryでコミット履歴確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/c7d4823d-5f66-dd6b-1f69-99fef1bd6984.png)

GitLensでブランチ確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/30c2d166-078f-f26a-14b0-751d616ec495.png)

コミット履歴に対応するファイル内容をそれぞれ確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/3d2af6d6-dddd-6589-b697-ec2d1cc416f5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/193c71c1-2c6f-53a0-2dcd-523335cb52cf.png)

ブランチのマージ
ブランチ「sub-branch1」をブランチ「master」にマージ
①ブランチ「master」に切り替え
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/c4af6497-a891-f4c7-1edb-b993f0447f27.png)

Git Historyでマージ元のブランチ「sub-branch1」の[More]を選択後、[Merge this commit into current branch]を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/5629b487-4547-937f-9fd7-b87300b0e9eb.png)

[sub-branch1]を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/da5ec4cc-c5a2-ef8f-53b2-76c774e04ba1.png)

[Yes]を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/52c60b70-1ad9-3d8e-17eb-2a395c3fcb1a.png)
コンフリクトが発生しなければマージ完了

同様に以下の手順を実行
・ブランチ「sub-branch1」に切り替え
・sample.txt を編集（内容は任意 今回は'Add Text2'の行を追加）
・ステージング
・コミット（コミットメッセージは任意 今回は'third commit'）
・Git Historyよりコミット履歴確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/eeb1bb60-5446-0c17-ffd8-9b7676ca0c6a.png)
・ブランチ「master」に切り替え
・ブランチのマージ（ブランチ「sub-branch1」をブランチ「master」にマージ）
・Git Historyで[Refresh]を選択しコミット履歴確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/2208c774-5d00-dbd7-e62f-01efb31c65ff.png)

##リモートリポジトリにプッシュ
リモートリポジトリ「GitHub」にプッシュ
あらかじめGitHubでリポジトリの作成をしておく（今回は[https://github.com/skymeets/test_rep.git]）

Ctrl + Shift + Pでコマンドパレットを開きGit Add を入力し[リモートの追加]を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/78d80488-6653-fb30-c310-2628b183238f.png)

リモートリポジトリURLを入力しEnter
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/04911d8d-4b90-bcda-de3c-af8533312a7f.png)

リモート名「origin」を入力しEnter
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/f4dfad22-2a83-52ec-aabd-74f9a62aabe0.png)
以上でリモートリポジトリの登録完了

プッシュを実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/1298a50c-6ae9-68fb-c661-9f2f32d07008.png)

プッシュ実行時にGitHubのアカウント「ユーザー、パスワード」を入力
以上でプッシュ完了

##クローンの実施（リモートリポジトリを他PCのローカルにクローン）

VSCでクローンを配置するフォルダを開く　今回は「c:\share」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/43e219e8-8cb7-54d7-01e6-6377ec431b6a.png)

Ctrl + Shift + Pでコマンドパレットを開きGit Clone を入力し[Git: Clone]を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/3d00673b-9f67-07b4-4e66-825643421d4c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/e29a1d6d-ce57-f7c9-d553-eabbfb8ef2c0.png)
上記URL入力フィールドにcloneするURLを入力しEnter
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/f56322e9-a0fd-6ebe-8e5f-d469c9faf992.png)
cloneするフォルダ選択画面が表示されるのでcloneするフォルダを指定(今回は「c:\share」)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/10f2d17e-b7be-fff7-d2df-71c51327569a.png)
フォルダを指定したらボタン[リポジトリの場所を選択]を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/2f5880b5-a629-7a8d-93aa-16aa167ce5fa.png)
以上でリポジトリのクローン完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30315/6c5dcfa3-f933-7e1c-15dc-e2b84145a397.png)