VS Code の GUI操作・コマンドパレットで Git を扱う【その１】

普段 Git コマンドで扱っている内容を、VS Code の GUI やコマンドパレットで行う場合、どういった操作になるのかが気になって試したものです。
（※ Git の利用について、GUIフロントエンドを使ったりしたこともありましたが、最近はコマンドでちょこちょこ利用している感じの状況でした）

## 試してみた内容

今回は、VS Code の GUI操作・コマンドパレットで以下を試してみました。

- リポジトリの初期化
- git add、git commit
   - コミットメッセージを Copilot に決めてもらう
- ブランチの作成・切り替え・マージ

### リポジトリの初期化
まずはリポジトリの初期化です。
コマンドだと `git init` になりますが、それを VS Code の GUI操作かコマンドパレットを利用して行う方法を見ていきます。

なお、どちらも VS Code で特定のフォルダを開いた状態で行っています。

#### GUI操作
GUI操作で行う場合、画面左の「ソース管理」から行います。

その中の「リポジトリを初期化する」を押します。

![2025-02-15_19-01-45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2bd3490f-6e8f-47c4-8f49-9a5f7bcec9e3.jpeg)

これで完了です。

#### コマンドパレット
以下はコマンドパレットを使ったやり方です。

「git ini」あたりまで入力すると、「Git: リポジトリの初期化」という項目が出てくるので、それを選びます。

![2025-02-16_00-37-04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4a78be76-4873-4836-9ec0-44f26b52d2a1.jpeg)

そうすると、以下の対象とするワークスペース フォルダーの選択画面が出てきます。
特定のフォルダを開いた状態で実行すると、一番上にそのフォルダが出てくるかと思いますので、それを選びます。

![2025-02-16_00-41-48.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cc724d3c-8f4b-476d-8aa6-34114b412064.jpeg)

これで完了です。

#### 確認
上記を実行したフォルダで、初期化ができているか（また、現在のディレクトリが Git のワークツリー（作業ディレクトリ）内にあるかを）を確認してみます。

Windows のコマンドプロンプトで `dir /a`　を実行して、.git が存在するかどうかを見てみました（Mac の場合は `ls -la` で）。

そうすると以下のとおり、 `.git` が作成されているのが確認できました。

![2025-02-15_19-05-45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2f1e6468-2848-449b-908b-f0ae30c16882.jpeg)

また、現在のディレクトリが Git のワークツリー（作業ディレクトリ）内にあるかを確認できるコマンドもあるようでした。
以下のコマンドを実行して、true が返ってくるかどうかで確認できるようです。

```powershell
git rev-parse --is-inside-work-tree
```

なお `true` が返ってこないパターンでは、 `fatal: not a git repository (or any of the parent directories): .git` と返ってくるようです。


### git add、git commit

次に「git add」「git commit」を試します。
その前準備のために、左メニューのエクスプローラーを選び、ファイルの作成を行います。

そして、適当な内容のファイルを作成した以下の状態から、add・commit を行っていきます。

![2025-02-16_01-16-40.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/80b58221-89a0-4d74-9860-f2923fc4ffc7.jpeg)

#### GUI操作
GUI操作で試してみます。

git add の操作は、画面左の「ソース管理」を開いた後に、以下の「＋」アイコンを押下すれば OK です。

![2025-02-16_01-25-09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/87436109-2954-458a-a409-0dda28e4ca3e.jpeg)

そうすると以下のように、「ステージされている変更」という項目ができ、その下に先ほどのファイルが表示された状態になります。

![2025-02-16_01-25-27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3ec9b805-b6d3-47e5-b376-4b7882e6eb77.jpeg)

あとは、コミット用のメッセージの入力をして、コミットボタンを押せば完了です。

![2025-02-16_01-28-01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5ba3e582-2fe4-4bf6-b456-746e817c7e5f.jpeg)

そうすると、画面左の下側のほうでコミットに関する情報が出てきているのが確認できます。

![2025-02-16_01-29-17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0a22d694-4401-4e81-b884-7e0d6284668f.jpeg)

これで完了です。

#### git add を省略する

すべての変更を反映して問題ない場合の話になりますが、今回の流れで直接コミットすることもできます。

git add にあたる操作なしにコミットを進めると、以下のようなダイアログが出てくるため、ここで「はい」を選ぶことでコミットを完了させられます。

![2025-02-16_02-16-27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/af44a4bb-9520-450c-85a1-e9332fa507e3.jpeg)

#### コミットメッセージを Copilot に決めてもらう

上記のコミットメッセージの入力ですが、以下の星みたいなアイコンを押すと、Copilot がコミットメッセージを書いてくれるようです。

![2025-02-16_02-09-53.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f7204fe0-952b-4791-b888-5ce43f47d99d.png)

今回は適当な変更をしたので、中身は漠然としたメッセージになっています。もっと複雑な変更を加えた時のものでも試してみたいところです。

#### コマンドパレット

次にコマンドパレットによる操作です。

「git stage ch」あたりまで文字を入れたところ、「Git: すべての変更をステージ」「Git: 変更をステージ」が出てきます。

![2025-02-16_01-35-50.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8ee19899-af0a-4705-a746-aceba87496be.jpeg)

今回の単一のファイルを開いた状態で「Git: 変更をステージ」を実行しても、「Git: すべての変更をステージ」を実行しても結果は変わらないので、どちらかを実行します。

あとは、コマンドパレットで「git comm」あたりまで入力すると、「Git: コミット」が表示されるのでこれを選びます。

![2025-02-16_02-03-14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b26479de-f25a-4620-88fe-78bb6d326456.jpeg)

そうすると、コミット時のメッセージを表示する画面が開くので、そこに適当なメッセージを入れました。

