VSCodeでGitHubをクローンする完全ガイド!初心者でも5分でできる3つの方法

github

GitHubで公開されているプロジェクトを使いたい。チームメンバーと一緒に開発したい。オープンソースのコードを勉強したい。

そんな時に必要なのが「クローン」という操作です。

でも、「クローンって何?」「どうやってVSCodeで使うの?」と疑問に思う方も多いはず。

この記事では、Visual Studio Code(VSCode)を使ってGitHubからリポジトリをクローンする方法を、初心者の方にも分かりやすく解説します。難しいコマンドは必要ありません。マウス操作だけでもできる方法から、より本格的な方法まで、あなたに合ったやり方が必ず見つかります。

プログラミング初心者の方も安心してください。一緒に進めていきましょう!

スポンサーリンク
  1. そもそも「クローン」って何?基本を理解しよう
    1. クローンとは
    2. リポジトリとは
    3. なぜクローンが必要なの?
  2. 【準備編】クローンする前に必要なもの
    1. 必要なもの1:VSCodeのインストール
    2. 必要なもの2:Gitのインストール
    3. 必要なもの3:GitHubアカウント(場合による)
    4. GitHubにサインインしておく(推奨)
  3. 【方法1】コマンドパレットから簡単クローン(最もおすすめ)
    1. ステップ1:クローンしたいリポジトリのURLを取得
    2. ステップ2:VSCodeでコマンドパレットを開く
    3. ステップ3:「Git: Clone」を実行
    4. ステップ4:保存場所を選ぶ
    5. ステップ5:クローン完了!
  4. 【方法2】スタート画面から直接クローン
    1. 手順
  5. 【方法3】ソース管理パネルからクローン
    1. 手順
  6. 【応用編】GitHub拡張機能を使った方法
    1. 拡張機能のインストール
    2. 拡張機能からクローン
  7. HTTPSとSSH、どちらでクローンすべき?
    1. HTTPS方式(初心者におすすめ)
    2. SSH方式(上級者向け)
  8. クローン後の基本操作
    1. ファイルを確認する
    2. README.mdを読む
    3. 依存パッケージをインストール
    4. プロジェクトを実行してみる
  9. よくあるエラーと解決方法
    1. エラー1:「git: command not found」
    2. エラー2:「Repository not found」
    3. エラー3:認証エラー(Username/Password)
    4. エラー4:「fatal: destination path already exists」
    5. エラー5:クローンが途中で止まる
  10. 大きなリポジトリをクローンする時のコツ
    1. Shallow Clone(浅いクローン)
  11. 複数のリポジトリを管理する方法
    1. フォルダ構成のおすすめ
    2. VSCodeのワークスペース機能
  12. GitHubのフォークとクローンの違い
    1. フォーク(Fork)
    2. クローン(Clone)
    3. 典型的な流れ
  13. クローン後の便利なVSCode機能
    1. ソース管理機能
    2. GitLens拡張機能
    3. ターミナルの統合
  14. まとめ:VSCodeでのクローンはとても簡単!

そもそも「クローン」って何?基本を理解しよう

専門用語を使う前に、基本をしっかり押さえておきましょう。

クローンとは

簡単に言うと:

GitHubに保存されているプロジェクト(コードやファイルのまとまり)を、自分のパソコンにコピーすることです。

イメージ:

GitHubは「クラウド上の本棚」、クローンは「本を借りて自宅に持ち帰る」ようなものです。

リポジトリとは

リポジトリ(Repository):

プロジェクトのファイルや履歴が保存されている場所のこと。「リポジトリ」は長いので「リポ」と略すこともあります。

実例:

「react」というリポジトリには、Reactというライブラリのすべてのコードと、その変更履歴が入っています。

なぜクローンが必要なの?

理由1:コードを編集したい

GitHub上で見るだけでなく、自分のパソコンで実際に動かしたり、編集したりできます。

理由2:チーム開発に参加したい

クローンすることで、チームメンバーと同じコードを共有し、それぞれが作業できます。

理由3:オープンソースから学びたい

有名なプロジェクトのコードを手元に持ってきて、じっくり勉強できます。

【準備編】クローンする前に必要なもの

実際の作業に入る前に、準備を整えましょう。

必要なもの1:VSCodeのインストール

Visual Studio Codeがパソコンにインストールされている必要があります。

ダウンロード先:

公式サイト(code.visualstudio.com)から無料でダウンロードできます。

必要なもの2:Gitのインストール

Gitというバージョン管理システムが必要です。

確認方法(Windows):

  1. コマンドプロンプトを開く
  2. git --version と入力してEnter

バージョン番号が表示されればインストール済みです。

