【完全版】GitHubをVSCodeで使う方法｜初心者でも30分でマスターできる実践ガイド

git

「GitHubって難しそう…黒い画面でコマンド打つんでしょ？」 「VSCodeでコード書いてるけど、GitHubとの連携がよく分からない」 「チーム開発に参加したいけど、Git操作が不安…」

大丈夫です！実はVSCodeを使えば、GitHubの操作はボタンクリックだけでできるんです。コマンドを覚える必要はありません。

この記事では、GitHubアカウントの作成から、VSCodeでのプッシュ、プルリクエストまで、実際の画面を想定しながらすべて解説します。

30分後には、あなたもGitHubでコードを管理し、世界中の開発者と協働できるようになりますよ！

スポンサーリンク
  1. そもそもGitHubとVSCodeって何？
    1. GitHubとは
    2. VSCodeとは
    3. なぜVSCode × GitHubが最強なのか
  2. 初期設定：30分で環境構築
    1. Step 1：必要なソフトのインストール
    2. Step 2：GitHubアカウントの作成
    3. Step 3：VSCodeでGitの初期設定
    4. Step 4：VSCodeとGitHubを連携
  3. 基本操作1：リポジトリのクローン（ダウンロード）
    1. 既存のリポジトリをVSCodeで開く
    2. フォルダ構造の理解
  4. 基本操作2：変更をGitHubに保存（add → commit → push）
    1. 3つのステップを理解する
    2. VSCodeでの操作方法
    3. コミットメッセージの書き方
  5. 基本操作3：最新版を取得（pull）
    1. 他の人の変更を取り込む
  6. ブランチ操作：並行開発の基本
    1. ブランチとは？
    2. VSCodeでブランチを作成
    3. ブランチの切り替え
    4. ブランチのマージ
  7. プルリクエスト（PR）の作成と管理
    1. プルリクエストとは？
    2. GitHub Pull Requests拡張機能
  8. 便利な拡張機能10選
    1. 必須の拡張機能
    2. あると便利な拡張機能
  9. よくあるトラブルと解決法
    1. トラブル1：プッシュできない
    2. トラブル2：コンフリクト（競合）発生
    3. トラブル3：間違えてコミットした
    4. トラブル4：.gitignoreが効かない
  10. 実践！初めてのリポジトリ作成
    1. ローカルからGitHubへ
  11. チーム開発のベストプラクティス
    1. ブランチ戦略
    2. コミットルール
    3. コードレビューのマナー
  12. セキュリティの注意点
    1. 絶対にコミットしてはいけないもの
    2. もし間違えてプッシュしたら
  13. よくある質問
    1. Q1：GitとGitHubの違いは？
    2. Q2：PrivateとPublicどっちがいい？
    3. Q3：コミットは英語じゃないとダメ？
    4. Q4：mainとmasterの違いは？
    5. Q5：フォークとクローンの違いは？
  14. まとめ

そもそもGitHubとVSCodeって何？

GitHubとは

GitHub = コードの保管庫 + SNS

簡単に言うと：

  • コードをクラウドに保存できるサービス
  • バージョン管理ができる（過去の状態に戻せる）
  • 他の人と共同開発できる
  • 世界最大の開発者コミュニティ

身近な例え：

  • Google ドライブのプログラマー版
  • でも、ただ保存するだけじゃない
  • 変更履歴が全部残る
  • 複数人で同時編集しても大丈夫

VSCodeとは

Visual Studio Code = 最強の無料エディタ

特徴：

  • Microsoftが作った無料のコードエディタ
  • Git機能が標準搭載
  • 拡張機能で機能追加し放題
  • 軽くて速い

なぜVSCode × GitHubが最強なのか

理由：

  1. GUI操作だけで完結 – コマンド不要
  2. 統合されたUI – 画面切り替え不要
  3. リアルタイム確認 – 変更内容が一目瞭然
  4. 豊富な拡張機能 – さらに便利に

初期設定：30分で環境構築

Step 1：必要なソフトのインストール

