【GitHub入門③Windows編】VSCodeからアップロードする3つの方法

GitHubアカウントの作成とGitのインストールが完了したら、いよいよ実際にプロジェクトをアップロードしましょう。この記事では、Gitコマンドを使った基本的なアップロード方法を解説します。

目次

準備:アップロードするプロジェクトを用意

既存のプロジェクトがある場合(おすすめ)

すでにAIやVSCodeで作成したプロジェクトがある場合は、そのフォルダをそのまま使えます。まず、プロジェクトフォルダの場所を確認しましょう。

VSCodeでフォルダの場所を確認する方法

  1. VSCodeでプロジェクトフォルダを開く
  2. メニューの「表示」→「ターミナル」をクリック
  3. ターミナルで以下のコマンドを実行
pwd

これで現在のフォルダパスが表示されます。例:

/c/Users/YourName/Documents/my-project

サンプルプロジェクトを作成する場合

プロジェクトがまだない場合は、簡単なHTMLファイルを作成して練習しましょう。

新しいフォルダ(例:my-first-project)を作成し、VSCodeで開きます。その中にindex.htmlを作成:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>初めてのGitHubプロジェクト</title>
</head>
<body>
    <h1>Hello, GitHub!</h1>
    <p>これは私の最初のGitHubプロジェクトです。</p>
</body>
</html>

GitHubにリポジトリを作成

GitHubにログインして、新しいリポジトリを作成します:

  1. GitHubのホーム画面で「New」ボタン(緑色)をクリック
  2. リポジトリ名を入力(例:my-first-project)
  3. 「Public」を選択(無料プランの場合)
  4. 「Add a README file」のチェックは外す(重要)
  5. 「Create repository」をクリック

作成後、リポジトリのURLが表示されます。例:

https://github.com/your-username/my-first-project.git

このURLをコピーして保存しておいてください。後で使います。

Git Bashでプロジェクトフォルダに移動

ターミナルを開く

Windowsのスタートメニューから「Git Bash」を検索して起動します。

プロジェクトフォルダに移動する(重要)

プロジェクトフォルダに移動するには、cdコマンドを使います。

方法1:パスを直接入力

cd /c/Users/YourName/Documents/my-first-project

方法2:ドラッグ&ドロップ(超便利)

  1. Git Bashで cd と入力(最後にスペースを入れる)
  2. WindowsエクスプローラーからプロジェクトフォルダをGit Bashにドラッグ&ドロップ
  3. パスが自動で入力されるので、Enterキーを押す

現在地を確認するには:

pwd

プロジェクトフォルダのパスが表示されればOKです。

Gitコマンドでアップロード

ステップ1:Gitリポジトリを初期化

プロジェクトフォルダをGitリポジトリにします:

git init

「Initialized empty Git repository」と表示されればOKです。

ステップ2:ファイルをステージング

すべてのファイルをGitの管理下に追加します:

git add .

.(ドット)は「現在のフォルダ内のすべてのファイル」という意味です。

ステップ3:コミットする

変更を記録します:

git commit -m "初回コミット"

-mの後の「初回コミット」は、変更内容のメモです。好きなメッセージに変更できます。

ステップ4:リモートリポジトリを追加

GitHubで作成したリポジトリと連携します:

git remote add origin https://github.com/your-username/my-first-project.git

重要your-usernamemy-first-projectは、先ほどコピーしたURLに置き換えてください。

ステップ5:ブランチ名を変更

デフォルトブランチをmainに設定します:

git branch -M main

ステップ6:GitHubにプッシュ

いよいよGitHubにアップロードします:

git push -u origin main

初回実行時、ブラウザが自動で開き、GitHubへのログインを求められます。ログインして認証を許可してください。

「Enumerating objects」などのメッセージが表示され、最後に「branch ‘main’ set up to track ‘origin/main’」と表示されれば成功です!

アップロード完了を確認

GitHubのリポジトリページをリロードすると、ファイルがアップロードされているのが確認できます。

2回目以降の変更をアップロード

ファイルを編集したら、以下の3ステップで再度アップロードできます:

# 1. 変更をステージング
git add .

# 2. コミット
git commit -m "〇〇を修正"

# 3. プッシュ
git push

初回設定が完了していれば、この3つのコマンドだけでアップロードできます。

よくあるエラーと解決法

エラー1:「fatal: remote origin already exists」

すでにリモートリポジトリが設定されています。以下で確認・削除できます:

# 現在のリモートを確認
git remote -v

# リモートを削除
git remote remove origin

# 再度追加
git remote add origin https://github.com/your-username/my-first-project.git

エラー2:「Updates were rejected」

リモートに新しい変更があります。まず最新版を取得してから、再度プッシュします:

git pull origin main --rebase
git push

エラー3:「fatal: not a git repository」

Gitリポジトリが初期化されていないフォルダでコマンドを実行しています。git initを実行してください。

.gitignoreファイルの作成(重要)

プロジェクトには、GitHubにアップロードしたくないファイルがあります(パスワード、APIキー、一時ファイルなど)。.gitignoreファイルを作成して、除外するファイルを指定しましょう。

.gitignoreの作成

プロジェクトのルートに.gitignoreファイルを作成します:

# 環境変数ファイル
.env

# Node.jsの依存関係
node_modules/

# Pythonのキャッシュ
__pycache__/
*.pyc

# OSの自動生成ファイル
.DS_Store
Thumbs.db

# エディタの設定ファイル
.vscode/
.idea/

このファイルをコミットしておけば、指定したファイルは自動的に除外されます。

次のステップ:さらに学ぶ

基本的なアップロードができるようになったら、次は以下のトピックに挑戦してみましょう:

  • ブランチの使い方:機能ごとに開発を分ける
  • プルリクエスト:チームでコードレビューを行う
  • コンフリクト解決:複数人での開発時の衝突を解決
  • GitHub Actions:自動テスト・自動デプロイを設定

Macをお使いの方はこちら

あわせて読みたい
【GitHub入門③Mac編】VSCodeからアップロードする3つの方法 GitHubアカウントの作成とGitのインストールが完了したら、いよいよ実際にプロジェクトをアップロードしましょう。この記事では、Gitコマンドを使った基本的なアップロ...

まとめ

Gitコマンドでプロジェクトをアップロードする手順は以下の通りです:

  1. GitHubでリポジトリを作成
  2. Git Bashでプロジェクトフォルダに移動(cdまたはドラッグ&ドロップ)
  3. git initでリポジトリを初期化
  4. git add .でファイルをステージング
  5. git commit -m "メッセージ"でコミット
  6. git remote add origin [URL]でリモート追加
  7. git push -u origin mainでアップロード

2回目以降はgit add .git commit -m "メッセージ"git pushの3ステップだけでOKです。

これで、あなたのプロジェクトは世界中に公開されます。GitHubを活用して、どんどんコードを公開していきましょう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次