Git001:簡単なGitの導入方法 VS code

初めまして。

僕は休日に趣味でProgramをやってますが、この度、ステップアップの為にQiitaを始めようと思います。
まずは現在、どのProgramをするにもまずは覚えた方がいいSouce管理SystemのGitについて書きたいと思います。

Gitは便利だけど、けっこう導入でハマります。
手早く開発環境を構築したい人で、GUIでのサポートも受けたい人はVS codeを使う事をお勧めします。

環境としてはWindowsのPortable環境でGit Hubを使用することを想定しています。

## VS codeを入手
https://code.visualstudio.com/Download
から`WindowsのZIP`をDownloadします。

好きな場所にZIPを解凍すれば使用可能になります。

## Gitの入手
https://git-scm.com/download/win
から`Git for Windows Portable`をDownload。

## Git Hubのリモートリポジトリを用意する。
Mypage右上のアイコンを押してYour repositoriesを選択。
![GitHub0002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/68c70a2a-e9c0-2a6e-66aa-43547ffbae73.png)

Newを押してフォルダを新たに作ります。
![GitHub0003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/929f5dfc-bffa-0ddb-9ec1-95da5a3ea10e.png)

リポジトリの設定をしてCreate repository。
![GitHub0004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/713ff9ce-2994-b9a0-b274-0b62d3d33dca.png)

アドレス`「https://github.com/*********/*****.git」`をメモしておきます。
![GitHub0005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/709a0f6b-9c22-eaae-3fe2-785691b91d01.png)

## VS codeでローカルのGitを関連付ける。
VS codeを開いて左下の歯車で設定を開きます。
![GitHub0011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/b0ae0046-dcf3-c517-b174-3020421d4d8d.png)

設定のGitの項目を地道に探しても良いですが、Git.pathで検索し、settings.jsonで編集します。
![GitHub0013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/ae7f7645-b925-2861-0291-8c820520b662.png)

バックスラッシュ2個でGitのPathを記述し、保存します。
ついでにターミナルもGit機能を含んだgit-cmd.exeにしましょう。

``` 
{
  "git.path": "D:\\ProgramFiles\\Coding\\PortableGit\\cmd\\git.exe",
  "terminal.integrated.profiles.windows": {
        "Git CMD": {
          "path": "D:\\ProgramFiles\\Coding\\PortableGit\\git-cmd.exe",
          "args": []
        },
        "Git Bash": {
            "path": "D:\\ProgramFiles\\Coding\\PortableGit\\git-bash.exe",
            "args": []
          }
    },
    "terminal.integrated.defaultProfile.windows": "Git CMD"
}
```
※Pathは各自の環境に合わせてください。

設定を反映する為にVS codeを一度再立ち上げします。

## VS codeでリモートリポジトリをクローンする。
他のサイトでGitの立ち上げ方の手順を見てると、この辺りでローカルリポジトリ作成とかするのですが・・・・ローカルリポジトリとリモートリポジトリが不一致で何かトラブって関連付けられませんみたいなトラブルが頻発します。
で、トラブル解決するためにローカルリポジトリ全部消してクローンしなさいってのが流れです・・・。

最初からローカルリポジトリとか作らずに、空の状態から始めてリモートリポジトリからクローンでローカルリポジトリ作成で良くね？って話で。

左タブのソース管理を開き、リポジトリのクローンを押します。
リポジトリのURL入力欄が出るので、先ほどメモしたURLを貼り付けます。
![GitHub0017.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/dcfc0e2b-d78b-09ed-2e11-b16cd5d21386.png)

※または、VS codeを立ち上げた時の「作業の開始画面」で「Gitリポジトリのクローン」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/67f53133-da3b-cede-9b28-d8885e270aa0.png)

ポップアップが何個か出てくるので「開く」とか、「はい」を選択。
![GitHub0018.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/e9365c60-0d98-074d-6d1a-c2ae42d394fa.png)

![GitHub0019.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/6295aa97-77ad-0e32-4e44-e553ec45de2a.png)

複製するフォルダを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/ec23fc60-a7f7-2c9a-cc3a-e89213001cb1.png)

