Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成)

Visual Studio Code でGitリポジトリを利用する手順を紹介します。

手順

Visual StudioCodeを起動します。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像1

左側のツールバーの[ソース管理]のボタンをクリックします。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像2

オレンジの丸で囲まれたボタンが[ソース管理]のボタンです。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像3

ボタンをクリックすると、ソース管理の画面が表示されます。Visual Studio Codeのみをインストールした状態では下図の画面が表示されます。 [リポジトリのクローン]ボタンはグレーアウトしておりクリックできません。Gitのインストールが必要な旨のメッセージがソース管理パネル内に表示されています。
[gitをインストール]のリンクをクリックします。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像4

[gitをインストール]のリンクをクリックするとWebブラウザが起動し、Git for Windows のページが表示されます。
Git for Windows をダウンロードしてインストールします。インストール手順の詳細はこちらの記事を参照してください。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像5

Git for Windows のインストール後、Visual Studio Codeを再起動します。再起動後、[ソース管理]のボタンをクリックします。 下図の画面が表示されます。[フォルダーを開く]ボタンと[リポジトリのクローン]ボタンが有効になりクリックできる状態になります。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像6

GitHub からリポジトリをクローンする

GitHubからリポジトリをクローンします。ソース管理画面の[リポジトリのクローン]ボタンをクリックします。上部のテキストボックスにフォーカスが移りますので、 GitリポジトリのURLを入力します。URLを入力できたら[Enter]キーを押します。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像7

下図の[フォルダーの選択]ダイアログが表示されます。ローカルリポジトリを配置するフォルダを選択します。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像8

フォルダの選択ができると、リポジトリの複製が始まります。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像9

リポジトリがGitHubの場合、下図のウィンドウが表示されます。ウィンドウ中央の [Sign in with your browser] のボタンをクリックします。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像10
[Authorize Visual Studio Code to access GitHub]のページが表示されます。[Continue]ボタンをクリックします。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像11

下図の[Sign in GitHub]のページが表示されます。GitHubのIDとパスワードを入力し、[Sign in]ボタンをクリックします。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像12

下図の[Authorise Git Credential Manager]の画面が表示されます。ページ下部の[Authorize GitCredentialManager]ボタンをクリックします。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像13

[Authentication Succeeded]画面が表示されます。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像14

Visual Studio Code のウィンドウでは、Gitリポジトリのクローン作成が始まります。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像15

クローン作成が完了すると、クローンしたリポジトリを開くかのポップアップがウィンドウ右下に表示されます。[開く]ボタンをクリックします。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像16

初回に開く場合は、下図の[このフォルダー内のファイルの作成者を信頼しますか?]のダイアログが表示されます。[はい、作成者を信頼します] のボタンをクリックします。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像17

下図の画面が表示されます。ウィンドウ左側に[エクスプローラー]パネルが表示され、Gitリポジトリのファイルが表示されています。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像18

ファイルをクリックすると、ファイルが開かれ、編集できる状態になります。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像19

Azure DevOps のリポジトリをクローンする

Azure DevOps のリポジトリをクローンする手順です。
Azure DevOpsのリポジトリのページにアクセスします。Repos画面のファイル画面の右上にある[クローン]ボタンをクリックします。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像20

ウィンドウの右側に[リポジトリの複製]パネルがスライドイン表示されます。[コマンドライン]セクションのテキストボックスに表示されている、 GitリポジトリのURLの文字列をコピーする。または、[IDE]セクションのコンボボックスを開き [CS Code でのクローン作成] を 選択してクリックします。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像21

Visual Studio Code のウィンドウに戻り、[ソース管理]ボタンをクリックし、ソース管理パネルを表示します。パネル内の[リポジトリのクローン]ボタンをクリックします。 上部のテキストボックスにフォーカスが移りますので、Azure DevOpsでコピーしたGitリポジトリのURLをペーストします。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像22

URLを入力してEnterキーを押すと、下図の[フォルダーの選択]ダイアログが表示されます。ローカルリポジトリを配置するフォルダを選択します。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像23

Visual Studio Codeのウィンドウの右下にポップアップウィンドウが表示され、クローン処理が始まります。Webブラウザで Azure DevOpsにサインインしている状態であれば、 認証画面は表示されずにクローンの作成が始まります。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像24

クローンの作成が完了すると、右下のポップアップウィンドウに、リポジトリを開くかの確認メッセージが表示されます。[開く]ボタンをクリックします。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像25

初回にリポジトリを開く場合は、下図の[このフォルダー内のファイルの作成者を信頼しますか?]のダイアログが表示されます。 [はい、作成者を信頼します] のボタンをクリックします。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像26

ローカルリポジトリが開かれ、ファイルが参照できます。
Visual Studio Code でGitリポジトリを利用する (Gitのセットアップとリポジトリのクローンを作成):画像27

Azure DevOpsのリポジトリを取得できました。

AuthorPortraitAlt
著者
iPentecの企画・分析担当。口が悪いのでなるべく寡黙でありたいと思っている。が、ついついしゃべってしまい、毎回墓穴を掘っている。
作成日: 2021-12-24
Copyright © 1995–2025 iPentec all rights reserverd.