「Visual Studio Code」で「Git」「GitHub」をはじめよう!「拡張機能」で簡単リポジトリ操作

はじめに

これまでの連載では、GitやGitHubの基本操作について、コマンドラインを中心に解説してきました。しかし、日々の業務やチーム開発の現場では、必ずしもすべての操作をコマンドで行う必要はありません。実際には「Visual Studio Code」(以下、VS Code)のような統合開発環境(IDE)を活用し、視覚的な操作で効率的にリポジトリを扱うケースが増えています。

VS Codeには、Git機能が標準で組み込まれており、さらに拡張機能を追加することでGitHubとの連携やプルリクエストの管理、ブランチ操作などもGUIベースでスムーズに行うことができます。コマンドを正確に覚えていなくても、ボタン操作だけで多くの作業を完結できるのは大きな利点です。

本記事では、VS Codeの拡張機能を活用しながら、GitとGitHubの基本的な操作をGUIで実践する方法を紹介します。ターミナル操作に自信がない方でも、手元で再現しながら進められる内容になっているので、ぜひ一緒に試してみてください。

前回までのおさらい

本記事では、GitやGitHubの基本的な知識とVS Codeの初期設定が済んでいることを前提に、拡張機能を活用したGUIでの操作方法を解説します。

GitHubでのリポジトリ作成手順については第2回で、またチーム開発を想定したブランチの考え方については第4回でそれぞれ詳しく取り上げています。さらに、VS Code自体のインストールや拡張機能の導入手順などは第5回で解説しているので、必要に応じてそちらも併せてご確認ください。

今回は、それらの内容を踏まえたうえで、VS Code上でGit/GitHubの操作をGUIベースで行うための実践的な使い方に焦点を当てて進めていきます。

拡張機能のインストール

VS CodeにはGitに関する基本的な機能が標準で備わっていますが、GitHub上でのプルリクエストやIssueの操作をよりスムーズに行うためには、「GitHub Pull Requests」拡張機能の導入がオススメです。

この拡張機能を使うことで、VS Code上でGitHubリポジトリと連携し、プルリクエストの作成やレビュー、Issueの参照・リンク付けといった操作が可能になります。

インストール手順

1. VS Code左側のアクティビティバーから「拡張機能」ビュー(4つの小さな四角形アイコン)を開く
2. 検索欄に「GitHub Pull Requests」と入力する
3. 一覧に表示される「GitHub Pull Requests」拡張機能を選択し「インストール」をクリックする

補足
この拡張機能は、以前は「GitHub Pull Requests and Issues」という名称で提供されていましたが、現在は「GitHub Pull Requests」に名称が変更されています。機能自体も継続的にアップデートされており、プレビュー版として大きく変更が行われているようです。これまで使えていた主要機能は引き続き利用可能なので現時点で提供されている機能を中心に解説します。

拡張機能がインストールされるとVS Codeのサイドバーに専用ビューが追加され、GitHub上のプルリクエストやIssueに関する操作が行えるようになります。

次のセクションでは、この拡張機能を活用して、実際にGitHubリポジトリを操作していきましょう。

VS CodeでのGit基本ワークフロー

Git/GitHubの基本的なワークフローを通して、VS Code上での操作方法を学んでいきましょう。

リポジトリのクローン

1. 最初に、GitHub上のリポジトリをローカルにクローンして作業を始めましょう。VS Codeのコマンドパレット([Ctrl]キー＋[Shift]キー[P]キー)を開き「git clone」と入力してコマンドを選択します。
   
2. 続いて、対象のリポジトリURLを貼り付けて[Enter]キーを押すと、保存先のフォルダーを指定する画面が表示されます。クローンが完了すると「このリポジトリを開きますか」と確認されるので、「Open」を選択すると作業環境の準備が整います。
   
   コマンドで同じような操作をする場合は、以下のような手順になります。

   # クローンしたいディレクトリに移動
   cd ~/workspace
   
   # GitHubリポジトリをクローン
   git clone https://github.com/VirtualTech-DevOps/sample-20250502.git
   
   # クローンしたリポジトリに移動
   cd sample-20250502