<details><summary>Cloneができない場合(pingしてみよう)</summary>
まずは基本としてpingが通らないならCloneできません。
pingが通らないならInternet接続やSecurityを疑いましょう。

案外馬鹿にできない方法で、SecurityがServerをはじいてる場合にWebは表示するけどpingは通らない事が有ります。
```
ping github.com
github.com [20.27.177.113]に ping を送信しています 32 バイトのデータ:
要求がタイムアウトしました。
要求がタイムアウトしました。
要求がタイムアウトしました。
要求がタイムアウトしました。
```

</details>

<details><summary>Cloneができない場合(Safe Directory登録)</summary>

https://chigusa-web.com/blog/git-fatal-error/
このページにあるようにgit cloneするFolderによってはgitが動作しないようです。
私の場合はd: driveにCloneすると動作しませんでした。

command promptでpullしてやるとError messageが出ます。
Portableでやってるなら下記のように絶対Passでgit commandを実行します。

``` git:Terminal
D:\\ProgramFiles\\Coding\\PortableGit\\cmd\\git.exe pull origin master

fatal: detected dubious ownership in repository at 'D:/NowWorks_Git/study'
'D:/NowWorks_Git/study' is on a file system that doesnot record ownership
To add an exception for this directory, call:

        git config --global --add safe.directory D:/NowWorks_Git/study
```
Helpの通りsafe directoryに登録してあげると動作するようになりました。
``` git:Terminal
D:\\ProgramFiles\\Coding\\PortableGit\\cmd\\git.exe config --global --add safe.directory D:/NowWorks_Git/study
```

</details>
<details><summary>Cloneができない場合(他人のGithub Private Repository)</summary>
Private Repositoryは一般公開されていないRepositoryです。
それにAccessする為にはCollaboratorsに登録されている必要が有ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/374c46bb-7cfe-56d1-1a40-3dc451f5e78d.png)

RepositoryのSettingから登録してもらう様に連絡しましょう。
登録してもらえないならAccessはできません。

</details>
<details><summary>Cloneができない場合(Github Private Repository)</summary>
Git hubでPrivate RepositoryをCloneへの接続の場合、SSH接続も一度試してみてください。Git hubのセキュリティの変更でHTTPでは接続されないみたいな話もあります。（でも接続できる時もあるような・・・）

SSHでもだめなら、VS codeの設定に関わるものかもしれないですが、変にVS codeにこだわって頑張るより、普通にコマンドでCloneする事をお勧めします。

今後も細かくMerge動作やCommit Resetなどをしたいという時にはVS codeでは対応できません。困ったときはコマンドで解決するのが一番早いです。


①VS codeの上メニューの表示でターミナル表示状態にします。
　ターミナル上にcd ****を入力し、CloneしたいFolderへ移動します。
②下記のCommandでCloneします。
git clone https://(AcesssしたいUserのGithubアカウント)@github.com/(CloneしたいGithubアカウント)/(Repository名).git
③ブラウザが開いてGit hubのログイン画面が出ますのでログインしてください。

</details>
<details><summary>SSHで接続する場合</summary>

SSH Keyを生成します。
```
ssh-keygen -t rsa -b 2048 -C "your_email@example.com"
```
Windowsの場合はssh接続の設定は下記に保存されます。
C:\Users\<user name>/.ssh/id_rsa/
このid_rsa.pubの中のテキストをコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/8223da42-e4a7-0878-7c16-7f082ad51a00.png)


Git hubの自分のページに行き、自分のアカウントのSSH設定に登録します。右上のアカウントのマークを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/a8fa0ac1-5b96-6a38-2761-2bcc207da83e.png)
SSH and GPG keys
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/6a03a90f-52c3-0bc4-9c98-6085c7d8302d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/9c50e9f6-8342-a67a-df6a-8c5d8c53c010.png)
New SSH key
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/dc73bf15-86ef-4d85-34f0-97a81c79eb07.png)
Titleはなんでもいいので、Keyに先ほどのpubファイルの中身をペーストします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/05463260-a3a6-6e68-35e5-33cb2680cc69.png)

