- 公開日
- 最終更新日
【Git】GUIではじめるGitの楽々操作方法
この記事を共有する
目次
はじめに
こんにちは。サービスGの佐藤です。 突然ですが、Git操作をGUIで行えるのをご存知でしょうか。
私もこれまでコマンドプロンプト上からgit ～と打ち込み、実行をしておりました。 しかし、はじめのうちは今自身が実行しているブランチやステージ等々把握するのに混乱しておりました。 特に初学者の方がつまづきやすい一因でもあるかなと思います。
今回紹介するVSCodeの機能を利用することで、視覚的にどのブランチで作業しているかがわかりやすくなり、 Gitを利用するハードルも下がるかもしれません！
前提条件
本記事は以下の環境が用意されいることを前提としています。
- ローカル環境にGitがインストールされていること。
- Visual Studio Code(VSCode)がインストールされていること。
本記事で実施すること
本内容は以下参照ドキュメントの内容と自身の環境での動作確認をまとめたものとなります。 さらに詳細を確認したい方は参照元をご確認ください。
参考URL：Source Control in VS Code
VSCodeのGit管理機能について
VSCodeにはデフォルトでGitのソース管理機能が用意されております。 Git SCM(Source Control Manager)と呼ばれるものです。
この機能をつかうことにより、GUIを通じGit操作が可能となります。 また、もう少し掘り下げるとGUI上実施した操作は裏でCLIの操作と同期し実行される仕組みとなります。
実はその内容も確認することが可能です。
VsCode＞ターミナルから確認する
ターミナルを開き、”OUTPUT”のタブを選択します。画像赤枠にて”Git”を選ぶとGitのタスクに関連する出力が確認できます。
Git操作のログを確認する
試しにステージングへの追加操作をみていきます。
①対象ファイルをメニュータブ”ソース管理”からステージングに追加する 今回はcommitA.txtを修正し、ステージングへ追加をします。 画像にある”+”でその動作が行えます。
②ターミナル＞OUTPUTより出力を確認する ①で行った動作をターミナルで確認してみると、git addされていることがわかります。(赤枠)
Gitの基本動作をやってみる
上記git add以外についても確認していきます。
git checkout
ブランチ移動もGUI上から操作可能となります。
下部にあるブランチ名をクリックすることで移動先のブランチ名を指定することができます。
git commit
ステージングへの追加後、コミットボタンが出現しますので、 上記枠内にコミットメッセージを入力し、”commit”のボタンを押します。
注：以下の設定がない場合、エラーが出力されます。
（CLIでは警告はでますが、コミット自体はできました）
git config —global user.name “Your Name”
git config —global user.email you@example.com
git push
上記commitのボタンの表記が変わり、リモート側と同期する(sync)といった内容になります。 新規ブランチをリモート側へ反映させる場合は以下画像のようになり、ボタンを押すとpushと同様の動作となります。
git pull
pullも同様のボタンから可能となります。
↓↑の記載がありますが、それぞれリモート側とのコミット差分数を表しています。 ↓がリモート側からの差分を表しており、↑がローカルとの差分を表しています。 例えば、↓4と記載があれば、リモート側に新規コミットが4つあり、自身のローカル側はそのコミットが存在してない といって意味になります。
他さらに便利な機能
現在のブランチのコミット履歴を確認する
メニュータブの下のほうにある”GRAPH”で可能となります。 こちらにこれまでコミットした内容が確認でき、その際更新したファイルについても確認することができます。
ファイルの差分を確認する
上記ででてきたファイルを選択すると、更新した内容の差分を確認することができます。 実際リモート側へpushをする前の最終確認等で利用すれば、自身の作業内容を改めて確認ができます。
リモートリポジトリとの差分確認
git pullの項目で↑↓でリモートリポジトリ側との差分が確認できると説明しました。
下部にある↑↓でも同様の確認を行うことができます。
※最新の差分を確認するためにはfetch動作をする必要があります。
〇fetchする方法
〇fetch後、リモート側との差分確認
まとめ
いかがだったでしょうか。 今回紹介したもの以外にもGitをより楽に扱えるようにするための拡張機能がいくつかあります。 代表例としてはGit Graphですが、こちらについてはまた別の機会に。
GUIで操作することでコマンド経由で行うより、自分がどのような操作をしているのかが直観的にもわかりやすくなったと思います。 また作業手順内でGit操作に関する箇所は、GUI操作にするのもだれでも作業できるという観点で、 ありなのかなと個人的に思いました。
この記事は私が書きました
佐藤 祐弥
記事一覧日々の業務上での学びをコツコツアウトプットできればなと思います。