![2025-02-16_02-04-41.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/81184c1f-61ca-4a37-9200-84d81a73b361.jpeg)

その後、画面右上のチェックマーク型のアイコン（「コミットメッセージを受け入れる」という意味のもの）をクリックすれば、コミット完了です。

![2025-02-16_02-06-01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1b3e3f40-26b7-4eb1-84e3-5b5cf9b77e24.jpeg)

### ブランチの作成・切り替え・マージ

ブランチの作成・切り替え・マージも試してみます。

直近で書いた以下の記事の内容をもとに進めてみようと思います。

●git でブランチを扱ってみるテスト用の手順（switch・checkout の話も少し） - Qiita
https://qiita.com/youtoy/items/e681362c8560f9e5a509

#### 進める流れ

ここで試してみることを、最初にリストで示します。

- ブランチの作成
- ブランチの切り替え
- マージ

#### GUI操作

画面左下に現在のブランチが表示されている部分があるので、そのブランチ名の部分を選択します。

![2025-02-17_13-07-39.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/114cb1d1-831c-49a0-8a81-ab64d2ccbf04.jpeg)

その後、画面上部中央で出てくる項目に「＋新しいブランチの作成...」があるので、それを選択します。

![2025-02-17_13-08-21.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b8262304-d178-49e8-99d7-e8ff84117e04.jpeg)

そうすると、画面上部中央でブランチの名前の入力を求められるので、ブランチの名前を入力します。

![2025-02-17_12-51-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b984adfa-a751-4c74-a6ac-e5a54f795677.png)

これらの操作によりブランチが作成され、作成したブランチに切り替えた状態となります。

ブランチの切り替えは、先ほどと同様に画面左下のブランチ名を選択して行います。

![2025-02-17_13-04-08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/52fc0145-7e7d-4014-a97f-f08ea196cf46.jpeg)

そうすると、選択可能なブランチの一覧が出るので、切り替えたいブランチを選択します。

![2025-02-17_12-57-48.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9b81fbfb-36c2-4c02-b568-b7b0ea89c3b2.jpeg)

あとは、マージを試してみます。

まずはマージ先になるブランチへの切り替えを行います。
マージ先のブランチに切り替えた後の状態で、画面左の「ソース管理」の「･･･」を選び、そこから「ブランチ」⇒「マージ...」を選びます。

![2025-02-17_13-25-27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fdbb9f40-06bf-4e1f-8847-e972e86a3c26.jpeg)

そうすると、画面上部中央でマージ元となる候補が表示されるので、その中のマージ元になるものを選択すればマージは完了です。

![2025-02-17_13-29-14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e503aab9-7eae-4777-af29-2ada6008262b.jpeg)

#### コマンドパレット

コマンドパレットで「git bra」などと入力していくと、「Git: ブランチの作成」という項目が出てくるので、それを選択します。

![2025-02-17_12-57-32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/51c3c011-4192-4041-a461-cbc6eaacb1b3.png)

その後、ブランチの名前の入力を求められるので、ブランチの名前を入力することでブランチの作成が行えます。

ブランチの切り替えについては、コマンドパレットで「git check」などと入力していくと、「Git: チェックアウト先...」という項目が出てくるので、それを選択します。

![2025-02-17_12-57-32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/99bf00cf-f2cd-4ba7-8354-e40c1e4f61e4.jpeg)

その後、ブランチを含むリストが表示されるので、ここで切り替えたいブランチを選択します。

![2025-02-17_12-57-48.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9b81fbfb-36c2-4c02-b568-b7b0ea89c3b2.jpeg)

あとは、マージを試してみます。

まずはマージ先になるブランチへの切り替えを行います。
マージ先のブランチへの切り替え後、コマンドパレットで「git mer」あたりまで入力すると、「Git: マージ...」が表示されるのでこれを選びます。

![2025-02-17_13-15-25.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cc3476c1-f803-4595-99d4-55752216cbbc.jpeg)

あとは、表示された一覧からマージ元を選択すれば OK です。

![2025-02-17_13-15-54.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/29e8bbf1-c7bc-4dc0-80b3-3f9675471640.jpeg)


## 参照した情報や記事など
以下は、今回参照した情報や記事です

### ChatGPT の deep research

今月（2024年2月）に ChatGPT の Plusプランから Proプランへの切り替えを行い、deep research が使える状況になっています。

https://x.com/youtoy/status/1886388898840154452

それを試してみる意味で、最近は調べ物をするときに deep research でも調査を依頼してみるということをやっています。

今回も、例えば以下の内容などを試してみています。

![2025-02-16_01-18-33.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1d902713-01a1-400c-8635-bc57cf928752.jpeg)


### Web の記事
以下は、今回の内容をまとめるにあたって参照した Web記事です。

- [【入門】VSCodeとGitHubの連携手順・使い方をわかりやすく解説 - カゴヤのサーバー研究室](https://www.kagoya.jp/howto/rentalserver/webtrend/vscode/)
- [VScodeだけでGit操作を完結させるのだ～～ッ!!](https://zenn.dev/praha/articles/db1c4bcc4ef48c)
- [VSCode と GitHub をつなぐ｜VSCodeでGithub（の超基本）](https://zenn.dev/ojk/books/github-vscode/viewer/vscode-git)
- [VSCode からリポジトリーを作成する｜VSCodeでGithub（の超基本）](https://zenn.dev/ojk/books/github-vscode/viewer/create-repo)
- [VSCodeからGitHubにコードをPushする方法 - Qiita](https://qiita.com/hayaharu3220/items/b7eb57a3689fb8050856)
- [Visual Studio Codeでgit - Qiita](https://qiita.com/whim0321/items/9640a69e6466a22245f3)