VSCodeでgitを操作する方法総まとめ。各記号の意味と使い方|コマンドを実行せずにgit add(アド),コミット、プル、プッシュ,,,する方法

vscode--prograshi(プロぐらし)-kv Editor
記事内に広告が含まれていることがあります。

VSCodeにはデフォルトでgitのソース管理機能が備わっています。

この機能を使うと、通常git add, git commit, git push, git pullなどで実行していることを、gitコマンドを入力することなく、UI上で操作できます

使いこなせるとコマンド入力よりも早くなります。


  1. ソース管理画面の表示
  2. 現在のブランチの確認方法
  3. 「ステージされている変更」や「変更」の見方
  4. 変更(ステージ前)の使い方
    1. ファイルごとの3つの処理
    2. git addの実行
    3. すべてのファイルの一括操作
  5. ステージされている変更での操作
  6. コミットする(git commit)
    1. 実例
    2. コミットメッセージを入力しなかった場合
  7. 「変更」のファイル群をまとめてコミットする(git add & git commit)
  8. 主要操作メニュー
  9. クローン|git clone
  10. git checkout|新しい分岐の作成と新しい分岐の作成元の違いとは何か?
    1. 既存のブランチに切り替え
    2. 新しいブランチを作成し切り替える
    3. 派生元のブランチを指定してブランチ作成し切り替える
    4. 「新しい分岐の作成」と「新しい分岐の作成元」の違いとは何か?
  11. プルとプッシュを自動で行う(push and/or pull)
    1. 上流ブランチが設定済みの場合
    2. 上流ブランチが設定されてない場合
  12. プル(git pull)
    1. プル
    2. プル(リベース)
    3. 指定元からプル
  13. プッシュ(git push)
    1. プッシュ
    2. プッシュ先のリモートレポジトリを選択してプッシュ
    3. リモートのブランチ名を指定してpushする方法
  14. ブランチの操作(git branch)
    1. ブランチの作成元…|派生元ブランチを指定して新規ブランチを作成し移動
    2. ブランチをマージ…「git merge」
    3. ブランチを発行…|ブランチをリモートにプッシュ
    4. ブランチ名を変更
    5. 分岐の作成…|現在のブランチから新しいブランチを作成する
  15. リモート(git remote)
    1. リモートの削除
    2. リモートの追加
  16. 一時退避(git stash、スタッシュ)
    1. 一時退避
    2. 一時退避(未追跡ファイルを含む)
    3. 一時待避を削除する…|選択した一時待避を削除する
    4. 一時待避内容を適用…|選択した一時待避を復活(削除しない)
    5. 一時待避内容を適用して削除…|選択した一時待避を復活(削除する)
    6. 最新の一時待避内容を適用
    7. 最新の一時待避内容を適用して削除
  17. サブモジュールがある場合
    1. 各記号の意味
  18. Gitログ
    1. gitログの場所
    2. 「出力」ウィンドウの出し方
    3. Gitログのデフォルト表示内容
  19. 色付きの数字とアルファベットの意味
    1. 色付きの数字は何か?
    2. 色付きのアルファベットは何か?
    3. アルファベットを消す方法
    4. 数字の表す意味

ソース管理画面の表示

Gitのソース管理画面を表示するには、ソース管理アイコン(右側で3つのドットがつながっているアイコン)をクリックします。

すると、以下のように「ソース管理」という画面が開きます。


以下でこの画面の見方や使い方についてまとめています。


現在のブランチの確認方法

画面、左下の青い部分には、現在いるブランチ名やエラーの数が表示されます。

例えば、上記のような表示であれば、現在masterブランチで作業中。エラー、警告共にゼロという内容です。

上記の場合は、topicブランチで作業中。ファイルに警告一つありという内容です。


「ステージされている変更」や「変更」の見方

ソース管理では、変更のある各ファイルがステージ前やステージ後(コミット前)でそれぞれ分けて表示されます。

ステージされている変更とは何か?

ステージされている変更とは、git add後、git commit前の状態の変更内容のことです。

変更とは何か?

