VSCode上でのGitの基本操作を紹介

**VSCode上のGUIでGitを操作**する方法をまとめます。
サークルの新入生向けにまとめたもので初歩的な内容ですが、入門者の助けになればとQiitaに記事で残しておきます。

ここではGitの用語は知っている前提で、VSCodeでの操作のみを説明します。Gitの基本操作などは別の記事などを参照してください。同様に、VSCodeもインストール済みである想定です。私は日本語化の拡張機能も導入しています。

日本語化はこちらのサイトなどが参考になるかと思います。

https://www.javadrive.jp/vscode/install

また、この記事ではローカルでのGitの操作のみ説明します。リモートリポジトリの操作などは、扱いませんのでご了承ください。

## Gitのリポジトリを初期化 `git init`
Gitの操作は、だいたいが左側のツールバーの赤枠のアイコンの箇所にまとまっています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351104/2f89062d-d98e-c463-1dc4-10c6c3ffe9df.png" width="300px">

リポジトリの初期化は、初期化されていないフォルダでこのタブを開くと、赤枠のように表示されているボタンからできます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351104/dc73e7de-f4cd-e9b4-dec0-fa7be8a1b1e7.png" width="300px">

## Gitの変更履歴を確認 `git log`
デフォルトではあまりいい機能は入っていないのかなと思っています。私は以下`Git History`という**拡張機能**を使っています。

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

この拡張機能が入っていれば、Gitのタブに表示されるこの時計マークから履歴を確認できます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351104/c666d0e1-0737-27e9-923c-9bbbe4400247.png" width="300px">

このように表示されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351104/e34b362f-8bcc-ac38-7a69-a4c713994cb1.png">

他にも`Git Graph`という拡張機能もあります。お好みのものを導入してください。

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

## ファイルの作成
Gitの操作ではなくVSCodeの操作ですが、一応紹介しておきます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351104/ba582831-30cc-5c39-82b9-ba6673005e08.png" width="300px">

新しいファイルを作ると**ファイル名が緑色**になるのは、そのファイルが未追跡である（ステージされていな）ということを表しています。ステージへ追加してコミットすれば、白色のファイル名に戻ります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351104/2da23ce2-2be5-b2fe-c5f6-5a2c59556e92.png" width="300px">

## ステージへ追加 `git add`
gitのタブで、ファイル名の右にある「＋」のボタンを押すと、**そのファイルがステージに追加**されます。また、この画面で変更のあるファイル名をクリックすると、右側エディターの部分に差分が色づいて表示されます。

![スクリーンショット 2024-05-24 19.50.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351104/d31a7464-3958-a71e-e7ff-3f0de3b5c9e3.png)

この表示だと、変更後に「Hello！」というテキストが追加されていることがわかりますね。

## ステージを取り消す `git restore`
ステージからファイルを取り消す時には、そのファイルの右にある「ー」のボタンを押します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351104/0a49bd29-adb7-490f-a57c-4c59bea78eed.png" width="300px">

## 変更をコミット `git commit`
変更をステージしたら、**その上のテキストエリアにコミットメッセージを入力**して「☑️ コミット」ボタンを押します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351104/4cc41eac-1e51-f0e6-32bf-65122899ed20.png" width="500px">

コミット履歴が記録されていますね。（Git Historyの表示）

![スクリーンショット 2024-05-24 19.55.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351104/3475a38c-ee08-7a7c-2c02-b8a51af835e0.png)

## 現在のブランチ一覧を確認 `git branch`
ブランチの確認などは今までのGitのタブではなく、**画面左下の部分**で操作できます。左下の青い箇所に今のブランチ名が書かれています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351104/58185c0e-b977-2d16-e8e2-962a6b0c1398.png" width="300px">

今のブランチ名の箇所（上の例なら「main」という文字の部分）をクリックすると、他のブランチの一覧を確認できます。

![スクリーンショット 2024-05-24 19.58.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351104/6cdccfa1-813c-ee02-c8d8-08b3a64c6fc2.png)

**新しいブランチの作成**は、この画面の「新しいブランチの作成...」からできます。

## ブランチの切り替え `git checkout`
**ブランチの切り替え**は、切り替えたいブランチ名を↑の画像で出てきたブランチ名から切り替えたいブランチを選んでクリックします。

## ブランチのマージ `git merge`
ここでは例としてtestブランチをmainブランチにマージすることを考えてみます。

まずは、マージを受け付けるブランチ（マージ先とも呼びます。ここではmainブランチです。）に切り替えます。上記までの操作で**mainブランチに切り替え**てください。

そうしたら、今度は画面左のGitのタブから、「...」をクリックし、「ブランチ」 > 「マージ」と選択します。

出てきた選択肢から、マージしたいブランチ（マージ元とも呼びます。ここではtestブランチです。）を選びます。

![スクリーンショット 2024-05-24 20.05.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351104/cb91170b-1792-ab55-8bbe-b9165d7493a0.png)