VSCode GitHubリポジトリをクローンする方法|コマンドを使わず初心者でもできる手順

GitHubのリポジトリを自分のパソコンにコピーしたいが、Gitコマンドの入力に不安がある人は多い。VSCodeを使えば、コマンドを入力しなくても画面操作だけでGitHubのリポジトリをクローンできる。

この記事では、VSCodeのコマンドパレットからGitHubのリポジトリをクローンする方法を、初心者向けにわかりやすく解説する。GitやGitHubを使い始めたばかりでも、手順どおりに進めればローカル環境にリポジトリを用意できる。

PR

VSCodeでGitHubリポジトリをクローンするとは

VSCodeでGitHubリポジトリをクローンするとは、GitHub上にあるプロジェクト一式を、自分のパソコン内のフォルダへコピーする操作のことだ。

クローンすると、GitHubにあるファイルやフォルダ構成がローカル環境に作成される。以降はVSCodeでファイルを編集したり、変更内容をGitHubへ反映したりできるようになる。

コマンドを使わずにクローンできる理由

VSCodeにはGit操作を補助する機能が用意されている。通常は git clone というコマンドを使うが、VSCodeではコマンドパレットから「Git: クローン」をクリックするだけで同じ操作ができる。

そのため、ターミナル操作に慣れていない人でも、画面の案内に沿ってGitHubリポジトリを取得しやすい。

PR

コマンドを使わずにVSCodeでクローンするメリット・デメリット

VSCodeからGitHubリポジトリをクローンする方法は、初心者にとって扱いやすい。一方で、画面操作だからこその注意点もある。

メリット

コマンドを覚えなくても操作できる点が大きなメリットだ。Gitに慣れていない段階では、コマンドの入力ミスや保存先の指定ミスが起きやすい。VSCodeの画面操作なら、表示された候補をクリックしながら進められる。

主なメリットは次のとおりだ。

  • Gitコマンドを手入力しなくてよい
  • GitHubアカウントのリポジトリ一覧からクリックして選べる
  • クローン後、そのままVSCodeでフォルダを開ける
  • 初回認証も画面の案内に沿って進めやすい

特に、GitHubを学び始めたばかりの人は、まずVSCodeの画面操作で流れを理解するとよい。

デメリット

VSCodeの画面操作は便利だが、Gitの仕組みを完全に理解しないまま進められるため、エラーが出たときに原因を判断しにくい場合がある。

また、会社や学校の環境では、GitHubへのログインや認証が制限されていることもある。その場合は、ブラウザでのログイン、アクセス許可、ネットワーク設定などを確認する必要がある。

PR

VSCodeでGitHubリポジトリをクローンする前提条件

作業を始める前に、GitHubアカウント、VSCode、Gitの準備をしておく。ここが整っていないと、途中でリポジトリ一覧が表示されなかったり、クローン処理で止まったりする。

GitHubアカウントが作成されていること

GitHubのリポジトリをクローンするには、GitHubアカウントが必要になる。まだ作成していない場合は、GitHubのサインアップページからアカウントを作成する。

アカウント作成後、ブラウザでGitHubにログインできる状態にしておくと、VSCodeでの認証も進めやすい。

VSCodeをインストールされていること

この記事では、VSCodeがインストール済みであることを前提にする。まだインストールしていない場合は、公式サイトからインストールしておく。

VSCodeのインストールは、基本的に公式サイトからインストーラーをダウンロードし、画面の案内に沿って進めればよい。

  1. Visual Studio Codeの公式サイトにアクセスする
  2. 使用しているOSに合ったインストーラーをダウンロードする
  3. ダウンロードしたインストーラーを実行し、画面の案内に沿ってインストールする
  4. インストール後にVSCodeを起動する。
  5. 日本語表記にするため、拡張機能の「Japanese Language Pack for Visual Studio Code」をインストールする

インストール後、VSCodeを起動できれば準備は完了だ。Windowsの場合、インストール中に「PATHへの追加」や「エクスプローラーのコンテキストメニューに追加」といった項目が表示されることがある。迷う場合は、基本的には初期設定のまま進めても問題ない。