変更とは、ステージ前(git add前)の状態の変更内容のことです。ワークツリーでの変更内容を指しています。


変更(ステージ前)の使い方

「変更」に表示されているファイルを簡単にgit addすることができます。

ファイルごとの3つの処理

ファイルにカーソルを合わせると、新たに、3つのアイコンが表示されます。


       ↓

それぞれのアイコンの意味は以下のようになっています。

アイコン意味コマンド
ファイルマークvscodeでファイルを開く$ code <指定したファイル>
変更をステージ$ git add <指定したファイル> 
カーブした矢印変更を破棄$ git checkout <指定したファイル> 


git addの実行

+をクリックするとファイルの場所が変更からステージされている変更に移動します。(index.htmlに注目)


すべてのファイルの一括操作

なお「変更」にある全てのファイルをgit addしたり、変更内容を元に戻すといった一括操作ができます。

変更にカーソルを合わせると、+と矢印の2つが表示されます。


すべてのファイルをgit add

+をクリックするとすべてのファイルをgit addします。

git add .


すべてのファイルの変更をリセット

・矢印をクリックするとすべてのファイルの変更をなかったことにする(undo)。

git reset --hard @

Uマーク(新規作成)がついているファイルがあるときに、矢印をクリックするとファイルを削除することになり、以下のようなコーションが表示されます。


ステージされている変更での操作

「ステージされている変更」ではステージに戻す処理とファイルの閲覧ができます。

ステージされている変更にあるファイルにカーソルを合わせると、2つのアイコンが表示されます。

それぞれの意味は以下のようになっています。

アイコン意味コマンド
ファイルマークvscodeでファイルを開く$ code <指定したファイル>
変更のステージング解除$ git reset HEAD <指定したファイル>

-マーク(ステージング解除)

-をクリックすると、ステージされている変更にあったファイルが、ステージ前の状態(変更)に戻ります。

$ git reset HEAD <指定したファイル>
 ┗ 指定したファイルをHEADがある状態に戻す。

オプションを指定しない場合–mixedと同じ処理で、ステージの状態をクリアするが、ワークツリーは残すという処理になります。

つまり、git add前の状態と同じになということです。


コミットする(git commit)

「ステージされている変更」に表示されているファイルをコミット(git commit)する場合は、一番上の検索窓にコミットメッセージを入力し、チェックマーク(✔︎)をクリックします。

実例

▼コミットメッセージ(例:add h2を入力)


▼チェックマークをクリック


$ git commit -m "add h2"の処理となります。


コミットメッセージを入力しなかった場合

コミットメッセージを入力しなかった場合も、コミットメッセージとやることは同じで、メッセージを入力する順序が変わるだけです。

$ git commitと同じ処理になり、✔︎マークをクリックした後に、メッセージの入力窓が出てきます。


「変更」のファイル群をまとめてコミットする(git add & git commit)

「変更」のファイル群をまとめてgit addとgit commitを連続して行うこともできます。

1) 変更のみで、ステージに何もない状態であること


2)コミットメッセージを入力し上部のチェックマークをクリック


コミットメッセージが未入力の場合は、別途入力窓が表示される。

3) 操作を選択。
「はい」または「常に行う」をクリックする

↓変更ファイルが一掃され完了となる

操作コマンドはgit add . && git commitです。


主要操作メニュー

git addやgit commit以外の、クローン、プル、プッシュ、ブランチ、リモート、一時退避(スタッシュ)などの処理もUI上で行うことができます。

カラム右上の「・・・」をクリックすると、クローンやプルなどその他のコマンドが表示されます。


クローン|git clone

クローンを選択することで、git cloneが実行できます。

git clone <リモートレポジトリのURL>

1) URLを入力。または、連携済みのGithubのレポジトリから選択


2) git cloneを実行するフォルダを選択する
実行したフォルダの中に、リモートレポジトリ名で新たなフォルダが作成される。

3) vscodeで開く


git checkout|新しい分岐の作成と新しい分岐の作成元の違いとは何か?

チェックアウト先を選択すると、ブランチの切り替えができます。

