Help us understand the problem. What is going on with this article?

VSCodeでのGitの基本操作まとめ

はじめに

一年前に新人研修でGitを担当してTigの記事を書いたのですが,今年も同じくGitの研修を担当することになりました.新人さんたちにとってはターミナル環境はとっつきにくい人も多いようで,短い研修期間では操作自体に苦戦してしまい,Gitそのものを理解するというところに力を割けない人も少なくありませんでした.
それを踏まえて今回はGUIで操作しやすい環境を検討したのですが,以下のポイントを踏まえてVSCodeを使うことに決めました.

  • マルチプラットフォームで使える.(研修はWindows環境で行いますが,業務ではLinuxデスクトップ環境も使うので)
  • Gitの基本的な内容はVSCode上でGUI操作が可能.
  • Gitの内容とあわせて,プログラミング用のテキストエディタの一例として,導入しやすそうなVSCodeを紹介.

VSCodeを使ったGitの基本的な操作を一通りまとめていきます.

インストール

GitとVSCodeをそれぞれインストールします.Windowsの場合は次のリンクからインストーラをダウンロードしてインストールを行います.

また,VSCodeのGit Historyという拡張機能をインストールします.Gitのコミット履歴を見やすく表示することができます.
image.png
以降の内容はWindows環境で操作を確認しながらまとめます.

  • Windows 10 Pro
  • git version 2.21.0.windows.1
  • Visual Studio Code 1.33.1

ただしGitもVSCodeもマルチプラットフォームで使用できるので,LinuxやmacOSでも参考になると思います.

Gitの初期設定

Gitをインストールしたら,まずは次の内容くらいは初期設定をしておくとよいです.Git for Windowsに同梱されているGit Bashを起動して,以下の内容でコマンドを実行します.

  • ユーザ名とメールアドレス
  • エディタ,マージツールの設定(ここではVSCodeを指定しています)
  • pushのデフォルト方式を指定(追跡ブランチに対してpush)
$ git config --global user.name 'username'
$ git config --global user.email 'username@example.com'
$ git config --global core.editor 'code --wait'
$ git config --global merge.tool 'code --wait "$MERGED"'
$ git config --global push.default simple

VSCodeの起動

エクスプローラ上で作業ディレクトリを作成し,右クリックのメニュー(Open with Code)からVSCodeで開きます.
image.png

リポジトリ作成

まずはGitリポジトリの作成(初期化)を行います.
サイドバーのソース管理を表示して,リポジトリの初期化アイコンをクリックします.初期化するディレクトリを聞かれますが,VSCodeで開いている場所が初期表示されているのでそのまま選択して進めます.
image.png
リポジトリの初期化をすると,表示が次のように変わります.
image.png

コミットしてみる