gitで使用するsshCommandの設定を確認しましょう。
```:C:/Users/user name/.gitconfig Windows標準
[core]
	quotepath = false
	sshCommand = C:/Windows/System32/OpenSSH/ssh.exe
```
Portable gitを使用する場合は下記のような設定が必要です。
```:*/PortableGit/etc/gitconfig PortableGit
[core]
	quotepath = false
	sshCommand = ****/PortableGit/usr/bin/ssh.exe
```
```　C:\Users\****\AppData\Roaming\Code\User\settings.json
    "git.path": "****\\PortableGit\\bin\\git.exe",
    "git.sshCommand": "D:\\ProgramFiles\\Coding\\PortableGit\\usr\\bin\\ssh.exe",
    "python.autoComplete.extraPaths": [],
    "python.defaultInterpreterPath": "****\\WPy64-38100\\python-3.8.10.amd64\\python.exe",
```
下記のコマンドでGithubにSSH接続ができるか確認します。
```
ssh -T git@github.com
Hi ****! You've successfully authenticated, but GitHub does not provide shell access.
```

SSH接続が確立したなら前に戻ってCloneとPull操作をしてみてください。
もしも、CloneはできたがPullできない場合は実はhttpで接続する設定になっているかもしれません。Local Repositoryの./gitのremoteの設定を確認してください。
``` LocalRepository/.git/config
[remote "origin"]
	url = git@github.com:****/****.git
	fetch = +refs/heads/*:refs/remotes/origin/*
```


</details>




## まとめてコミット
ローカルリポジトリに移動すると、下記のように.gitフォルダができています。
登録したいソースファイルをまとめて追加します。（下記画像ではSourcesフォルダを追加しています。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/109491f4-be3d-06d1-41f7-e633651ecaeb.png)
VS codeのソース管理を開くと追加したファイルがリストアップされています。
コミットの上に更新内容のメッセージを記述し、コミットボタンを押します。
![GitHub0021_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/848feafe-3964-c372-6402-6cc3e1e1e085.png)

ポップアップが出るのではいを選びます。
![GitHub0023.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/a1077afa-3ef8-717e-59b2-def3d53d3b58.png)

ちなみに、レアな状況とは思いますが、Gitを置いているDrive容量が足りなくなると下記のようにErrorが出ます。
``` git:Terminal
  fatal: unable to write new_index file
```
コミットや変更の取り消し、Git操作をするごとにGitへ記録が書かれますので、空き容量0になるとあらゆる状況でこのようなErrorが出るかもしれません。
頭の片隅に覚えておくと良いかもです。

## このままプッシュまでやろう
ここでプッシュまでやるのをお勧めします。
ローカルで頑張って更新してもプッシュの時点で不整合が起こる事があるので・・・。😓


ソース管理の右上の・・・のプッシュを押すか、変更の同期ボタンを押します。
![GitHub0042.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/bb8d0e11-79b0-da92-2eaf-e5880b96d08c.png)

CredentialHelperSelectorというポップアップが出ますがmanagerでも選べば良いと思います。no helperを選ぶとパスワード入力になります。
![GitHub0032.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/26c240ae-5148-6ae9-f9ba-cb9364b9b619.png)

Git hubに行くとこのようにrepositoryが登録されていたら完成です。
![git0031.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/8a13effc-f6cb-4cfb-cf82-9d362535619b.png)


あとはSourceを変更するたびにコミットをしたり、戻したりするわけです。ただ、調子に乗って10000件とか更新するとVisualStudioCodeからお𠮟りを受けます。その場合は粛々と.ignore fileを書いてください。


https://atelier-light.com/blog/vs-code-gitignore/

https://qiita.com/inabe49/items/16ee3d9d1ce68daa9fff

#### VScode拡張
今後、Gitを使ったSoft変更管理を行うのであれば、変更履歴がビジュアル的に見えるビューワーを使う方が良いです。


VS codeの拡張機能TabでGitで検索すると色々出てきますので好みでInstallします。
個人的にはGit Graphがあれば困らないと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/47026d2f-76e1-1a2e-c5cd-d5dfed884c38.png)

使い方はソース管理で下記赤枠を押すと、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/8c444bcd-3cd7-8f27-6e85-868034879bd9.png)

こんな感じでBranchを図示してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884555/4ff2c376-3463-b217-8fc9-5eb9776a6de1.png)