📝 はじめに
この記事では、開発に必須のGitHubと人気エディタVS Codeを連携させる方法を解説します。
まず、Git・GitHubを使う上で欠かせない基本的な用語を解説し、その上でVS Codeを用いた具体的な操作手順を紹介します。
この記事の対象者
- GitやGitHubの用語の意味が曖昧な方
- GitHubアカウントは持っているが、VS Codeからの操作方法がわからない方
- ターミナル操作を避け、VS Codeでバージョン管理を完結させたい方
💡 1. Git/GitHubの基本用語を理解する
GitとGitHubで使われる重要な用語を理解しておきましょう。
| 用語 | 読み方 | 意味 |
|---|---|---|
| リポジトリ | Repository | プロジェクトのファイルと、その全ての変更履歴を保存する場所（倉庫）。 ローカルPC上のものをローカルリポジトリ、GitHub上のものをリモートリポジトリと呼びます。 |
| コミット | Commit | ファイルの変更を履歴として記録・確定する作業。いわば「セーブ」です。 |
| ステージング | Staging | 変更したファイルをコミット対象として一時的に準備する作業。コミットする変更を選ぶために使います。 |
| ブランチ | Branch | 開発を並行して行うための作業の分岐。メインの開発（通常はmainなど）に影響を与えずに新機能開発などを行うときに使います。 |
| プッシュ | Push | ローカルリポジトリでコミットした履歴を、リモートリポジトリ（GitHub）に送り出す作業。 |
| プル | Pull | リモートリポジトリ（GitHub）の最新の変更履歴を、ローカルリポジトリに取り込む作業。 |
| フェッチ | Fetch | リモートリポジトリの最新情報をローカルに取得するが、ローカルの作業ファイルは更新しない作業。Pullと違い、ローカルの変更に影響を与えません。 |
| マージ | Merge | 分岐したブランチの変更内容を、別のブランチに合流させる作業。 |
| プルリクエスト / マージリクエスト | Pull Request (PR) / Merge Request (MR) | ブランチのマージを提案し、レビューを依頼するための機能。（PRはGitHub、MRはGitLabなどで使われる用語です。） |
💻 2. 事前準備
2-1. 必要なもの（インストール・アカウント作成）
- VS Code（高機能なコードエディタ）：Visual Studio Code公式からダウンロード
- Git（バージョン管理システム）：Git公式サイトからダウンロード
- GitHubアカウント（リモートリポジトリ）：GitHub公式サイトでアカウント作成
2-2. VS CodeとGitHubの連携（初期設定）
- VS Codeの**「ソース管理」**ビュー（三つ又のアイコン）を開きます。
- 初回利用時、「GitHubへのサインイン」が求められたら、指示に従って認証を完了させます。
⚙️ 3. VS Codeで実践する開発ワークフロー
3-1. リポジトリのクローン
既存のGitHubリポジトリをローカルPCにコピーする（クローン）操作をVS Codeで行います。
- コマンドパレット (
Ctrl+Shift+PまたはCmd+Shift+P) を開きます。 - 「Git: Clone」と入力し、選択。
- クローンしたいGitHubリポジトリのURLを入力（またはGitHubから選択）。
- ファイルを保存するローカルフォルダを選択。
- クローン完了。
3-2. ステージングとコミット（変更内容をローカルリポジトリに反映）
ファイルの変更は、VS Codeの「ソース管理」タブで管理します。
（今回はREADME.mdの変更があったと仮定します。）
-
ステージング: 変更ファイルの横にある「＋」ボタンをクリックし、ステージングします。
※ステージングする際に変更箇所を確認すること
-
コミット: 上部にあるテキストボックスにコミットメッセージを入力し、チェックマークのコミットボタンを押して履歴を記録（コミット）します。
※「コミットしてプッシュ」でローカルリポジトリに変更内容を反映＆リモートリポジトリにローカルリポジトリの変更内容の反映を一括で行うことも可能。
3-3. GitHubへの反映（PushとPull）
| 操作 | 目的 | VS Codeでの操作 |
|---|---|---|
| Push (送り出す) | ローカルのコミットをGitHubにアップロード | ソース管理ビューの「プッシュ」ボタン、または画面右下の雲のアイコン（⬆️）をクリック。 |
| Pull (取り込む) | GitHubの最新の変更をローカルに取り込む | ソース管理ビューの「プル」ボタン、または画面右下の同期アイコン（🔄）をクリック。 |
🤝 4. 共同開発への応用（ブランチとマージ）
4-1. ブランチの作成と切り替え
画面下部のステータスバー（通常はmainと表示されている箇所）をクリックすると、ブランチの作成や切り替えが簡単に行えます。
4-2. プルリクエストとマージ (Pull Request)
開発が完了したら、メインブランチへ合流（マージ）するために**Pull Request (PR)**を作成します。
- VS Codeの拡張機能（例：GitHub Pull Requests and Issues）などを使ってPRを作成します。
- PRがレビューされ、承認されると、変更がメインブランチに**合流（マージ）**されます。
✨ まとめ
Gitの基本用語を理解し、VS Codeのソース管理ビューを使うことで、Gitコマンドを覚えることなく、GitHubを活用した効率的な開発が行えます。
まずはこの記事を参考に、クローン → コミット → プッシュ の一連の流れをVS Codeでマスターしましょう！