切り替え以下のオプションは3つです。

  1. 既存のブランチに切り替える
  2. 新らしいブランチを作成し切り替える
  3. 派生元のブランチを指定してブランチ作成し切り替える

既存のブランチに切り替え

git checkout <ブランチ名>

画面下に表示されたリストから移動したいブランチを選択します。

検索窓に入力すると絞り込みができます。ブランチがたくさんある場合は便利です。


新しいブランチを作成し切り替える

現在のブランチから新しいブランチを作成することもできます。

git checkout -b <ブランチ名>

入力窓に作成したいブランチ名を入力し、「+新しい分岐の作成…」をクリックします。

作成したブランチに切り替わります。


入力窓が未入力状態で「+新しい分岐の作成…」をクリックし、後からブランチ名を入力するのでも同じです。


派生元のブランチを指定してブランチ作成し切り替える

ブランチ作成の元となるブランチを指定してチェックアウトすることもできます。

git checkout -b <新しいブランチ名> <派生元ブランチ名>

1) 検索窓にブランチ名を入力し「+新しい分岐の作成元…」をクリック


2)派生元となるブランチを選択する


「新しい分岐の作成」と「新しい分岐の作成元」の違いとは何か?

なお、「新しい分岐の作成」と「新しい分岐の作成元」の違いは、「新しい分岐の作成」は現在のブランチのコミット履歴と同じ履歴の新しいブランチを作成するのに対し、

「新しい分岐の作成元」はコピーしたいコミット履歴をもつブランチを指定して、ブランチを作成する方法です。


プルとプッシュを自動で行う(push and/or pull)

「プル、プッシュ」にある「同期」を選択すると、ローカルのブランチとリモートのブランチの差分から、必要に応じて、pushまたはpullの両方を自動で行ってくれます。

リモートレポジトリの上流ブランチに変更があればgit pullでその内容を取り入れて、ローカルレポジトリのブランチがリモートレポジトリのブランチよりも進んでいればgit pushを行います。

実行するためには上流ブランチの設定が必要です。上流ブランチがなくても、作成するためのダイアログが表示され作成してからプッシュ or プルできます。

合わせて読みたい

上流ブランチって何?という方は下記をご参考ください。

【Github】git pushの-uオプションとは何か?upstreamや上流ブランチについて実例で解説


上流ブランチが設定済みの場合

現在のブランチの上流ブランチに「origin/master」が設定してある場合は以下のようになります。

上流ブランチの確認方法はgit branch -vvです。[ ]の中が上流ブランチです。上流ブランチがないときは[ ]自体が表示されません。

$ git branch -vv
* master  c9695c8 [origin/master] commit message


上流ブランチが設定されてない場合

上流ブランチが設定されてない場合は「ブランチを公開しますか?」と聞かれます。OKを選択すると、<リモート名>/<現在のブランチ名>の上流ブランチが自動作成され、リモートレポジトリに同期されます。

上流ブランチの確認方法はgit branch -vvです。[ ]の中が上流ブランチです。上流ブランチがないときは[ ]自体が表示されません。

$ git branch -vv
* topic   ccf5f09 [origin/topic] add ci message

リモートブランチと同期するため、リモート追跡ブランチも追加されていることがわかります。

$ git branch -a
  master
* topic
  remotes/origin/HEAD -> origin/master
  remotes/origin/master
  remotes/origin/topic


プル(git pull)

プルでは次の3種類のプルが選択可能です。


プル

上流ブランチが設定されている場合に使えるコマンドです。タグの情報も持ってきます。

git pull --tags

注意点

上流ブランチが設定されていない場合はエラーになります。

合わせて読みたい

タグって何?という方は下記をご参考ください。

【Git】git tagコマンド完全理解。タグやタグ付けとは何か?


プル(リベース)

プル(リベース)も上流ブランチが設定されている場合に使えるコマンドです。–rabaseオプション(-r)をつけて実行します。

git pull --tags -r

git mergeのように分岐させるのではなく、コミット履歴をきれいにしたい場合に使います。

合わせて読みたい

リベース(git rebase)って何?マージ(git merge)と何が違うの?という方は下記をご参考ください。

