👩‍💻

Gitコマンド覚えなくてOK！VSCode「Git Graph」で始める超かんたんGit入門 | 初心者向け基本操作・使い方ガイド

に公開
Git
VS Code
Cursor
tech

こんにちは！
「gitのコマンドって多すぎて、覚えるだけで疲れるんだよなあ…」と思ったことはありませんか？

よく「エンジニアならgitくらいは暗記して当然！」なんて空気がありますが、正直それで挫折する人も多いはずです。ぼくも昔は「git push ってどっちが先だっけ？ pull だっけ？」と毎回ググっていました。

でも、安心してください。
実は コマンドを全部覚えなくても、マウスぽちぽちだけでgit操作はできる んです。

今回紹介するのは VSCode の拡張機能「Git Graph」。
GUIで直感的に操作できる ので、最初にこれを使うだけで「gitの苦手意識」がかなり減ります。

今日は 「コマンド暗記なしでgitを使えるようになる方法」 をまとめてみました。
というわけで、さっそく見ていきましょう。

環境

この記事で紹介するやり方は、以下の環境で試しています。

  • エディタ：VSCode（Cursorでも中身はほぼ同じです）
  • 拡張機能：Git Graph

VSCode に Git Graph を入れると、画面にこんな感じのグラフが出てきます。
ブランチやコミットの流れが一目でわかるので、いきなり便利さを実感できるはずです。

GitHubからローカルに持ってくる方法(git clone)

Gitを使い始めるときに最初にやることは「リポジトリを手元にコピーする」ことです。
これをコマンドでやると git clone ですが、Git Graphを使えばクリックだけでOKです。

  1. vscodeを起動
  2. Clone Git Repository... をクリック

  1. GitHubのURLを入力

これで自分のPCにリポジトリがコピーされます。以降の作業は、このコピーをいじっていくイメージです。

git管理していないプロジェクトをgit管理する方法 (git init)

新しく作ったプロジェクトを「Gitで管理したい」と思ったら、この操作です。
普通なら git init コマンドですが、ここもクリック一発で完了します。

  1. サイドメニューからgitタブを開く
  2. Initialize Repositoryをクリック

ローカルのプロジェクトをリモートGitHubにアップロードする方法 (git remote add + git push)

「手元にあるプロジェクトをGitHubにも置きたい」というときの操作です。
これがいわゆる git remote add ＋ git push にあたります。

  1. サイドメニューからgitタブを開く
  2. Publish to GitHub をクリック

これで一気にリモートに反映されます。

変更履歴を保存する方法 (git add → git commit)

Gitの基本中の基本です。ファイルを更新したら「どんな変更をしたか」を保存するのがコミットです。

ファイルを更新後、

  1. サイドメニューからgitタブを開く
  2. Changesの横の「＋」ボタンをクリック（省略可）
  3. コミットコメントを書く(AI生成ボタンで自動生成可）
  4. Commitボタンをクリック

「この時点でのスナップショットを残す」感覚で覚えるとわかりやすいです。

変更を取り消す方法

Gitでは「取り消す」といっても、どの段階を消したいのかで操作が変わります。
ざっくり分けると次の2種類です。

①まだコミットしていないファイルの変更を消す（＝作業途中の変更をなかったことにする）
②すでに保存したコミットを消す（＝履歴ごと巻き戻す）

①ファイルの変更を元に戻す (git checkout)

「さっき保存してないコードをいじったけど、やっぱり直前の状態に戻したい」というときはこちらです。

  1. サイドメニューからgitタブを開く
  2. 変更を取り消したいファイルの「↶」ボタンをクリック

②コミットごと取り消す (git reset)

「間違ってコミットまでしてしまったから、履歴ごと戻したい」というときはこちらです。

  1. GitGraphアイコンをクリック
  2. 戻りたいコミットを右クリック
  3. Reset current branch...をクリック

→ この場合は、指定したコミットまで履歴を巻き戻します。

ブランチを作成 (git branch)

新しい作業の流れを分けたいときに使います。

  1. GitGraphアイコンをクリック
  2. ブランチを作成したいコミットをクリック
  3. ブランチ名を入力
  4. 作成したブランチをダブルクリックで移動

ブランチをマージ (git merge)

別々の作業を合体させたいときに使います。

  1. GitGraphアイコンをクリック
  2. マージ先のブランチへ移動（ブランチをダブルクリック）
  3. マージ元のブランチを右クリック
  4. Merge into current branch...をクリック

ブランチをマージ＆コンフリクトを解消

同じ箇所を複数人が変更すると「コンフリクト」が起きます。ここが初心者のつまずきポイントですが、エディタ上で解消できるので安心です。

  1. ブランチをマージ
  2. コンフリクトしたファイルをクリック
  3. Resolve in Merge Editorをクリック
  4. 採用したい方のチェックマークをクリック（両方採用したい場合は両方クリック）
  5. complete mergeをクリック
  6. Continueをクリック

余裕が出てきたら便利なマイナー機能

差分の逆をコミットする (git revert)

「やばい！さっきのコミットでバグを仕込んじゃった…」というときに便利です。
過去のコミットをなかったことにするのではなく、「逆向きの変更」をもう一度コミットして取り消します。
なので履歴はきれいに残ったままです。チーム開発では reset より安全に使えます。

開発途中の枝分かれを、後から一本のきれいな流れに整理する （git rebase)

ブランチをたくさん作って作業していると、履歴がジグザグに枝分かれして読みにくくなることがあります。
rebase を使うと、枝分かれした履歴を「あとから1本のきれいな流れ」に並べ替えることができます。
個人開発だと「見た目を整理したいとき」に役立ちます。

欲しいコミットだけをつまんで取り込む (git cherry-pick)

「別のブランチでいい感じの修正をしたけど、その部分だけ今のブランチにも欲しい」
そんなときに使うのが cherry-pick です。
全部をマージするのではなく、欲しいコミットだけを“つまみ食い”するイメージです。

こうした機能も、Git Graphなら右クリックと数回の選択で完了します。

あとがき

こちらのツイートに反響があったのをきっかけに記事にしました。

「意外と知らない人が多いんだな」と思ったので、少しでも苦手意識がなくなるきっかけになればうれしいです。

ここまでで clone → init → commit → push → branch → merge の基本操作はひと通りカバーできました。
つまり「最低限これだけ知っていれば、日常の開発でとりあえず困らない」状態になったはずです。

慣れてきたら、rebase や cherry-pick などの便利ワザにも挑戦してみてください。
GUIで感覚的に操作できるので、コマンドを暗記するよりずっと気楽に使いこなせると思います。

Discussion