Git コマンドとUI操作(Visual Studio Code)

1.はじめに

過去の記事の Visual Studio Code バージョンです。


バージョン管理システムとして Git というソフトが存在します。Git コマンドを使用することができるわけですが、コードを書いていく上ではエディター又は統合開発環境とともに使用します。
今回は良く使うコマンドとそれに対応する操作を Visual Studio Codeでどのように実現するかメモしていきたいと思います。
メモ書き程度なので参考になれば幸いです。
Git Hub でリモート管理することを前提にしています。

<環境>
-Git : インストール済
-Visual Studio Code: インストール済
-Windows 10
Git Hub を使用する場合は認証が必要

拡張機能としては Git Graph を使用します。

2.Git 管理の始まり

1)既に作成済のプロジェクトについてGit管理を始める場合

対応コマンド: git init , git remote add, git push が対応

ソース管理アイコンを押して「Initialize Repository」でGit 管理を始めることができます。
またソース管理アイコンを押して「Publish to GitHub」でローカルでGit管理を始めるとともに、Git Hub にもリポジトリを作成し、そちらにpushすることができます。


ソース管理画面

2)Git Hub からリポジトリをコピー(クローン)する場合

対応コマンド:git clone
コマンドで直接実行する方法も勿論ありますが、空のフォルダを開く等して「Welcome」からCloneすることもできます。
クリックするとどのリモートリポジトリの内容をどこにクローンするか選択することになります。

Welcome 画面

他にも以下の画面でも可能です。

全体コマンド(Clone)

3.ローカルでのGit管理

1)ブランチの確認と作成

対応コマンド:git branch

ブランチは履歴の流れを別々に記録していくためのもので、様々な開発者が別々に機能を開発するのに有効です。
現在のブランチはUI下側の以下の赤枠で確認できます。

ブランチ確認画面

ブランチを作成する際には、ソース管理アイコンを押し、「Branch」=>「Create Branch」とクリックすると、名前を入力するように指示されるので名前を入力してください。

Create Branch

生成したブランチは Git Graph アイコンを押すことで確認でき、ブランチをダブルクリックするとブランチを切り替えることもできます。

Git Graph 画面

2)インデックスエリアへの登録

対応コマンド:git add

色々なファイルを変更をした後、変更として登録したいファイルをインデックスエリアに登録(ステージング)します。
ソース管理アイコンを押し、「+」マークを押します。
Change の横の「+」マークは変更したもの全てを登録し、個々のファイルの「+」マークは個別に登録します。
あくまで変更対象としたい状態のファイルをインデックスエリアに登録しただけなので、まだバージョンとして登録されていないことに留意してください。

インデックスエリアに登録

3)バージョンとして登録(コミット)

対応コマンド:git commit
2)実施後、メッセージを記載して「Commit」をクリックすることで、バージョンとして登録されます。

コミット実行

4.リモート環境(Git Hub)とのやりとり

AさんとBさんで開発している場合、先にAさんが開発してリモート環境に反映していることがあります。
そのため自分の変更をリモート環境に反映する前に、現在のリモート環境の変更を取り込んでからリモート環境に反映する必要が出ることがあります。
そこで以下の流れでリモート環境への反映までを行う想定にしたいと思います。

1) リモート環境の変更の取り込み「ローカルのmasterブランチに」
2) 開発が終わった featureComment ブランチと master ブランチを統合
3) 食い違う部分が発生し、修正するケース
4) リモートへの反映

1)リモート環境の変更の取り込み

ローカルのmasterブランチに Git Hub の master ブランチを取り込むためには以下の操作を実施します。
①赤枠の箇所をクリックして「master」ブランチに移動
➁赤枠の「Pull」をクリックします。
対応コマンド:git pull

master ブランチへの切り替え
Git Pull

2)開発が終わった featureComment ブランチと master ブランチを統合

①master ブランチへの切り替えと同様の方法で「featureComment」ブランチに移動します。
➁赤枠の「Branch」=>「Merge Branch」をクリックします。その後℃のブランチをマージするか確認されるのでmasterブランチを選択します。
食い違う部分が無ければマージが成功します。
対応コマンド: git merge

マージ選択

3)食い違う部分が発生し(conflict)、修正するケース

同じファイルを触っている場合にはコンフリクト(競合)が発生することがあります。

競合発生画面

「Resolve Merge Editor」を開くと以下のような画面が開きます。
「Incoming」と「Current」を比較して、「Result」画面を修正します。
修正が完了したら、「Complete Merge」をクリックします。

マージエディター画面

4) リモートへの反映

赤枠の「Publish Branch」をクリックすることでリモート環境に反映することができます。
対応コマンド:git push

git push 画面

今回は featureComment ブランチをプッシュしているので、Git Hub 上で「pull request」を実施し、レビュー後マージされる流れになります。

5.コミットログ

1)コミットをまとめる(リベースのインタラクティブ実行)

対応コマンド:git rebase=>squash

細かくコミットしていてリモートにプッシュする前にコミットログをまとめたいときに使用できます。
ただ実施した場合は1つ前のコミットログに戻る等の微調整はできなくなるので注意してください。
「Git Graph」のアイコンをクリックして履歴を表示します。
(リベースのインタラクティブ実行ができます。)

1.まとめたいコミットの一つ手前のコミット履歴を右クリックします。
2.「Rebase current branch on this Commit...」をクリックします。
3.「Launch Interactive Rebase in new Terminal」にチェックを付けます。
4.「Yes, rebase」をクリックします。

手順1-2
手順3-4

すると以下のようにエディターが開くので、「i:編集モード」、「Esc:終了」、「:wq:上書き終了」を使用して、pickからsquashに変更します。
その後コメントの編集画面も開くのでそれを完了すると、コミットがまとめられます。

編集画面

2)過去に戻る

対応コマンド:git reset

Git Graphの画面から戻りたいログで右クリックをして、「Reset current branch to this Commit」を選択します。

Git graph画面

git reset のオプションが確認されるので、戻る前までのファイル変更が要らない場合は「--hard」を選択するなど適宜選びます。
(画面はMixedを選択しています。)

git reset --mixed

6.GitとVisual Studio Code関連のお勧め書籍

Gitに関しては、以下の書籍がお勧めです。コマンドやGitの全体像について掴むことができます。

Visual Studio Code は以下の本が良かったです。設定に関することや実際のプログラミングでの応用例が記載されています。

以上、皆様の開発の参考になれば幸いです。

この記事が気に入ったらサポートをしてみませんか?