【図解】git mergeとgit rebaseの違いを実例で解説(マージとリベースは何が違うのか?)


指定元からプル

上流ブランチが設定されていない場合や、上流ブランチとは別のブランチからプルしたい場合は「指定元からプル」使います。

git pull --tags <リモート名> <リモートブランチ名>

第1、第2引数でリモートレポジトリとリモートブランチを順に選択するコマンドです。

1) リモートレポジトリを選ぶ
 URLを入力するか、リストから選ぶ。

2) リモートブランチを選ぶ
 入力するか、リストから選ぶ。

合わせて読みたい

git pullは非常によく使うコマンドです。もっと詳しく理解したいと言う方は下記をご参考ください。

【Git】git pull(プル)とは何か?使い方を実例で解説


プッシュ(git push)

プッシュをでは以下の2種類の方法でgit pushを実行することができます。


プッシュ

上流ブランチが設定されている場合に使えます。

git push



▼上流ブランチを設定していない場合
上流ブランチが設定されていない場合は、下記アラートが出るのでOKを押すと自動で上流ブランチが設定されpushを実行します

OKをクリックすると、ローカルに上流ブランチと、リモート追跡ブランチが作成されます。

リモートには実行したブランチ名のリモートブランチが新たに作成されます。


プッシュ先のリモートレポジトリを選択してプッシュ

「プッシュ先…」をクリックすると、プッシュ先のリモートレポジトリを選ぶことができます。

git push <リモートレポジトリ名> <ローカルレポジトリ名>

ブランチは現在のブランチ名が適用されます。(上記アラートでOKをクリックしたのと同じ処理です)


リモートのブランチ名を指定してpushする方法

リモートのブランチをローカルと異なるものにしたい場合は、VSCodeのUIではなくgitコマンド入力で対応する必要があります。

git push <リモートレポジトリ名> <ローカルブランチ名>:<リモートブランチ名>

このコマンドで、指定したローカルブランチの内容を、指定したリモートブランチにpushすることができます。

合わせて読みたい

ブランチ名を指定してプッシュする方法や、git pushの処理内容をもっと詳しく知りたいという人は下記をご参考ください。

【Github】git pushの-uオプションとは何か?上流ブランチやupstreamについて実例で解説


ブランチの操作(git branch)

「ブランチ」では5種類の処理が選択できます。

選択肢には「チェックアウト」や「プッシュ」と同じ内容のものが含まれています。

ここにしかないのは、「ブランチ名の変更」と「ブランチをマージ」です。


ブランチの作成元…|派生元ブランチを指定して新規ブランチを作成し移動

「ブランチの作成元…」をクリックすると、任意の既存ブランチから、新たなブランチを作成することができます。

作成したブランチに移動するため、処理はcheckcoutも含まれます。

git checkout -q -b <新規ブランチ名> --no-track <派生元ブランチ名>
 ┗ -q: –quiet。フィードバックメッセージを表示しない
 ┗ -b: 新規ブランチを作成
 ┗ –no-track: 上流ブランチを設定しない(configでbranch.autoSetupMergeが設定されていたとしても)


作業手順

  1. 入力窓にブランチ名を入力
  2. リストからブランチの作成元を選択

「チェックアウト先」で「+新しい分岐の作成元…」を選択した場合と同じです。


ブランチをマージ…「git merge」

「ブランチをマージ…」を選択すると、git mergeが実行されます。

git merge <ブランチ>

表示されたリストからマージ元のブランチを選択します。


ブランチを発行…|ブランチをリモートにプッシュ

「ブランチを発行…」をクリックすると、リモートレポジトリにプッシュ(git push)します。

その際、自動で上流ブランチも設定されます。

git push -u <リモート名> <現在のブランチ名>
 ┗ -u: –set-upstream。上流ブランチとして設定


ブランチ名を変更

「ブランチ名を変更」を選択すると、現在のブランチ名を変更できます。

git branch -m <変更後のブランチ名>
 ┗ -m: –move。ブランチ名を変更


分岐の作成…|現在のブランチから新しいブランチを作成する