インストール方法:

  • Windows:git-scm.com からダウンロード
  • Mac:ターミナルで git --version を実行すると自動的にインストールが始まる
  • Linux:sudo apt install git(Ubuntuの場合)

必要なもの3:GitHubアカウント(場合による)

公開リポジトリの場合:

アカウントなしでもクローンできます。

プライベートリポジトリの場合:

GitHubアカウントとアクセス権限が必要です。

GitHubにサインインしておく(推奨)

VSCodeからGitHubにサインインしておくと、クローンがスムーズになります。

手順:

  1. VSCodeを開く
  2. 左下のアカウントアイコンをクリック
  3. 「GitHubでサインイン」を選択
  4. ブラウザが開くので、GitHubにログイン
  5. VSCodeへのアクセスを許可

【方法1】コマンドパレットから簡単クローン(最もおすすめ)

初心者の方に最もおすすめの方法です。マウス操作が中心で分かりやすいです。

ステップ1:クローンしたいリポジトリのURLを取得

GitHubでの操作:

  1. GitHubでクローンしたいリポジトリのページを開く
  2. 緑色の「Code」ボタンをクリック
  3. 「HTTPS」タブが選ばれていることを確認
  4. URLをコピー(クリップボードアイコンをクリック)

URLの例:

https://github.com/ユーザー名/リポジトリ名.git

ステップ2:VSCodeでコマンドパレットを開く

操作:

  • Windowsの場合:Ctrl + Shift + P
  • Macの場合:Command + Shift + P

画面上部に検索ボックスが表示されます。

ステップ3:「Git: Clone」を実行

操作:

  1. コマンドパレットに「git clone」と入力
  2. 「Git: Clone」が表示されたら選択
  3. URLの入力欄が表示される
  4. さきほどコピーしたGitHubのURLを貼り付け
  5. Enterキーを押す

ステップ4:保存場所を選ぶ

操作:

  1. フォルダ選択ダイアログが表示される
  2. リポジトリを保存したい場所を選択
  3. 「リポジトリの場所として選択」をクリック

おすすめの保存場所:

  • Windowsの場合:C:\Users\ユーザー名\Documents\GitHub
  • Macの場合:/Users/ユーザー名/Documents/GitHub

専用のフォルダを作っておくと管理しやすいです。

ステップ5:クローン完了!

画面の変化:

  1. 画面右下に「リポジトリを開きますか?」と表示される
  2. 「開く」をクリック
  3. 新しいウィンドウでリポジトリが開かれる
  4. 左側のエクスプローラーにファイル一覧が表示される

これでクローン完了です!

【方法2】スタート画面から直接クローン

VSCodeを起動した直後の画面からもクローンできます。

手順

VSCodeのスタート画面で:

  1. VSCodeを起動
  2. 「リポジトリのクローン」というボタンをクリック
  3. URLの入力欄が表示される
  4. GitHubのリポジトリURLを貼り付け
  5. Enterキーを押す
  6. 保存場所を選択
  7. リポジトリが開かれる

スタート画面が表示されない場合:

「ファイル」メニュー → 「ウィンドウを閉じる」で全てのウィンドウを閉じると、次回起動時にスタート画面が表示されます。

【方法3】ソース管理パネルからクローン

VSCodeのソース管理機能を使う方法です。

手順

操作:

  1. VSCodeの左側のアクティビティバーから「ソース管理」アイコン(分岐マーク)をクリック
  2. 「リポジトリのクローン」ボタンをクリック
  3. URLを入力またはGitHubから検索
  4. 保存場所を選択

「GitHubから検索」オプション:

GitHubにサインイン済みの場合、自分のリポジトリや、アクセス可能なリポジトリを検索して選択できます。URL入力より便利です。

【応用編】GitHub拡張機能を使った方法

VSCodeの「GitHub Pull Requests and Issues」拡張機能を使うと、さらに便利になります。

拡張機能のインストール

手順:

  1. VSCodeの左側のアクティビティバーから「拡張機能」アイコンをクリック
  2. 検索ボックスに「GitHub Pull Requests」と入力
  3. 「GitHub Pull Requests and Issues」を見つける
  4. 「インストール」をクリック

拡張機能からクローン

手順:

  1. コマンドパレット(Ctrl + Shift + P)を開く
  2. 「GitHub: Clone」と入力して選択
  3. GitHubにサインインしていれば、リポジトリの一覧が表示される
  4. クローンしたいリポジトリを選択
  5. 保存場所を選択

メリット:

URLをコピー&ペーストする必要がなく、リポジトリを視覚的に選べます。

HTTPSとSSH、どちらでクローンすべき?

GitHubのリポジトリをクローンする方法は2種類あります。

