コンピューターシステム株式会社

技術BLOG

VSCodeからGitの操作

Git 2021/08/31 松山担当

どうも、松山本社のtomです。

当ブログ内でもGitについて取り上げた記事がありましたが、

私の参画している開発案件でも、最近Gitが取り入れられるようになりました。

今回はVSCodeでのGit操作ということで、GUIでの操作を紹介したいと思います。

VSCodeを選んだ理由としては、私が実際に使用していること、

開発→Git共有がVSCode上から操作でき、体感的に理解しやすいかなと思ったところがあります。

CUIが苦手だったり、コマンドを覚えるのが面倒な人は、ご一読ください。

またGitに関する基本的な説明、用語等については、既に記事がありますのでそちらを参照ください。

Git: 基本的な使い方と操作の取り消し

事前準備

Git、VSCodeをそれぞれインストールします。

Git for Windows

Visual Studio Code - Code Editing. Redefined

インストール手順については、VSCode、Git Bashの導入について記載した記事があります。

こちらを参照ください。

Git Bashについて

Visual Studio Codeを使用したC#開発環境の構築

また今回は、VSCodeの拡張機能である"Git Graph"を使用しますので、インストールしておきます。

"Git Graph"は、コミット履歴を時系列順に表示してくれるものです。(ブランチ毎に表示や、コミット内容の検索をすることもできます。)

リポジトリ作成

まず、今回使用するGit環境を作成していきます。

"Git_test"フォルダを用意しました。この中にリポジトリを作成していきます。

まずは、Git Bashからリモートリポジトリを作成しておきます。

"cd \\Git_test"で対象フォルダへ移動します。

"git init --bare remote.git"を実行します。

"git init --bare remote.git"により、"remote.git"フォルダが作成されました。

これが、リモートリポジトリとなります。

VSCodeから操作

続いて、ローカルリポジトリを作成していきます。

"Git_test"内に"local"フォルダを作成しました。

VSCodeを起動し、エクスプローラメニューから"フォルダを開く"を選択、

作成したローカルリポジトリのフォルダを開きます。

続いて、ソース管理メニューのからリポジトリを初期化を選択して

ローカルリポジトリを作成します。

先程作った"local"配下に".git"という隠しフォルダが作成されました。

これがローカルリポジトリとなります。

次に、ファイルを作成してGitにコミット、プッシュをしていきます。

VSCodeにて、先程作成したリモートリポジトリのフォルダに"test.txt"を作成します。

続いて、リモートリポジトリへアクセスする際に必要となる

ユーザー名、メールアドレスの設定を行います。

まず、表示タブからのターミナルを選択して、ターミナルを表示します。

"git config --local user.name "tom""でユーザー名を設定します。

"git config --local user.email "tom@example.com""でメールアドレスを設定します。

次に、ファイルのプッシュ先となるリモートを追加します。

ソース管理メニューのプル、プッシュ→プッシュ先...を選択します。

"URLからリモートを追加する"で、"Git_test\remote.git"を指定します。

リモート名に"origin"を指定します。

左メニューのソース管理を開き、作成したファイルの変更をステージ(+ボタン押下)します。

入力欄にコミット時のメッセージを入力し、コミットボタン(チェックマーク)を押下します。

メニューを開き、プッシュを押下します。

ここで、冒頭でインストールした拡張機能"Git Graph"を開くと、

先程のコミット内容が確認できます。

これで、ローカルリポジトリからリモートリポジトリへのプッシュが確認できました。

別のリポジトリから確認

ここで、リモートリポジトリにプッシュした内容を確認するため、

ローカルリポジトリをもう一つ作成します。

先程の"Git_test"に"local2"フォルダを作成しました。

VSCodeで"local2"フォルダを開きます。

"local"と同様の手順で、ソース管理メニューからリポジトリを初期化、

"プル、プッシュ"→"プッシュ先..."を選択してリモートの追加を行います。

リモートの追加まで出来たら、ソース管理メニューのプルを選択します。

これで、ローカルリポジトリ("local")で作成したファイルが、

リモートリポジトリからプルすることで、"local2"にコピーできました。

以上が、VSCodeでのGitの操作でした。

この他にも、クローン、ブランチの作成等もVSCodeから操作できます。

CUIでの操作が苦手な人は、試してみてください。