Gitをインストールされていること

VSCodeでGitHubリポジトリをクローンするには、パソコンにGitをインストールしておく必要がある。Gitは、GitHub上のリポジトリをローカル環境へ取得したり、変更履歴を管理したりするためのツールだ。

まだGitをインストールしていない場合は、Git公式サイトからインストーラーを入手してインストールする。

  • Git公式サイトにアクセスする
  • 使用しているOSに合ったGitのインストーラーをダウンロードする
  • ダウンロードしたインストーラーを実行し、画面の案内に沿ってインストールする

Gitのインストールでは多くの設定画面が表示されることがあるが、初心者の場合は基本的に初期設定のまま進めればよい。インストール後はVSCodeを再起動してから作業すると、Gitが認識されやすい。

VSCodeでGitHubリポジトリをクローンする手順

ここからは、VSCodeの画面操作だけでGitHubリポジトリをクローンする手順を説明する。基本的には、コマンドパレットから「Git: クローン」を実行し、複製したいリポジトリと保存先をクリックして進める。

1. コマンドパレットを開く

VSCodeを起動し、上部メニューの「表示」から「コマンド パレット」をクリックする。

ショートカットキーを使う場合は、Ctrl + Shift + P を使用する。

VSCode GitHubリポジトリをクローンする方法|コマンドを使わず初心者でもできる手順
1. コマンドパレットを開く

VSCodeを起動し、上部メニューの「表示」から「コマンド パレット」をクリックする。

ショートカットキーを使う場合は、Ctrl + Shift + P を使用する。

2. Gitのクローン機能を検索する

コマンドパレットが表示されたら、入力欄に git clone と入力する。

候補に「Git: クローン」または「GitHubから複製」のような項目が表示されるため、該当する項目をクリックする。表示名はVSCodeのバージョンや拡張機能の状態によって少し異なる場合がある。

VSCode GitHubリポジトリをクローンする方法|コマンドを使わず初心者でもできる手順
コマンドパレットが表示されたら、入力欄に git clone と入力する。

3. GitHubから複製をクリックする

「GitHubから複製」が表示された場合は、その項目をクリックする。初回利用時は、GitHubへのサインインやアクセス許可を求められることがある。

認証画面が表示されたら、画面の案内に従ってGitHubアカウントでログインする。アクセス許可を求められた場合は、内容を確認して進める。

VSCode GitHubリポジトリをクローンする方法|コマンドを使わず初心者でもできる手順
「GitHubから複製」が表示された場合は、その項目をクリックする。初回利用時は、GitHubへのサインインやアクセス許可を求められることがある。

4. クローンしたいリポジトリをクリックする

GitHubの認証が完了すると、ログイン中のGitHubアカウントで利用できるリポジトリ一覧が表示される。

クローンしたいリポジトリ名をクリックする。リポジトリが多い場合は、上部の入力欄にリポジトリ名の一部を入力すると探しやすい。

VSCode GitHubリポジトリをクローンする方法|コマンドを使わず初心者でもできる手順
GitHubの認証が完了すると、ログイン中のGitHubアカウントで利用できるリポジトリ一覧が表示される。

クローンしたいリポジトリ名をクリックする。リポジトリが多い場合は、上部の入力欄にリポジトリ名の一部を入力すると探しやすい。

5. 複製先のフォルダを選択する

次に、リポジトリを保存するフォルダをクリックする。ここでクリックしたフォルダの中に、リポジトリ名のフォルダが作成される。

例えば、リポジトリ名がtestprojectで、C:\Workspaceフォルダを複製先にすると、C:\Workspace\testprojectフォルダが作成され、その中にGitHub上のファイルがコピーされる。

VSCode GitHubリポジトリをクローンする方法|コマンドを使わず初心者でもできる手順
次に、リポジトリを保存するフォルダをクリックする。ここでクリックしたフォルダの中に、リポジトリ名のフォルダが作成される。

例えば、リポジトリ名がtestprojectで、C:\Workspaceフォルダを複製先にすると、C:\Workspace\testprojectフォルダが作成され、その中にGitHub上のファイルがコピーされる。