「分岐の作成…」をクリックすると現在のブランチから新しいブランチを作成できます。

git checkout -q -b <新しいブランチ名> --no-track HEAD

「チェックアウト先」で「+新しい分岐の作成…」を選択した場合と同じです。


リモート(git remote)

リモートでは、リモートレポジトリの削除や追加をすることができます。


リモートの削除

「リモートの削除」では、ローカルレポジトリに登録してあるリモートレポジトリ名と対応するURLを削除します。

git remote remove <リモート名>
  ┗ 「git remote rm <リモート名>」も同じ


リモートの追加

「リモートの追加」では、リモートレポジトリのURLにリモートレポジトリ名をつけて登録することができます。

git remote add <リモート名> <URL>

合わせて読みたい

リモートレポジトリの操作の詳細については下記をご参考ください。

【Git】リモートレポジトリ(origin)を変更・削除・上書き・追加する方法


一時退避(git stash、スタッシュ)

一時退避では、次の7種類の処理が選択できます。


一時退避

一時退避では、コメント付きのstashを実行できます。

git stash push -m "コメント"

stashで-mオプションを使うにはpushが必要です。

なお、一時退避はコミット前のファイルに適用されますが、未追跡ファイルは含まないことに注意してください。


一時退避(未追跡ファイルを含む)

「一時退避(未追跡ファイルを含む)」を実行すると新規作成しgit addしていない未追跡ファイルも含めてstashします。

git stash push -u -m
 ┗ -u: –include-untracked。未追跡ファイルを含む
 ┗ -m: –message。pushのオプション


一時待避を削除する…|選択した一時待避を削除する

「一時待避を削除する…」では、リストから選んだ項目を削除できます。

git stash drop <削除したいスタッシュ>

#待避中のスタッシュ一覧を表示
$ git stash list
stash@{0}: ブランチ名: コメントA
stash@{1}: ブランチ名: コメントB


#選択したスタッシュを削除
$git stash drop stash@{0}


#削除後のリストを確認
$ git stash list
stash@{0}: ブランチ名: コメントB


一時待避内容を適用…|選択した一時待避を復活(削除しない)

「一時待避内容を適用…」では、選択した項目を復活させることができます。

git stash apply <復活させるスタッシュ>

  • 現在のブランチに追加される
  • ステージ済みの変更もadd前の状態で戻る
  • 戻した待避内容はstash listから削除しない

ステージ済み状態で戻す

ステージ済みの変更をステージ済みとして戻したい場合は、--indexオプションをつける必要があります。–indexをつけないと、git add前の状態で戻ることになります。

git stash apply <復活するスタッシュ> --index


一時待避内容を適用して削除…|選択した一時待避を復活(削除する)

「一時待避内容を適用して削除…」を実行すると、復活させた後に、stash listから削除することができます。

git stash pop <復活させるスタッシュ>


最新の一時待避内容を適用

「最新の一時待避内容を適用」は、直近保存したstash内容を復活します。(stash@{0}。stash listの一番上の項目)

git stash apply
 ┗ 「git stash apply stash@{0}」と同じ

applyなのでstash listは削除しません(popは削除する)


最新の一時待避内容を適用して削除

「最新の一時待避内容を適用して削除」は直近保存したstash内容を復活し、stash listから削除します。

git stash pop
 ┗ 「git stash pop stash@{0}」と同じ


サブモジュールがある場合

サブモジュールがある場合、左側のカラムの表示が変わります。

メインのレポジトリとサブモジュールとして登録したレポジトリがそれぞれ表示されます。

サブモジュール名をクリックすると、各サブモジュールのレポジトリ毎に変更とステージの状況が表示されます。


各記号の意味

サブモジュールのレポジトリ名の横に、複数の記号と数値が表示されます。

1. master

現在のブランチ名です。クリックするとブランチの切り替えができます。


2. 円形の矢印

現在のブランチに上流ブランチが設定してある場合に表示されます。

クリックすると、状況に応じてpush and/or pullを実行します。「同期」の処理です。


▼上流ブランチが設定されていない場合

上流ブランチがない場合は、リモート未同期のマーク(雲のようなマーク)が表示されます。