foo.txtを作成します.ファイルの作成はエクスプローラで行ってもいいですが,VSCodeのサイドバー上で操作することもできます.
image.png
ファイルの作成と編集を行うとサイドバーのソース管理に更新ファイルの一覧が表示されます.+アイコンでステージングされます.取り消す場合は-アイコンです.
image.png
ステージングした状態からコミットメッセージを入力して,チェックアイコンでコミットが完了します.
image.png
続けて以下のように編集してもう一度コミットをします.(コミットメッセージはadd A

foo.txt
A

コミットログを見る

はじめにインストールしておいたGit Historyで先ほどのコミットログを確認することができます.Git Historyの表示はコマンドパレットをCtrl + Shift + Pで表示して,Git: View History (git log)を実行します.
image.png
次のようにコミットの履歴が確認できます.
image.png
コミットの履歴からファイルの変更内容を確認することもできます.
image.png

ブランチを作成する

現在のmasterからブランチを作成してみます.画面の左下のブランチ名(master)が表示されている個所をクリックし,新しいブランチを作成を実行します.手順で作成するブランチ名を入力してブランチを作成します.
image.png
image.png
Git Historyで作成したブランチが確認できます.All branchesを選択すると両方のブランチが表示されます.ここではnew-branchという名前でブランチを作成しています.
image.png

ブランチをマージする

前準備として作成したブランチ上でコミットを行います.ここではnew-branch上で2件コミットしています.

  1. foo.txtにBを追記(add B)
  2. foo.txtにCを追記(add C)

Git Historyで確認すると次のようになっています.画面が更新されない場合はRefreshボタンをクリックすると更新されます.
image.png
この状態からmasternew-branchの内容をマージします.

まずはmasterに切り替えます.(チェックアウトします.)ブランチを作成したときと同様に画面左下のブランチ名をクリックしてmasterを選択します.切り替えが完了すると画面左下の表記がmasterに変わります.
image.png
切り替えができたらマージを行います.Git Historyでマージ元となるnew-branchの右にあるアイコンをクリックしてMerge this commit into current branchを実行します.手順でnew-branchを選択し,Yesを選択してマージを実行します.
image.png
コンフリクト等が起きなければこれでマージが完了します.Git Historyを見るとマージできていることが確認できます.
image.png

不要ブランチの削除

マージして不要になったnew-branchブランチの削除を行います.new-branchの×アイコンをクリックして確認ダイアログでOKを選択します.
image.png
Git Historyを見ると削除できていることが確認できます.
image.png

プッシュする

ここまでの作業をリモートのリポジトリにプッシュしてみます.今回はGitHubにgit_tutリポジトリを作成したものとして話を進めます.またSSH keyの登録なども事前に完了しているものとします.コマンドパレットからGit: Add Remoteを実行します.手順でリモート名を設定しますが,ここではoriginと指定します.originは慣習的によく使われているデフォルトの名前です.続いてURLを指定します.URLは作成したリモートのリポジトリにあわせて設定してください.GitHubの場合はgit@github.com:<アカウント名>/git_tut.gitとなります.
image.png
リモートの登録ができたらプッシュします.サイドバーのソース管理にあるメニューアイコンからプッシュを実行します.
image.png
Git Historyを見るとorigin/masterが作成されていることが確認できます.
image.png

sshのパスフレーズ対策

sshでキーを生成するときにパスフレーズを設定していると,VSCodeでプッシュなどリモートリポジトリにアクセスするときにエラーが出てしまいます.その場合は以下を参考に解決してください.

VSCodeからGitのリモートにアクセスできないときの対処方法(Windows 10)

ここの設定を行った後に,コマンドプロンプトからsshでの接続を確認するとパスフレーズの入力なしに接続できるようになっています.VSCodeからプッシュする前にsshの接続確認を行ってみてください.

> ssh -T git@github.com
warning: agent returned different signature type ssh-rsa (expected rsa-sha2-512)
Hi y-tsutsu! You've successfully authenticated, but GitHub does not provide shell access. 

ログからのブランチ作成

Git Historyから任意のコミットにブランチを作成します.各コミットの右にある+Branchをクリックして,ダイアログに作成するブランチ名を入力してブランチを作成します.
image.png
ここではnew-branch-2ブランチをadd Bのコミットに作成しています.ブランチの作成後に画面の左下のブランチ名が表示されている個所をクリックしてnew-branch-2をチェックアウトします.
image.png

マージコンフリクトに対処する

new-branch-2ブランチでfoo.txtの内容を更新してコミットします.この編集内容が「add C」のコミットとコンフリクト(競合)します.

foo.txt
A
B
D

Git Historyを表示すると,以下のようになっているはずです.
image.png
masterに戻ってnew-branch-2ブランチをマージしてみます.
画面左下のブランチ表示されている個所をクリックしてmasterをチェックアウトします.masterに切り替えたら前回と同様にnew-branch-2ブランチの右にあるアイコンをクリックしてマージを実行します.
マージを行った結果コンフリクトすると,サイドバーのソース管理にコンフリクトしているファイルが表示されます.ここでfoo.txtをクリックすると,コンフリクトしている個所が次のように表示されるので,手動で修正を行います.
image.png
今回は次のように修正して+アイコンでステージングします.
image.png
ステージングしたらこれまでと同様にコミットします.Git Historyを表示するとマージされていることが確認できます.
image.png

編集の一部をコミット

masterで作業を続けます.foo.txtの内容を次のように更新します.

foo.txt
A
HOGE
PIYO
B
C
D
E

サイドバーのソース管理でfoo.txtを選択すると次のように差分が確認できます.
image.png
ここで画面右のコミットしたい箇所(今回はE)にカーソルを当て,右クリックのメニューから選択した範囲をステージするを実行します.
image.png
サイドバーのソース管理でfoo.txtが二つに分かれ,先ほど選択した「E」だけがステージングされています.
image.png
この状態でコミットすると「E」の追加だけをコミットすることができます.
image.png

不要な編集を戻す

先ほどコミットしなかった編集を削除します.サイドバーのソース管理から差分を確認すると,コミットしなかった「HOGE」と「PIYO」が残っています.ここでサイドバーのソース管理にあるアイコンをクリックすると,編集内容を破棄することができます.
image.png

ここまでをプッシュ

ここまでの状態を前回と同様の手順でプッシュしておきます.
image.png

フェッチ・プルする

前準備としてGitHub側でファイルの編集を行います.GitHubでfoo.txtを表示して鉛筆アイコンから編集画面を開いて,最終行にFを追加します.
image.png
コマンドパレットからGit: Fetchを実行します.
image.png
この時点ではローカルのmasterブランチには反映されていません.
image.png
次はプルします.コマンドパレットからGit: Pullを実行してもいいですし,サイドバーのソース管理にあるメニューアイコンからプルを実行することもできます.
image.png
GitHubでの変更がローカルのmasterに取り込まれました.
image.png
今回はフェッチしてプルという流れでしたが,フェッチせずいきなりプルすることもできます.

おまけ

ここまでの手順で出てこなかったものについて付け加えておきます.

クローンする

今回の説明ではローカルで作成したリポジトリをリモートのGitHubにプッシュする流れでしたが,すでにリモートに存在しているリポジトリをローカルにクローンすることもできます.
コマンドパレットからGit: Cloneを実行します.手順でリモートのURLとクローン先のディレクトリを指定します.
image.png

スタッシュする

作業中のファイルの編集を,いったん退避しておきたいときにスタッシュが便利です.
foo.txtの内容を次のように「G」を追加して更新します.

foo.txt
A
B
C
D
E
F
G

サイドバーのソース管理にあるメニューアイコンから一時退避(スタッシュ)を実行します.
image.png
スタッシュするとファイルの変更差分がなくなっています.スタッシュした内容を戻すには一時退避内容を適用(または一時退避内容を適用して削除)を実行します.

Gitの管理から特定のファイルを除外する

除外設定を行いたいディレクトリ(トップでもOK)に.gitignoreという名前でファイルを作成し,除外したいファイルの情報を記述しておくと,Gitの管理対象から外れます.サイドバーのソース管理に表示される内容にも反映されます.
.gitignore自体をコミットしておくと,複数人で開発をするときに同じ除外ルールでGit管理をすることができます.
設定パターンの一例を下記に載せておきます.

.gitignore
# 拡張子が.exeのファイルを除外する
*.exe
# Bin/binディレクトリとその中身を除外する
[Bb]in/
# 特定のディレクトリの中の特定の拡張子のファイルを除外する
out/*.log

コマンドパレットからのキーボード操作

ここまでの内容は,新人さん向けにマウス操作を中心にまとめましたが,操作の多くはコマンドパレットからも同じように行うことができます.コマンドパレットを使うとマウスを使わずにキーボードだけで操作することができ,慣れると効率的です.
コマンドパレットはCtrl + Shift + Pで表示されます.とりあえずコマンドパレットでgitと入力するといろいろと候補が出てくるので,いろいろと試してもらうといいと思います.
image.png

GitLens(拡張機能)

今回の記事ではVSCodeの標準機能での操作を中心にして拡張機能もGit Historyだけを紹介しましたが,もう一つおすすめの拡張機能であるGitLensを紹介します.
image.png
GitLensはかなり高機能な拡張になり,ここまでで紹介していない様々なGit操作を行うことができます.例えばgit blameの表示や,サイドバーに表示されるコミット履歴からgit resetなどいろいろな操作ができます.
VSCodeで本格的にGitを使うのであれば試してもらうとよいかと思います.
image.png

Git Graph(拡張機能)

もう一つVSCodeの拡張機能でGit Graphを紹介します.この拡張はGit Historyとよく似た拡張です.どちらかを入れておけばよいかと思いますが,使いやすかったので紹介しておきます.
image.png
Git Historyと同様にコミット履歴をツリー形式で表示してくれます.またそこからさまざまなGit操作を右クリックメニュー等から実行することができます.両方試してみて好みのほうを使用してみるとよいかと思います.
image.png

おわりに

VSCode上でGitを使いながら開発を進めるにあたって,必要最小限の操作は説明できたと思います.とはいえGitの便利な機能や操作はまだまだたくさんあります.この記事をひとつのきっかけに,さらに使いこなしていってもらえると幸いです.

y-tsutsu
itage
ITAGEは「IT」のAGENCYになることを夢、目標として進化、変化していきます。「It’s It Agency」
http://www.itage.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした