VSCode上のGUIでGitを操作する方法をまとめます。
サークルの新入生向けにまとめたもので初歩的な内容ですが、入門者の助けになればとQiitaに記事で残しておきます。
ここではGitの用語は知っている前提で、VSCodeでの操作のみを説明します。Gitの基本操作などは別の記事などを参照してください。同様に、VSCodeもインストール済みである想定です。私は日本語化の拡張機能も導入しています。
日本語化はこちらのサイトなどが参考になるかと思います。
また、この記事ではローカルでのGitの操作のみ説明します。リモートリポジトリの操作などは、扱いませんのでご了承ください。
Gitのリポジトリを初期化 git init
Gitの操作は、だいたいが左側のツールバーの赤枠のアイコンの箇所にまとまっています。
リポジトリの初期化は、初期化されていないフォルダでこのタブを開くと、赤枠のように表示されているボタンからできます。
Gitの変更履歴を確認 git log
デフォルトではあまりいい機能は入っていないのかなと思っています。私は以下Git History
という拡張機能を使っています。
この拡張機能が入っていれば、Gitのタブに表示されるこの時計マークから履歴を確認できます。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F351104%2Fc666d0e1-0737-27e9-923c-9bbbe4400247.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5a16871162269384ab0f91ef6d77e0c6)
このように表示されます。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F351104%2Fe34b362f-8bcc-ac38-7a69-a4c713994cb1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d8fd206baf03bb663491b1874fff35cc)
他にもGit Graph
という拡張機能もあります。お好みのものを導入してください。
ファイルの作成
Gitの操作ではなくVSCodeの操作ですが、一応紹介しておきます。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F351104%2Fba582831-30cc-5c39-82b9-ba6673005e08.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8ceed8ee2fe9732f424de689e0b5d38e)
新しいファイルを作るとファイル名が緑色になるのは、そのファイルが未追跡である(ステージされていな)ということを表しています。ステージへ追加してコミットすれば、白色のファイル名に戻ります。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F351104%2F2da23ce2-2be5-b2fe-c5f6-5a2c59556e92.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3c76d9b33ecc651aade0812f132be19e)
ステージへ追加 git add
gitのタブで、ファイル名の右にある「+」のボタンを押すと、そのファイルがステージに追加されます。また、この画面で変更のあるファイル名をクリックすると、右側エディターの部分に差分が色づいて表示されます。
この表示だと、変更後に「Hello!」というテキストが追加されていることがわかりますね。
ステージを取り消す git restore
ステージからファイルを取り消す時には、そのファイルの右にある「ー」のボタンを押します。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F351104%2F0a49bd29-adb7-490f-a57c-4c59bea78eed.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9d0ad9e9ae82f360f5de5410a024b05d)
変更をコミット git commit
変更をステージしたら、その上のテキストエリアにコミットメッセージを入力して「☑️ コミット」ボタンを押します。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F351104%2F4cc41eac-1e51-f0e6-32bf-65122899ed20.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=369e07c148f72c6f63e02dc2918f2213)
コミット履歴が記録されていますね。(Git Historyの表示)
現在のブランチ一覧を確認 git branch
ブランチの確認などは今までのGitのタブではなく、画面左下の部分で操作できます。左下の青い箇所に今のブランチ名が書かれています。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F351104%2F58185c0e-b977-2d16-e8e2-962a6b0c1398.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6ca5e88daf2be305b709405145b172fd)
今のブランチ名の箇所(上の例なら「main」という文字の部分)をクリックすると、他のブランチの一覧を確認できます。
新しいブランチの作成は、この画面の「新しいブランチの作成...」からできます。
ブランチの切り替え git checkout
ブランチの切り替えは、切り替えたいブランチ名を↑の画像で出てきたブランチ名から切り替えたいブランチを選んでクリックします。
ブランチのマージ git merge
ここでは例としてtestブランチをmainブランチにマージすることを考えてみます。
まずは、マージを受け付けるブランチ(マージ先とも呼びます。ここではmainブランチです。)に切り替えます。上記までの操作でmainブランチに切り替えてください。
そうしたら、今度は画面左のGitのタブから、「...」をクリックし、「ブランチ」 > 「マージ」と選択します。
出てきた選択肢から、マージしたいブランチ(マージ元とも呼びます。ここではtestブランチです。)を選びます。