クリックすると、リモートレポジトリを選択しpushします。その際、リモートレポジトリには、現在のブランチ名のブランチが自動生成されます。


3. n↓ (数字 ↓)

リモートレポジトリの同期をした後に、リモートブランチで更新されたコミット数を表示しています。

リモートレポジトリよりもローカルが遅れていることを示してます。

例: 「8↓」
 ・リモートで8個の新たなコミットあり。
 ・同期ボタンをクリックすると、git pullを行う。


4. n↑ (数字 ↑)

リモートレポジトリの同期をした後に、ローカルブランチで追加されたコミット数を表しています。

ローカルが進んでいることを表します。

例: 「2↑」
 ・ローカルに2個の新たなコミットあり。
 ・同期ボタンをクリックすると、git pushを行う。


Gitログ

gitログの場所

VSCodeのUIによるgitコマンドの操作で困ったときは、「出力」タブを表示することでGitのログを確認することができます。

ここにはVSCodeのUIで実行したコードが表示されます。

VSCodeの右下のウインドウで、出力タブで、Gitを表示した状態は以下になります。


「出力」ウィンドウの出し方

ウインドウが表示されていない場合、下記で表示することができます。

・vscodeの表示オプションから出力を選択


・command + shift + Uを実行

合わせて読みたい

VSCodeには便利なショートカットコマンドがたくさん用意されています。作業スピードを上げるにはショートカットコマンドの活用は欠かせません。詳細については下記をご参考ください。

【VSCodeのショートカット一覧】超便利なエディタとターミナルやサイドバーの便利ショートカットまとめ

・アラートの「Gitログを開く」をクリック
実行した処理にエラーがあった場合などに、「Gitログ」を開くのポップアップが表示される。

アラートのダイアログは上から表示される場合と、右下から表示される場合があります。


Gitログのデフォルト表示内容

gitログを見たときに目当てのコマンドがパッと見つからないことがあります、これは、vscodeでgit操作すると、処理の後に更新処理が自動で行われるためです。

ことある毎に下記の表示を目にすることになります。

> git status -z -u
> git symbolic-ref --short HEAD
> git rev-parse master
> git rev-parse --symbolic-full-name master@{u}
> git rev-list --left-right master...refs/remotes/origin/master
> git for-each-ref --sort -committerdate --format %(refname) %(objectname)
> git remote --verbose
> git config --get commit.template

現在いるブランチで処理内容が若干変わりますが、最初と終わりの行は基本同じです。

> git status -z -u
> git config --get commit.template


色付きの数字とアルファベットの意味

作業を進めていくと、以下のように色付きの数字やアルファベットが表示されます。


色付きの数字は何か?

一番左の行の青い丸の中の数字は、変更のあったファイルの総数を表しています。

「変更」と「ステージされている変更」に表示されているファイルの総数になります。


色付きのアルファベットは何か?

各ファイルの横に表示されるアルファベットはファイルの状態を表しています。

アルファベット単語意味
Aadded新規追加
Mmodified変更あり
Uuntrackedgitが未追跡(新規作成、add前)
Ddeleted削除済み
Cconflictコンフリクト発生中
Rrenamedファイル名変更済み
Ssubmoduleサブモジュール

アルファベットを消す方法

これらのアルファベットは、コミット前の変更(ファイルの差分)がなくなれば消えます。

つまり、全てgit add して、git commitし、git statusで何も表示されない状態になれば、アルファベットは消えます


実例

$ git status
On branch master
nothing to commit, working tree clean


数字の表す意味

アルファベットの左側に数字が表示されることがあります(アルファベットがない場合は数字のみ)。

これは、そのファイルで発生している問題エラーの数を表しています。

例えば、HTMLファルであれば、タグが間違ってたり、終端タグのみ書かれているといった場合にこの数値が表示されます。

jsファイルであれば、functoinの中身にエラーがある場合などです。

該当のファイルを開くと、エラーや問題の箇所が色付けして表示してあるので、そこを修正すれば、これらの数値の表示もなくなります。

タイトルとURLをコピーしました