インフラエンジニア

【gitの操作をGUIで行う】Git Graph概要

こんにちは!murotaです。

今回は、VScodeでgitの基本的な操作を行う方法を紹介していこうと思います。

CLIでgitコマンドを使用し、操作を行うこともそこまで大変なことではないと思いますが、VScodeで行うことでより簡単に、操作することが可能です。

拡張機能のインストール

VScodeでGitの操作を行うには拡張機能をインストールする必要があります。(以下インストール手順)

  • 左端のメニューバーから”拡張機能”を選択し、検索欄で”Git Graph”と入力
    • Ctrl + Shift + Xでも拡張機能を開くことが可能
  • “インストール”を選択

以下赤線のような状態になっていればインストールは完了です。

操作画面

インストールが完了したら、次はGit Graphを表示します。

  • 左端のメニューバーから、”ソース管理”を選択
  • 操作する対象のリポジトリ名の右にある、アイコンの中から”View Git Graph”を選択
    (以下の図の赤枠)

上図のように、Gitの履歴が線で表されている画面が表示されたら完了です。

Gitの操作

ここまでで、gitの操作をするための下準備は完了です。ここからは、CLIのgitコマンドと紐づけて操作方法を紹介していきます。

※以下からは、リポジトリをクローンしてきている前提で説明をします。

git add

ローカルブランチで変更を加えたファイルは、以下のように”変更”の中に一覧化されていきます。また、具体的な変更箇所についても、”変更”に入っているファイルを選択することで確認できます。

git addを行うには、”変更”の中のファイルにマウスオーバーし、”+”を押下します。
この操作だけで完了です。

(以下図はgit add後の状態)

git commit

以下図のように、”ステージされている変更”の上のコメント記入欄で任意のコメントを入れてCtrl + Enterをすると、commitが完了します。(git commit -m “任意のコメント”と同様のことを行っています)
コメントを入れない場合は、branch名がそのまま採用されるようです

commitが完了すると以下図のようにgraph上でもcommitが現れます。

git push

  • graph上に表示されたcommitにマウスオーバーし、左クリック
    • (前項git commitの一番最後に使った図でいうと、”add_Hello”にマウスオーバーし、ひらりクリック)
  • “Push Branch…”を選択
  • Push Modeを選択し、”Yes, push”を押下
    • Nomalが通常の”git push”に相当。forceは”git push -f”に相当。

これでpushも完了です。

今回はここまでです。