HTTPS方式(初心者におすすめ)

特徴:

  • 設定が簡単
  • どの環境でも使える
  • ファイアウォールの影響を受けにくい
  • パスワード入力が必要(または個人アクセストークン)

URL例:

https://github.com/ユーザー名/リポジトリ名.git

こんな人におすすめ:

  • GitHubを始めたばかりの人
  • 複数のパソコンで作業する人
  • とりあえず動かしたい人

SSH方式(上級者向け)

特徴:

  • 設定がやや複雑
  • セキュリティが高い
  • パスワード入力不要(鍵認証)
  • 事前にSSH鍵の設定が必要

URL例:

git@github.com:ユーザー名/リポジトリ名.git

こんな人におすすめ:

  • 頻繁にGitHubを使う人
  • パスワード入力を省略したい人
  • セキュリティを重視する人

初めての方へ:

まずはHTTPSでクローンしましょう。慣れてきたらSSHに切り替えることもできます。

クローン後の基本操作

クローンしたリポジトリで最初にやることを紹介します。

ファイルを確認する

左側のエクスプローラー:

クローンしたプロジェクトのすべてのファイルが表示されます。フォルダやファイルをクリックして、内容を確認しましょう。

README.mdを読む

README.mdとは:

プロジェクトの説明書のようなものです。たいてい以下の情報が書かれています:

  • プロジェクトの概要
  • インストール方法
  • 使い方
  • 必要な環境

まずはREADME.mdを開いて読みましょう。

依存パッケージをインストール

プロジェクトによっては、追加のパッケージが必要です。

