Sourcetreeでの作業はVisual Studio Codeでやれるのか

## Sourcetreeでしている作業

1. Gitのクローン生成
2. ブランチ操作(作成、切り替えなど)
3. マージ
4. チェリーピック
5. コミット
6. プッシュ
7. プル
8. Gitの履歴検索
9. Diffの確認

GitLabではMerge Requestを稀にするくらいでGit操作はほぼSourcetreeでしていた(周囲の環境がそうだったので)。

## Visual Studio Code(VSC)でしている作業
1. テキストエディター
2. コードの１行ごとのGit履歴確認
3. ノート作成

関わっていたAndroid開発では、エンジンが主にC++だったのでAndroid StudioでやるよりVSCの方が都合が良かったため使い始めたのがきっかけ。
Android StudioもC++ソースをジャンプしたりできる時があるのだが、プロジェクトの環境のせいかできないことがあったがVSCだと問題なくできたのでそのまま使うことにした。
さらにVSCは拡張性が非常に高く、[GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)を用いればカーソルを持っていった行の横にGitの履歴が出せるのが本当に素晴らしい。

関わった案件だと、SVNが主流だった時の名残なのかソースのコメントに残していた。

```
@override
public void onResume() {
    super.onResume();
    //ADD 2021.04.29 K.Namae ○○案件 ~~~~のための実装 START -->
    sample();
    //ADD 2021.04.29 K.Namae ○○案件 ~~~~のための実装 END <--
}

//~中略~

//ADD 2021.04.29 K.Namae ○○案件 ~~~~のための実装 START -->
private void sample() {
    //何か
}
//ADD 2021.04.29 K.Namae ○○案件 ~~~~のための実装 END <--
```

みたいな感じ。いつ何のために追加、修正、削除したのかがわかるのでいいが、当然その分ソース量が増えて読みづらくなることもあった。それが読みやすいまま同じことができるGitLensさえあれば事足りることがわかった。

他の拡張機能で[VSNotes](https://marketplace.visualstudio.com/items?itemName=patricklee.vsnotes)というのもあり、VSC内でメモ用にファイルを作成できる。ただメモをとるだけならメモだけ独立したものでもいいが、ソースをVSCで見ながらメモをとりたい時には非常に役に立つ。これを使う前は別途テキストエディターを開いて作成していた。もちろんVSC内でそのまま(macだと)File > New Fileでファイル作成はできるのだが閲覧も含めてこっちの方が個人的には使いやすい。さらにVSNotesの設定をすれば、新規作成時にテンプレを設定することができるため、案件のメモ時は必ずそれを用いている。

## 今回の目的
Visual Studio CodeでSourcetreeの作業を全て実現できたら、１つの統合できるのでいいじゃん！という考え。そのためにはSoucetreeでやっていた作業をVSCでできる？という確認をする必要があった。この記事はSourtreeからVSCに移行したい人向けなので、Sourcetreeの各手順は省略する。以下からはVSCの手順について確認。

## Gitのクローン生成
いつも通りGitリポジトリのURLを設定するとGitLabからクローンも問題なくできました。
![スクリーンショット 2021-04-29 12.30.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1357040/9ced71d5-a5cf-2942-4e29-966a94311e3c.png)



## リポジトリ一覧は見れるのか
Sourcetreeだと以下のようにクローンしたリポジトリが一覧で確認できる
![2021-04-29 12.26のイメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1357040/9e8bef65-ae13-edb3-3e14-f55739d0ecfe.jpeg)



調べた限りではVSCでは同じことをする方法が不明。実際一覧で見れなくてもクローンしたプロジェクトをまとめるフォルダさえ用意しておけば問題ない。

## ブランチ操作
クローンしたら最初はmasterなのでほとんどの案件でブランチを開発用に切り替えるはず。画面下部に現在のブランチ名が表示されるので、ブランチ名をクリックするとブランチ一覧が表示されるのでそこからブランチ切り替えができる
![スクリーンショット 2021-04-29 12.38.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1357040/522a536e-08dd-d07a-0df9-34520a54eb2f.png)

![スクリーンショット 2021-04-29 12.43.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1357040/f22d43d2-7349-cd0a-e662-562ded962f88.png)


もしくはSource Control > BRANCHESからも切り替えや、ブランチ一覧が確認できる。こっちで表示されるブランチを右クリックで選択すると「Delete Branch」でブランチを削除できる。ここで表示されるブランチはローカルにチェックアウトしたものらしいので、リモート(オリジナル)のブランチを削除したい場合はSource Control > REMOTESがあるのでそっちで削除をすること。
![スクリーンショット 2021-04-29 14.37.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1357040/c9a09347-32eb-53f4-b128-5558f1bf6783.png)

## コミット&プッシュ
Source Control > SOURCE CONTROLにソースの変更点が表示される。変更されているファイルを選択し右クリック > Stage Changes　もしくはファイル名の右側にある「+」ボタンを押すとコミットするファイルがStage Changedに移動する。もしそのファイルを除きたいなら右クリック > Unstage Changesもしくは「-」ボタンを押す。
![スクリーンショット 2021-04-29 16.05.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1357040/a1eb3d51-b440-46e2-eb9d-05168577cfdd.png)

右クリックしたときにStash Changesを選択するとスタッシュができる。スタッシュ内容はSource Control > STASHESで確認することができ、スタッシュを適用するには右クリック > Apply Stash > Apply Stash(Pop Stashは適用したら削除する場合)。スタッシュの削除は右クリック > Delete StashとここもSourcetreeと変わらない感覚で使える。

コミットはStage Changedに移動したら上のMessageを入力してチェックマークをクリックするとOK。Source Control > BRANCHES でコミットしたブランチが色がついており、開くとChanges to push to...とあり、↑ボタン押すとプッシュできる。ブランチのコミット状態を戻すとかもSoucetree同様なので省略。
![スクリーンショット 2021-04-29 16.47.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1357040/eeb1fd80-64a4-5b8b-0001-15a682711ce4.png)

プルはしたことがないが、おそらく同じBRANCHESにプルボタンが出るはず(残課題)。

## Gitの履歴
Source Control > BRANCHES でも確認できるが、拡張機能の[Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)を使った方が見やすくておすすめ。インストールしたら、Souce Control > SOURCE CONTROL >View Git Graphを押すとGit履歴が一覧で見ることができる。
![スクリーンショット 2021-04-29 17.05.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1357040/511131cb-9f76-7acc-0fb3-889e4e3db5a4.png)
Git Graphを表示している画面で、検索(右上の虫眼鏡 or macならcmd+f)を使用するとGit履歴をキーワードでも検索できるしハッシュ番号(SHA-1)でヒットさせることもできる。


## Diffの確認
Source Control > SOURCE CONTROLで一面で確認ができるし、Sourcetreeのように他のDiff見る用のソフトを立ち上げる必要がないのが良い。差分がある行で右クリック > Revert Selected RangeでSourcetreeでいう「選択した行を破棄」ができる。Gitリポジトリの変更点の確認だけでなく、指定したファイル同士を比較して差分を確認することもできたりとなんでもできる気がする。

## 結論
Sourctreeユーザーで、もしVisual Studio Codeで全てやりたい！という場合は問題なさそう。むしろ拡張できるおかげでできることが増える気がする。他に便利な使い方や拡張機能があったら追記していく予定。最後にどうでもいいのだが、やはりSourcetreeのスペリングはSoucetreeであって"SouceTree"ではない気がする。

## 環境
- Mac OS11.3(Big Sur)
- Visual Studio Code ver1.55.2
- Sourcetree ver4.1.1