ファイルの編集

1. ファイルを編集すると、その変更が「変更」欄に追加され、どのファイルが変更されたかがひと目で分かります。
   

   # コマンドラインでの変更確認
   git status

2. 変更されたファイルをクリックすると、左右に分かれた差分ビュー(Diff View)が表示されます。
   

   # 変更されたファイルの差分を確認
   git diff

3. 変更した内容をステージングエリアに追加するには、変更されたファイル上にカーソルを合わせて「+」アイコンをクリックします。これで変更がステージングエリアに追加されます。
   

   # コマンドラインでのステージング
   git add README.md

コミットの作成

コミットメッセージを入力し、「コミット」を選択すると、コミットが作成されます。

# コマンドラインでのコミット
git commit -m "Update README" README.md

コミットが完了し、下のセクションにある「コミット履歴ビュー」を確認すると、先ほど追加したコミットが表示されます。

リモートリポジトリへのプッシュ

ローカルの変更をリモートリポジトリにプッシュするには「変更の同期」ボタンをクリックします。これにより、ローカルの変更がリモートリポジトリに反映されます。

GitHub上でリポジトリを開くと、プッシュした内容が反映されていることが確認できます。

ブランチの作成とプルリクエストの作成

次に、ブランチを作成して新しい機能を追加し、その変更をプルリクエストとしてGitHubに提出する流れを見ていきましょう。

ブランチの作成

コマンドパレットを開き「create branch」を選択します。新しいブランチの名前を入力して[Enter]キーを押すとブランチが作成されます。

# コマンドラインでのブランチ作成
git switch -c feature/new-feature

プルリクエストの作成

ここから、冒頭で説明した「GitHub Pull Requests」拡張機能を活用して、プルリクエストを作成します。今回作成したブランチに切り替えたら、ファイルの変更からリモートリポジトリにプッシュするところまでを済ませておいてください。

変更をプッシュしたら、コマンドパレットを開き「create pull request」を選択します。これでプルリクエストの作成画面が表示されます。

左横にプルリクエストを作成するための情報を入力します。タイトルと説明を記入し、最後に「Create」ボタンをクリックするとプルリクエストが作成されます。

VS Code上でプルリクエストの画面が表示されます。GitHub上でも同じ内容が確認できます。

その他の機能

ここでは具体的な操作手順は省略しますが、基本的なワークフローで使用する機能以外にも、様々な機能をGUIで操作できます。以下にいくつか紹介します。

• スタッシュ:
  作業中の変更を一時的に保存し、あとで復元できる。これにより、別のブランチへ切り替える前でも未コミットの変更を保持しておける
• コミットの修正:
  直前のコミットを修正したり、メッセージを変更したりできる。これにより、誤ったコミットメッセージを修正できる
• リモートリポジトリの管理:
  リモートリポジトリの追加や削除、フェッチ、プルなどの操作がGUIで行える
• タグの作成:
  特定のコミットにタグを付けてバージョン管理ができる。これにより、特定のリリースやマイルストーンを簡単に参照できる

おわりに

VS Codeの「GitHub Pull Requests」拡張機能を活用することで、GitやGitHubの操作がより直感的に行えるようになります。コマンドラインでの操作に不安がある方でも、GUIを使うことでスムーズに作業を進められるでしょう。

本記事では基本的な操作を中心に解説しましたが、VS Codeにはさらに多くの機能が備わっています。ぜひ自分の開発スタイルに合わせて、様々な機能を試してみてください。

また、VS Codeは拡張機能が豊富でGitHub以外のサービスとも連携できるため、開発環境を自分好みにカスタマイズが可能です。興味のある方は、他の拡張機能も試してみてください。