Node.jsプロジェクトの場合:

  1. VSCodeのターミナルを開く(Ctrl + ` または表示メニュー → ターミナル)
  2. npm install と入力してEnter

Pythonプロジェクトの場合:

pip install -r requirements.txt

説明:

これらのコマンドで、プロジェクトに必要なライブラリが自動的にインストールされます。

プロジェクトを実行してみる

実行方法:

README.mdに書かれている手順に従ってください。一般的には:

Node.jsの場合:

npm start

Pythonの場合:

python main.py

よくあるエラーと解決方法

クローン時に遭遇しがちなエラーと対処法です。

エラー1:「git: command not found」

原因:

Gitがインストールされていない、またはパスが通っていません。

解決方法:

  1. Gitをインストール(git-scm.com)
  2. VSCodeを再起動
  3. パソコンを再起動(必要な場合)

エラー2:「Repository not found」

原因:

  • URLが間違っている
  • プライベートリポジトリで権限がない
  • リポジトリが削除された

解決方法:

  1. GitHubでURLを再確認
  2. プライベートリポジトリの場合、GitHubにサインイン
  3. リポジトリへのアクセス権限を確認

エラー3:認証エラー(Username/Password)

原因:

GitHubのパスワード認証が廃止されました。個人アクセストークンが必要です。

解決方法:

  1. GitHubの設定で「Personal Access Token」を作成
  2. クローン時、パスワードの代わりにトークンを入力

トークンの作成方法:

  1. GitHubにログイン
  2. 右上のプロフィール → Settings
  3. 左下の「Developer settings」
  4. 「Personal access tokens」 → 「Tokens (classic)」
  5. 「Generate new token」
  6. 必要な権限(repo)を選択
  7. トークンをコピーして保存

エラー4:「fatal: destination path already exists」

原因:

同じ名前のフォルダがすでに存在しています。

解決方法:

  • 既存のフォルダを別の場所に移動
  • 別の名前でクローン
  • 既存のフォルダを削除(内容を確認してから)

エラー5:クローンが途中で止まる

原因:

ネットワークの問題、またはリポジトリが大きすぎます。

解決方法:

  1. ネットワーク接続を確認
  2. もう一度クローンを試す
  3. 「Shallow Clone」を試す(後述)

大きなリポジトリをクローンする時のコツ

サイズの大きなリポジトリは、クローンに時間がかかります。

Shallow Clone(浅いクローン)

説明:

すべての履歴ではなく、最新のコミットだけをクローンする方法です。

VSCodeでの操作:

残念ながらVSCodeのGUI操作ではShallow Cloneはできません。ターミナルを使います。

ターミナルでの操作:

  1. VSCodeのターミナルを開く
  2. クローンしたい場所に移動
cd Documents/GitHub
  1. 以下のコマンドを実行
git clone --depth 1 https://github.com/ユーザー名/リポジトリ名.git

メリット:

  • クローンが速い
  • ディスク容量を節約

デメリット:

  • 過去の履歴が見られない
  • 履歴を使った操作に制限

複数のリポジトリを管理する方法

いくつものプロジェクトをクローンすると、管理が大変になります。

フォルダ構成のおすすめ

Documents/
  └── GitHub/
      ├── 個人プロジェクト/
      │   ├── my-app/
      │   └── my-website/
      ├── 仕事/
      │   ├── company-project/
      │   └── client-project/
      └── 学習用/
          ├── react/
          └── python-tutorial/

用途別にフォルダを分けると管理しやすいです。

VSCodeのワークスペース機能

ワークスペースとは:

複数のフォルダをまとめて開ける機能です。

作り方:

  1. VSCodeで最初のフォルダを開く
  2. 「ファイル」→「ワークスペースにフォルダーを追加」
  3. 追加したいフォルダを選択
  4. 「ファイル」→「名前を付けてワークスペースを保存」

次回からは、保存したワークスペースファイルを開くだけで、すべてのフォルダが開きます。

GitHubのフォークとクローンの違い

よく混同される2つの用語を整理しましょう。

フォーク(Fork)

説明:

GitHub上で、他人のリポジトリを自分のアカウントにコピーすることです。

場所:

GitHub上(クラウド)

用途:

オープンソースプロジェクトに貢献したい時、まずフォークしてから作業します。

クローン(Clone)

説明:

GitHubからローカル(自分のパソコン)にコピーすることです。

場所:

自分のパソコン

用途:

実際にコードを編集したり、実行したりする時に使います。

典型的な流れ

オープンソースに貢献する場合:

  1. GitHubでフォーク(他人のリポジトリを自分のアカウントにコピー)
  2. 自分のリポジトリをクローン(自分のパソコンにダウンロード)
  3. コードを編集
  4. GitHubにプッシュ(アップロード)
  5. プルリクエストを送る

クローン後の便利なVSCode機能

クローンしたリポジトリで使える便利な機能を紹介します。

ソース管理機能

できること:

  • 変更したファイルの一覧表示
  • 変更内容の確認(差分表示)
  • コミット(変更の記録)
  • プッシュ(GitHubへのアップロード)

場所:

左側のアクティビティバーの「ソース管理」アイコン

GitLens拡張機能

説明:

Gitの履歴を見やすく表示してくれる拡張機能です。

インストール:

拡張機能マーケットプレイスで「GitLens」を検索してインストール

できること:

  • 各行の最終編集者と日時を表示
  • コミット履歴の視覚化
  • ブランチの比較

ターミナルの統合

便利なポイント:

VSCode内でターミナルを開けるので、別ウィンドウを開く必要がありません。

開き方:

  • ショートカット:Ctrl +(バッククォート)
  • メニュー:表示 → ターミナル

まとめ:VSCodeでのクローンはとても簡単!

VSCodeでGitHubリポジトリをクローンする方法をまとめます。

最も簡単な方法:

  1. GitHubでリポジトリのURLをコピー
  2. VSCodeでCtrl + Shift + Pを押す
  3. 「Git: Clone」を選択
  4. URLを貼り付けてEnter
  5. 保存場所を選択
  6. 「開く」をクリック

クローン前の準備:

  • VSCodeをインストール
  • Gitをインストール
  • GitHubアカウント(プライベートリポジトリの場合)

3つのクローン方法:

  1. コマンドパレットから(最もおすすめ)
  2. スタート画面から
  3. ソース管理パネルから

HTTPSとSSH:

  • 初心者はHTTPS
  • 慣れたらSSHも検討

クローン後にやること:

  1. README.mdを読む
  2. 依存パッケージをインストール
  3. プロジェクトを実行してみる

よくあるエラー:

  • Gitがインストールされていない → Gitをインストール
  • 認証エラー → 個人アクセストークンを使用
  • リポジトリが見つからない → URLを確認

便利なヒント:

  • プロジェクトごとにフォルダを分ける
  • ワークスペース機能で複数プロジェクトを管理
  • GitLens拡張機能で履歴を見やすく
  • 大きなリポジトリは--depth 1でクローン

初心者の方へのアドバイス:

最初は公開リポジトリで練習してみましょう。GitHubには学習用のリポジトリがたくさんあります。クローンして、コードを読んで、動かしてみる。それだけでも大きな勉強になります。

慣れてきたら、自分でも変更を加えたり、オープンソースプロジェクトに貢献したりできるようになります。

VSCodeとGitHubを使えば、世界中の開発者と一緒にプロジェクトを進められます。最初の一歩として、まずはクローンから始めてみましょう!

エラーが出ても慌てないでください。エラーメッセージを読んで、一つずつ解決していけば必ず動きます。分からないことがあったら、GitHubのドキュメントやコミュニティで質問してみてください。

それでは、楽しいコーディングライフを!

コメント

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