VSCodeでGitの使い方!(クローンからプッシュ、履歴確認など)

gitGit

VSCodeでGitを使う方法について書いています。
VSCodeなどのGUIツールを使うと、ファイルの差分や履歴を確認するときにすごく見やすいです。

GUIツールが使える場合には積極的に使っていくとよいかと思います。
公式のこちらの記事にVSCodeのバージョン管理について記載がありました。

gitコマンドで操作する方法については、下記のリンクに書きました。
気になる方は確認してみてください。
・【Git入門】gitコマンドを覚えよう!よく使うコマンドなど10記事!

それでは、リポジトリのクローンから確認していきましょう。

PR

リポジトリをクローンする(git clone)

VSCodeを開いたら左のGitのアイコンをクリックします。
クリックしたら、「Clone Repository(リポジトリの複製)」を選択します。
VSCodeでGithubクローン

VSCodeでGitHub連携

拡張機能のGitHubからGitHubのサインインをするか確認されます。
VSCodeでGitHubのサインイン確認

許可(Allow)をクリックすると、ブラウザでサインインするように促されるので、サインインします。
VSCodeでGitHubにサインインする

Visual Stadio Codeを開くか聞かれたら、開いてください。
VSCodeを開くかの確認

OKを押します。
VSCodeを開いた後にOKを押す

もう一度「Clone Repository(リポジトリの複製)」を選択します。
そうすると、下記のようにリポジトリが選択できるようになっているので、クローンしたいリポジトリを選びます。
(※選択できない場合は一度VSCodeを開きなおしてみてください)

VSCodeでクローンするリポジトリを選択する

ディレクトリを選ぶと、クローンされてローカルにソースコードがダウンロードされます。
そのまま作業に移る場合は、クローンしたディレクトリでVSCodeを開きなおしてください。

リポジトリをクローンするのはgit cloneコマンドでも可能です。

コマンドを使う場合は、下記の記事を参考にしてみてください。
・【Git入門】git cloneの使い方!ソースコードをダウンロードしてみよう
PR

ファイルをステージエリアに追加する(git add)

ファイルをステージエリアに追加してみます。
これはgit addコマンドで追加するのと同じ意味合いになります。

先ほどのGitのタブを選択すると、左側には変更したファイルや新規に作成したファイルが表示されます。

ファイルを選択すると、右側にはファイルの差分が表示されます。
ファイルの変更点に問題がない場合は、下記のようにファイルの+ボタンを押すと…

VSCodeでファイルをステージエリアに追加する

このようにステージエリアに追加されます。
VSCodeでファイルをステージエリアに追加した後

ファイルをコミットする(git commit)

ファイルをステージエリアに追加したあとにファイルをコミットすることができます。
コミットメッセージを入力して、チェックアイコンをクリックします。
VSCodeでファイルをコミットする

ファイルがコミットされると、下記のようにCOMMITSタブでコミットされていることが確認できます。
VSCodeでファイルをコミット後の確認

また、コミットメッセージを開くことで、変更したファイルの一覧の確認が可能です。
VSCodeでコミット履歴のファイル一覧を確認

ファイルをプッシュする(git push)

ファイルをプッシュするには、コミットが終わった状態で「Sync Changes(変更の同期)」ボタンをクリックします。
この操作でGitHubのリポジトリに対して、コミットした内容を反映します。
VSCodeでファイルをプッシュする

プッシュが完了して、GitHubを見ると内容が反映されていることが確認できました。
GitHubでプッシュされたか確認する

コミット履歴を確認する(git log)

コミット履歴を確認してみます。
VSCodeで見ると、差分が見やすいのでとても助かります。

コマンドパレットをひらいて、Git View Historyを探して選択します。
VSCodeでコミット履歴を確認する

そうすると、下記のようにログが表示されます。
VSCodeでコミット履歴が表示された

ログの行を選択すると、コミットされたファイルの一覧が並びます。
「Previous」を選択すると、前のコミットと比べてどうなっているかを確認できます。
VSCodeで前のコミットとの差分を確認する

ブランチを作成する(git branch)

画面左下のブランチ名をクリックします。
VSCodeで画面左下からブランチを作成する

ブランチ名を入力して、「Create new branch…」を選択します。
VSCodeでブランチ名を入力して、ブランチを作成

そうすると、画面左下のブランチ名が変わったことが確認できます。
VSCodeでブランチができたことを確認

git branchコマンドを実行しても、現在のブランチが切り替えたブランチになっていることが確認できます。

$ git branch
  main
* test123
git branchコマンドについては、こちらを確認してみてください。
・【Git入門】git branchの使い方!ブランチの作成などトピックス4つ!

ブランチを切り替える(git checkout)

ブランチを切り替える場合も、画面左下のブランチ名を選択します。
存在するブランチが一覧表示されるので、選ぶと切り替えることが可能です。
存在するブランチの切り替え

originがついているものは、ローカルに存在せずにリモートリポジトリのみに存在するものです。
クリックすることで、チェックアウトして、ブランチを切り替えてくれます。

git checkoutコマンドについては、こちらを確認してみてください。
・【Git入門】git checkoutの使い方!ブランチを切り替え・リモートから取得

コメント

Ads Blocker Image Powered by Code Help Pro

広告ブロッカーが検出されました。

ブラウザの拡張機能を使用して広告ブロックをしていることが確認できました。 ブラウザの広告ブロッカー機能を無効にしていただくか、codelikes.comをホワイトリストに追加し、更新をクリックしてください。 お手数ですが、よろしくお願いします🙇‍♂️
タイトルとURLをコピーしました