1. Git をインストール

Windowsの場合：

  1. https://git-scm.com/ にアクセス
  2. 「Download for Windows」をクリック
  3. インストーラーを実行（基本的にデフォルト設定でOK）

Mac の場合：

# Homebrewがある場合
brew install git

# または Xcode Command Line Tools
xcode-select --install

2. VSCode をインストール

  1. https://code.visualstudio.com/ にアクセス
  2. 「Download」をクリック
  3. インストール実行

Step 2：GitHubアカウントの作成

  1. GitHubにアクセス
    • https://github.com にアクセス
    • 「Sign up」をクリック
  2. アカウント情報を入力
    • Username：英数字で（後で変更可能）
    • Email：普段使うメールアドレス
    • Password：強固なものを
  3. メール認証
    • 届いたメールのリンクをクリック

Step 3：VSCodeでGitの初期設定

VSCodeを開いて設定：

  1. ターミナルを開く
    • VSCodeで `Ctrl + “ （バッククォート）
    • または、メニュー → ターミナル → 新しいターミナル
  2. ユーザー情報を設定 git config --global user.name "あなたの名前" git config --global user.email "your-email@example.com" ※GitHubと同じメールアドレスを使用
  3. 設定確認 git config --list

Step 4：VSCodeとGitHubを連携

GitHub認証の設定：

  1. VSCodeでサインイン
    • 左下のアカウントアイコンをクリック
    • 「GitHubでサインイン」を選択
    • ブラウザが開く → GitHubにログイン
    • 認証を許可
  2. 確認方法
    • 左下にGitHubアカウント名が表示されればOK

基本操作1：リポジトリのクローン（ダウンロード）

既存のリポジトリをVSCodeで開く

方法1：VSCodeから直接クローン

  1. コマンドパレットを開く
    • Ctrl + Shift + P（Mac: Cmd + Shift + P）
    • 「Git: Clone」と入力
  2. リポジトリURLを入力
    • GitHubのリポジトリページでURLをコピー
    • VSCodeに貼り付け
  3. 保存場所を選択
    • 好きなフォルダを選択
    • 自動的にVSCodeで開く

方法2：GitHub から直接開く

  1. GitHubのリポジトリページ
  2. 緑の「Code」ボタン
  3. 「Open with Visual Studio Code」を選択

フォルダ構造の理解

クローン後のフォルダ：

my-project/
├── .git/          ← Gitの管理ファイル（触らない）
├── README.md      ← プロジェクトの説明
├── .gitignore     ← Gitに含めないファイルの設定
└── src/           ← ソースコード

基本操作2：変更をGitHubに保存（add → commit → push）

3つのステップを理解する

Git の基本フロー：

  1. add（ステージング） – 変更をGitに登録する準備
  2. commit（コミット） – 変更を確定して記録
  3. push（プッシュ） – GitHubにアップロード

VSCodeでの操作方法

1. ファイルを編集

  • 普通にコードを書く
  • 保存する（Ctrl + S）

2. ソース管理パネルを開く

  • 左サイドバーの3つ目のアイコン（分岐アイコン）
  • または Ctrl + Shift + G

3. 変更をステージング（add）

  • 変更されたファイルが表示される
  • ファイル名の横の「+」をクリック
  • または、「すべての変更をステージ」をクリック

4. コミット（commit）

  • メッセージ欄に変更内容を入力
  • 例：「ログイン機能を追加」
  • ✓（チェックマーク）をクリック

5. プッシュ（push）

  • 「変更の同期」をクリック
  • または、「…」→「プッシュ」

コミットメッセージの書き方

良い例：

feat: ユーザー認証機能を追加
fix: ログインエラーを修正
docs: READMEを更新
style: コードフォーマットを統一

悪い例：

更新
修正
変更
test

基本操作3：最新版を取得（pull）

他の人の変更を取り込む

プル（pull）が必要な場面：

  • チーム開発で他の人が更新した時
  • 別のPCで作業した後
  • GitHubで直接編集した後

VSCodeでの操作：

  1. ソース管理パネルを開く
    • Ctrl + Shift + G
  2. プルを実行
    • 「…」メニュー → 「プル」
    • または、同期ボタン（🔄）をクリック
  3. 競合が発生した場合
    • VSCodeが自動的に検出
    • マージエディタで解決（後述）

ブランチ操作：並行開発の基本

ブランチとは？

ブランチ = 作業の枝分かれ

例えるなら：

  • main（メイン） = 完成品の本
  • feature（機能） = 下書きノート
  • 下書きで試して、良ければ本に反映

VSCodeでブランチを作成

新しいブランチの作成：

  1. 左下のブランチ名をクリック
    • 現在のブランチが表示されている
  2. 「新しいブランチの作成」を選択
    • ブランチ名を入力
    • 例：feature/login-page
  3. 自動的に切り替わる
    • 左下の表示が新しいブランチ名に

ブランチの切り替え

方法1：ステータスバーから

  • 左下のブランチ名をクリック
  • 切り替えたいブランチを選択

方法2：コマンドパレットから

  • Ctrl + Shift + P
  • 「Git: Checkout to…」
  • ブランチを選択

ブランチのマージ

VSCodeでのマージ：

  1. mainブランチに切り替え
  2. コマンドパレット → 「Git: Merge Branch」
  3. マージしたいブランチを選択
  4. 競合があれば解決

プルリクエスト（PR）の作成と管理

プルリクエストとは？

PR = コードレビューのお願い

  • 「このコードをmainに入れてもいい？」という提案
  • チームメンバーがレビュー
  • OKなら本番に反映

GitHub Pull Requests拡張機能

インストール：

  1. VSCodeの拡張機能タブ
  2. 「GitHub Pull Requests」を検索
  3. インストール

使い方：

  1. PRの作成
    • サイドバーのGitHubアイコン
    • 「Create Pull Request」
    • タイトルと説明を入力
  2. PRのレビュー
    • PR一覧から選択
    • コード差分を確認
    • コメントを追加
  3. マージ
    • レビューOKなら「Merge」
    • ブランチを削除

便利な拡張機能10選

必須の拡張機能

1. GitLens

  • 誰がいつコードを書いたか表示
  • 履歴を詳細に確認
  • Blameビューで責任者が分かる

2. GitHub Pull Requests and Issues

  • VSCode内でPR作成・レビュー
  • Issue管理も可能

3. Git Graph

  • ブランチを視覚的に表示
  • コミット履歴をグラフで確認

あると便利な拡張機能

4. GitHub Copilot

  • AIがコード補完
  • コメントから関数生成

5. Git History

  • ファイルの変更履歴
  • 特定時点のコードを確認

6. GitHub Actions

  • CI/CDの状態確認
  • ワークフロー管理

7. TODO Highlight

  • TODOコメントを強調表示
  • FIXMEも目立つ

8. Markdown All in One

  • README作成が楽に
  • プレビュー機能付き

9. Live Share

  • リアルタイム共同編集
  • ペアプログラミング

10. GitHub Theme

  • GitHubっぽい見た目に
  • ダークモードも完備

よくあるトラブルと解決法

トラブル1：プッシュできない

エラー： rejected

原因と解決：

  1. リモートが更新されている
    • 先にプル（pull）する
    • その後プッシュ
  2. 権限がない
    • リポジトリの権限確認
    • Collaboratorに追加してもらう

トラブル2：コンフリクト（競合）発生

VSCodeでの解決：

  1. 競合ファイルを開く
    • 色付きで表示される
  2. 解決方法を選択
    • 「現在の変更を取り込む」
    • 「入力側の変更を取り込む」
    • 「両方の変更を取り込む」
    • 手動で編集
  3. マークを削除 <<<<<<< HEAD 自分の変更 ======= 他の人の変更 >>>>>>> branch-name
  4. ステージング → コミット

トラブル3：間違えてコミットした

直前のコミットを取り消し：

# コミットを取り消し（ファイルは残る）
git reset --soft HEAD~1

# 完全に取り消し（危険）
git reset --hard HEAD~1

VSCodeでは：

  • ソース管理 → 「…」→ 「最後のコミットを元に戻す」

トラブル4：.gitignoreが効かない

すでに追跡されているファイルの場合：

# キャッシュをクリア
git rm -r --cached .
git add .
git commit -m "gitignoreを適用"

実践！初めてのリポジトリ作成

ローカルからGitHubへ

Step 1：VSCodeで新規プロジェクト

  1. 新しいフォルダを作成
  2. VSCodeで開く

Step 2：Gitリポジトリを初期化

  1. ソース管理パネル
  2. 「リポジトリを初期化」

Step 3：GitHubに公開

  1. ソース管理パネルの「…」
  2. 「GitHubに公開」
  3. リポジトリ名を入力
  4. Public/Privateを選択

Step 4：確認

  • GitHubでリポジトリが作成される
  • 自動的にリモート設定完了

チーム開発のベストプラクティス

ブランチ戦略

Git Flow：

  • main：本番環境
  • develop：開発環境
  • feature/*：機能開発
  • hotfix/*：緊急修正

コミットルール

良いコミットの条件：

  1. 小さく頻繁に – 1機能1コミット
  2. 意味のある単位 – 後で見て分かる
  3. テスト済み – 動くコードのみ
  4. メッセージは明確に – 何を変更したか

コードレビューのマナー

レビュアー：

  • 建設的なコメント
  • 良い点も褒める
  • 代替案を提示

レビュイー：

  • 小さいPRを心がける
  • 説明を充実させる
  • フィードバックに感謝

セキュリティの注意点

絶対にコミットしてはいけないもの

危険なファイル：

  • パスワード
  • APIキー
  • 秘密鍵
  • 個人情報
  • .envファイル

.gitignoreに追加：

# 環境変数
.env
.env.local

# 秘密鍵
*.pem
*.key

# 設定ファイル
config.json
secrets.yml

もし間違えてプッシュしたら

緊急対応：

  1. すぐにAPIキーを無効化
  2. リポジトリをPrivateに
  3. 履歴から完全削除（BFG Repo-Cleaner使用）
  4. 新しいキーを発行

よくある質問

Q1：GitとGitHubの違いは？

A：

  • Git：バージョン管理システム（ツール）
  • GitHub：Gitを使ったWebサービス
  • 例：Git = メールシステム、GitHub = Gmail

Q2：PrivateとPublicどっちがいい？

A：

  • Private：仕事、未完成、秘密のプロジェクト
  • Public：ポートフォリオ、OSS、学習記録
  • 後から変更可能

Q3：コミットは英語じゃないとダメ？

A：

  • チームのルールに従う
  • OSSなら英語推奨
  • 個人なら日本語OK
  • 統一することが大事

Q4：mainとmasterの違いは？

A：

  • 同じ役割（デフォルトブランチ）
  • 2020年からmain推奨
  • 既存のmasterはそのままでOK

Q5：フォークとクローンの違いは？

A：

  • Fork：GitHub上でコピー（自分のリポジトリになる）
  • Clone：ローカルにダウンロード
  • OSSに貢献するならFork→Clone

まとめ

VSCodeとGitHubの組み合わせで、プロのような開発環境が無料で手に入ります！

今日から始める3ステップ：

  1. 環境構築を完了する（30分）
    • Git、VSCode、GitHubアカウント
    • VSCodeとGitHubの連携
  2. 練習用リポジトリを作る（10分）
    • READMEだけでもOK
    • コミット、プッシュを体験
  3. 毎日コミットする（5分）
    • 小さな変更でもOK
    • 習慣化が大事

最初は戸惑うかもしれませんが、1週間も使えば自然に操作できるようになります。

GitHubは開発者の履歴書とも言われます。今日から始めて、あなたの成長記録を残していきましょう！

コマンドを覚える必要はありません。VSCodeのボタンをクリックするだけ。さあ、世界中の開発者の仲間入りです！

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

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