6. クローンしたフォルダをVSCodeで開く

クローンが完了すると、VSCodeからフォルダを開くか確認されることがある。続けて作業する場合は、クローンしたフォルダを開く。

フォルダを開くと、エクスプローラーにリポジトリ内のファイルが表示される。これで、VSCode上で編集作業を始められる。

VSCode GitHubリポジトリをクローンする方法|コマンドを使わず初心者でもできる手順
クローンが完了すると、VSCodeからフォルダを開くか確認されることがある。続けて作業する場合は、クローンしたフォルダを開く。

フォルダを開くと、エクスプローラーにリポジトリ内のファイルが表示される。これで、VSCode上で編集作業を始められる。
VSCode GitHubリポジトリをクローンする方法|コマンドを使わず初心者でもできる手順
クローンが完了すると、VSCodeからフォルダを開くか確認されることがある。続けて作業する場合は、クローンしたフォルダを開く。

フォルダを開くと、エクスプローラーにリポジトリ内のファイルが表示される。これで、VSCode上で編集作業を始められる。

VSCodeでGitHubリポジトリをクローンできない時の確認ポイント

手順どおりに進めても、環境によってはリポジトリが表示されない、認証が進まない、クローンに失敗することがある。まずは基本的な原因から確認するとよい。

GitHubにログインできているか確認する

リポジトリ一覧が表示されない場合は、GitHubに正しくログインできていない可能性がある。ブラウザでGitHubを開き、対象のアカウントでログインできているか確認する。

複数のGitHubアカウントを使っている場合は、VSCodeが別のアカウントで認証されていることもある。期待したリポジトリが出ない場合は、ログイン中のアカウントを確認する。

対象リポジトリの権限を確認する

クローンしたいリポジトリが表示されない場合は、そのリポジトリにアクセス権限がない可能性がある。組織やチームのリポジトリでは、閲覧権限が付与されていないと一覧に出ないことがある。

自分がそのリポジトリをGitHub上で開けるか、ブラウザで確認すると切り分けやすい。

Gitがインストールされているか確認する

VSCodeのGit機能を使うには、環境によってGitのインストールが必要になる。クローン時にGitが見つからないという内容のメッセージが表示された場合は、Gitをインストールする。

インストール後は、VSCodeを再起動してから再度クローンを試すと反映されやすい。

VSCodeでクローンする時の注意点

VSCodeからクローンする操作自体は簡単だが、保存先やリポジトリの扱いを間違えると後で管理しづらくなる。最初に整理しておくと、作業がスムーズになる。

保存先フォルダはわかりやすい場所にする

クローン先は、後から見つけやすい場所にする。デスクトップに大量のリポジトリを置くと管理しづらくなるため、作業用フォルダを作ってまとめておくとよい。

たとえば、C:\Workspace や C:\Projects のようなフォルダを作り、その中に各リポジトリをクローンすると整理しやすい。

同じリポジトリを何度もクローンしない

同じリポジトリを複数の場所にクローンすると、どのフォルダが最新かわかりにくくなる。基本的には、1つのリポジトリにつき1つの作業フォルダで管理する。

すでにクローン済みか不安な場合は、保存先に同じリポジトリ名のフォルダがないか確認してから操作するとよい。

まとめ

VSCodeを使えば、Gitコマンドを入力しなくてもGitHubリポジトリをクローンできる。コマンドパレットから git: clone を検索し、GitHubから複製、リポジトリのクリック、保存先フォルダのクリックという流れで進めればよい。

初心者は、まずVSCodeの画面操作でクローンの流れを理解すると、GitHubを使った開発やファイル管理に入りやすくなる。ただし、認証、アクセス権限、Gitのインストール、保存先フォルダには注意が必要だ。

コマンド操作に慣れていない場合でも、VSCodeの機能を使えばGitHubリポジトリをローカル環境へ用意できる。まずは小さなリポジトリで試し、クローン後にVSCodeでファイルを開けるところまで確認しておくとよい。

\ITメモが役に立ったら/

ITメモをサポートする!
開発環境
PR

コメント

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