コードをGitHubで管理したいけれど、毎回コマンドラインで操作するのは面倒…。そんな方におすすめなのが Visual Studio Code（VS Code） のGitHub連携です。
VS Codeなら、GitやGitHubの操作をGUIで簡単に行えるので、コミット・プッシュ・プルがとてもラクになります。
この記事では、VS CodeとGitHubを連携する基本的な流れ を、初心者向けにわかりやすく紹介します。この設定を済ませれば、コマンドを覚えなくてもGitHubを使った開発ができるようになります。
VS CodeとGitHub連携のメリット
なぜVS CodeでGitHub連携が便利なのか
GUI操作で簡単
- ボタンクリックでコミット・プッシュができる
- 変更内容を視覚的に確認できる
- コマンドを覚える必要がない
エディタと統合
- コードを書きながらすぐにバージョン管理
- ファイルの変更状況がひと目でわかる
- 競合（コンフリクト）の解決も簡単
チーム開発に最適
- プルリクエストの作成・レビュー
- ブランチの切り替え
- 他の人の変更を取り込む作業
GitHubとは
GitHubは、Gitを使ったソースコード管理サービスです。主な特徴：
- 無料でプライベートリポジトリが作成可能
- 世界中の開発者が利用
- ポートフォリオとしても活用
- チーム開発での標準ツール
事前準備：Gitのインストール
Gitをインストールする理由
VS Codeは内部でGitを使ってリポジトリを管理しています。そのため、まずPCにGit本体がインストールされている必要があります。
Gitのインストール手順
Windows の場合
- Git公式サイトにアクセス
- 「Download for Windows」をクリック
- ダウンロードしたインストーラーを実行
- インストール中の重要な設定：
- 「Git from the command line and also from 3rd-party software」 を選択
- 「Checkout Windows-style, commit Unix-style line endings」 を選択
- 「Use Windows’ default console window」 を選択
macOS の場合
方法1：Homebrewを使用（推奨）
# Homebrewがインストール済みの場合
brew install git
方法2：公式インストーラー
- Git公式サイトからmacOS版をダウンロード
- インストーラーを実行
Linux の場合
# Ubuntu/Debian
sudo apt update
sudo apt install git
# CentOS/RHEL
sudo yum install git
# Fedora
sudo dnf install git
インストール確認
ターミナル（またはコマンドプロンプト）で以下を実行：
git --version
バージョン情報が表示されればインストール成功です：
git version 2.40.0
Gitの初期設定
GitHubと連携する前に、Gitの基本設定を行います：
# ユーザー名を設定（GitHubのユーザー名と同じにする）
git config --global user.name "あなたの名前"
# メールアドレスを設定（GitHubのアカウントと同じにする）
git config --global user.email "your.email@example.com"
# デフォルトブランチ名をmainに設定
git config --global init.defaultBranch main
GitHubアカウントの準備
GitHubアカウントの作成
まだGitHubのアカウントを持っていない場合：
- GitHub公式サイトにアクセス
- 「Sign up」をクリック
- 必要な情報を入力：
- Username：他の人にも見えるので慎重に選ぶ
- Email：普段使うメールアドレス
- Password：強力なパスワードを設定
2段階認証の設定（推奨）
セキュリティ向上のため、2段階認証（2FA）を設定することをおすすめします：
- GitHub右上のプロフィール画像 → 「Settings」
- 左メニューの「Password and authentication」
- 「Enable two-factor authentication」をクリック
- 認証アプリまたはSMSで設定
VS CodeにGitHubアカウントを連携
アカウント連携の手順
基本的な連携方法
- VS Codeを起動
- 左下の「人型アイコン」（アカウント管理）をクリック
- 「アカウントを管理」を選択
- 「GitHub にサインイン」をクリック
認証プロセス
- ブラウザが自動的に開く
- GitHubのログイン画面が表示される
- ユーザー名とパスワードを入力
- 2段階認証を設定している場合は認証コードも入力
- 「Authorize Visual Studio Code」をクリック
- 認証完了後、VS Codeに戻る
連携確認
正常に連携されると：
- 左下の人型アイコンの隣にGitHubアイコンが表示される
- ソース管理パネルでGitHubリポジトリが操作できるようになる
Personal Access Token を使った認証（上級者向け）
2段階認証を有効にしている場合や、より安全な認証を行いたい場合：
トークンの作成
- GitHub → Settings → Developer settings → Personal access tokens
- 「Generate new token」をクリック
- 必要な権限を選択：
repo：プライベートリポジトリへのフルアクセスworkflow：GitHub Actionsの実行write:packages：パッケージの公開
VS Code での設定
Ctrl + Shift + Pでコマンドパレット- 「Git: Clone」を選択
- リポジトリURLを入力
- ユーザー名：GitHubユーザー名
- パスワード：作成したPersonal Access Token
実際にGitHub連携を使ってみよう
既存リポジトリをクローンする
VS Code のソース管理から
- VS Code左のアクティビティバーの「ソース管理」アイコン（分岐マーク）をクリック
- 「リポジトリを複製」をクリック
- 「GitHubから複製」を選択
- 複製したいリポジトリを検索・選択
- ローカルの保存先フォルダを選択
コマンドパレットから
Ctrl + Shift + P（Mac:Cmd + Shift + P）でコマンドパレット- 「Git: Clone」と入力
- リポジトリのURLまたは「Clone from GitHub」を選択
URLを直接指定
# ターミナルでも可能
git clone https://github.com/username/repository-name.git
新しくリポジトリを作成してGitHubにアップロード
ステップ1：ローカルリポジトリの初期化
新しいプロジェクトを始める場合：
- VS Codeで新しいフォルダを開く
- ファイルを作成（例：
README.md、index.htmlなど）
VS Code のGUIで初期化：
- ソース管理パネルを開く
- 「リポジトリを初期化」ボタンをクリック
ターミナルで初期化：
git init
ステップ2：ファイルの追加とコミット
VS Code のGUIでコミット：
- ソース管理パネルで変更されたファイルを確認
- ファイル名の右の「+」ボタンでステージング
- コミットメッセージを入力
- 「✓」ボタンでコミット
実際のコミット例：
初期コミット：プロジェクトセットアップ
- README.mdを追加
- 基本的なプロジェクト構造を作成
ステップ3：GitHubリポジトリの作成
GitHub上での作業：
- GitHub にログイン
- 右上の「+」→「New repository」
- リポジトリ名を入力
- 「Create repository」をクリック
ステップ4：リモートリポジトリの追加とプッシュ
GitHub で表示される指示に従って：
git remote add origin https://github.com/username/repository-name.git
git branch -M main
git push -u origin main
VS Code での簡単プッシュ：
初回設定後は、ソース管理パネルの「⇅」（同期）ボタンでプッシュ・プル可能。
日常的なGit操作をVS Codeで行う
ファイルの変更とコミット
変更の確認
VS Codeでファイルを編集すると：
- エクスプローラーでファイル名の右に「M」（Modified）マーク
- ソース管理パネルに変更されたファイルの一覧
- エディタ左端に変更行を示すマーク
ステージングとコミット
個別ファイルのステージング：
- ソース管理パネルで変更ファイルを確認
- ファイル名右の「+」ボタンをクリック
- 「Changes」から「Staged Changes」に移動
まとめてステージング：
「Changes」セクション右の「+」ボタンですべてステージング
コミットの実行：
- ステージしたファイルを確認
- コミットメッセージを入力（重要：わかりやすく書く）
- 「✓ Commit」ボタンをクリック
良いコミットメッセージの例
機能追加：ユーザー登録機能を実装
- ユーザー登録フォームのHTML追加
- バリデーション機能を実装
- データベース保存処理を追加
プッシュとプル
プッシュ（ローカルの変更をGitHubにアップロード）
- コミット後、ソース管理パネルの「⇅ 同期変更」をクリック
- または「↑」プッシュボタンをクリック
プル（GitHubの変更をローカルに取得）
- ソース管理パネルの「↓」プルボタンをクリック
- または「⇅ 同期変更」で双方向同期
同期の確認
左下のステータスバーで同期状況を確認：
- 「↑1」：1つのコミットがプッシュ待ち
- 「↓2」：2つのコミットがプル待ち
ブランチの操作
ブランチとは
機能開発やバグ修正を並行して進めるための仕組み。メインコード（main）に影響を与えずに作業できます。
新しいブランチの作成
VS Code での操作：
- 左下のブランチ名（例：「main」）をクリック
- 「新しいブランチを作成」を選択
- ブランチ名を入力（例：「feature/user-login」）
コマンドでの操作：
# 新しいブランチを作成して切り替え
git checkout -b feature/user-login
# またはgit switch（新しいコマンド）
git switch -c feature/user-login
ブランチの切り替え
- 左下のブランチ名をクリック
- 切り替えたいブランチを選択
ブランチをGitHubにプッシュ
# 初回プッシュ時
git push -u origin feature/user-login
# 以降は通常のプッシュ
git push
よくあるトラブルと対処法
認証に関するトラブル
「認証に失敗しました」と表示される
症状：
- プッシュ・プル時に認証エラー
- 「Authentication failed」メッセージ
対処法1：VS Code のアカウント再連携
- 左下の人型アイコン → 「アカウントの管理」
- GitHubアカウントをサインアウト
- 再度サインイン
対処法2：資格情報の削除
Windows の場合：
- 「資格情報マネージャー」を開く
- 「Windows 資格情報」→「汎用資格情報」
- GitHub関連の資格情報を削除
- VS Code で再認証
macOS の場合：
# キーチェーンから削除
git config --global --unset credential.helper
2段階認証でエラーが出る
Personal Access Token を使用：
- GitHub → Settings → Developer settings → Personal access tokens
- 「Generate new token」
- 必要な権限を選択
- 生成されたトークンをパスワード代わりに使用
Git操作に関するトラブル
「リポジトリが見つかりません」エラー
症状：
fatal: repository 'https://github.com/username/repo.git' not found
対処法：
- リポジトリURLが正しいか確認
- プライベートリポジトリの場合、アクセス権限を確認
- GitHubアカウントが正しく連携されているか確認
競合（コンフリクト）が発生した場合
症状： 同じファイルの同じ箇所を複数人が編集した場合に発生
VS Code での解決方法：
- 競合したファイルを開く
- VS Code が競合箇所をハイライト表示
- 「Accept Current Change」「Accept Incoming Change」などのボタンで選択
- 手動で調整が必要な場合は直接編集
- 競合解決後、コミット
競合マーカーの例：
<<<<<<< HEAD
print("現在のブランチの変更")
=======
print("取り込もうとしている変更")
>>>>>>> feature/new-function
プッシュが拒否される場合
症状：
! [rejected] main -> main (non-fast-forward)
対処法：
- まずプル（
git pull）で最新の変更を取得 - 競合があれば解決
- 再度プッシュ
ファイル管理に関するトラブル
.gitignore の設定
目的： GitHubにアップロードしたくないファイル（ログファイル、設定ファイルなど）を除外
基本的な .gitignore の例：
# OS generated files
.DS_Store
Thumbs.db
# Editor files
.vscode/
.idea/
# Language specific
node_modules/
__pycache__/
*.pyc
*.log
# Environment files
.env
.env.local
# Build outputs
dist/
build/
*.min.js
大きなファイルのアップロードエラー
症状：
remote: error: File too large
対処法：
- Git LFS（Large File Storage）を使用
- または該当ファイルを .gitignore に追加
# Git LFS の使用例
git lfs track "*.zip"
git add .gitattributes
さらに便利な機能
GitHub拡張機能の活用
GitHub Pull Requests and Issues
インストール方法：
- 拡張機能タブで「GitHub Pull Requests」を検索
- Microsoft公式の拡張機能をインストール
主な機能：
- VS Code内でプルリクエストの作成・レビュー
- イシューの管理
- コードレビューの実行
GitLens
機能：
- 各行の最後の変更者と変更日時を表示
- コミット履歴の可視化
- ブレームビュー（誰がどの行を変更したか）
VS Code内でのプルリクエスト作成
基本的な手順
- feature ブランチで作業完了
- GitHub Pull Requests 拡張機能を使用
- 「Create Pull Request」をクリック
- タイトルと説明を入力
- レビュアーを指定
- 「Create」で作成
プルリクエストのテンプレート
## 変更内容
- ユーザー登録機能を追加
- バリデーション機能を実装
## テスト内容
- ユニットテストを追加
- 手動テストを実施
## スクリーンショット
（必要に応じて画像を添付）
## チェックリスト
- [ ] コードレビューを受けた
- [ ] テストが通ることを確認
- [ ] ドキュメントを更新
効率的なワークフロー
Git Flow の実践
main（本番環境）
├── develop（開発環境）
├── feature/user-login（機能開発）
├── feature/payment（機能開発）
└── hotfix/critical-bug（緊急修正）
日常的な作業の流れ
- 朝の作業開始時：
git pull origin main # 最新の変更を取得 - 機能開発開始時：
git checkout -b feature/new-feature - 作業中：
- 定期的にコミット
- わかりやすいコミットメッセージ
- 作業完了時：
git push origin feature/new-feature # プルリクエストを作成
まとめ
VS CodeとGitHubを連携することで、開発効率が大幅に向上します。重要なポイントをまとめると：
初期設定
- Git のインストールとユーザー設定
- GitHubアカウントの作成と2段階認証
- VS Code でのアカウント連携
基本操作
- クローン：
Git: Cloneでリポジトリを複製 - コミット：ソース管理パネルでGUI操作
- プッシュ・プル：同期ボタンで簡単操作
便利機能
- ブランチ操作で並行開発
- VS Code内でのプルリクエスト作成・レビュー
- 拡張機能でさらに高機能化
トラブル対策
- 認証エラーは再連携で解決
- 競合はVS Codeの支援機能で解決
- .gitignore で不要ファイルを除外
コメント