VS Code での Git の概要

ソースコードを簡単に管理し、他のユーザーと共同作業を行いたいですか? Git と GitHub は必要なツールです。Visual Studio Code を使用すると、それらを簡単にセットアップして使用できます。初心者でも、VS Code のユーザーフレンドリーなインターフェースが、コードのプッシュとプル、ブランチの作成とマージ、コード変更のコミットなど、一般的な Git アクションを実行する際にガイドしてくれます。プロフェッショナルなユーザーは、Git コマンドラインを使用するよりも時間と労力を節約できる、エディター内で Git アクションを直接実行できる機能が気に入るでしょう。さらに、VS Code と Git のシームレスなワークフローにより、エディターにとどまりながらより多くの作業をこなすことができます。

VS Code の GitHub Copilot を使用すると、コミットメッセージ、プルリクエストの提案を受けたり、コミットする前にコードの変更を確認したりできます。VS Code での GitHub Copilot の詳細については、こちらをご覧ください。

VS Code での Git のセットアップ

VS Code で Git と GitHub を使用するには、まず、コンピューターに Git がインストールされていることを確認してください。Git が見つからない場合、ソース管理ビューにインストール方法の指示が表示されます。インストール後、VS Code を再起動してください。

さらに、アクティビティバーの右下にあるアカウントメニューから GitHub アカウントで VS Code にサインインすると、設定の同期などの追加機能や、GitHub からのリポジトリのクローン作成や公開が可能になります。

Git リポジトリを開く

VS Code は、ローカルからGitHub Codespacesのようなリモートのクラウドベース環境まで、Git リポジトリで作業を開始するためのいくつかの方法を提供します。

リポジトリをローカルにクローンする

リポジトリをクローンするには、コマンドパレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) でGit: クローンコマンドを実行するか、ソース管理ビューでリポジトリをクローンボタンを選択します。

GitHub からクローンする場合、VS Code は GitHub での認証を求めます。その後、リストからリポジトリを選択して、お使いのコンピューターにクローンします。リストには、公開リポジトリとプライベートリポジトリの両方が含まれています。

他の Git プロバイダーの場合は、リポジトリの URL を入力し、クローンを選択して、ファイルをクローンするローカルマシン上のフォルダーを選択します。リポジトリがローカルマシンにクローンされると、VS Code はそのフォルダーを開きます。

ローカルフォルダーでリポジトリを初期化する

新しいローカル Git リポジトリを初期化するには

1. お使いのコンピューター上の既存または新しいフォルダーを選択し、VS Code で開きます。

2. ソース管理ビューで、リポジトリを初期化ボタンを選択します。

   これにより、現在のフォルダーに新しい Git リポジトリが作成され、コードの変更を追跡できるようになります。

   このアクションは、コマンドラインでgit initを実行するのと同等です。

   

ローカルリポジトリを GitHub に公開する

ローカルリポジトリを初期化し、直接 GitHub に公開することもできます。これにより、GitHub アカウントに新しいリポジトリが作成され、ローカルのコード変更がリモートリポジトリにプッシュされます。ソースコードをリモートリポジトリに置くことは、コードのバックアップ、他のユーザーとの共同作業、GitHub Actions を使用したワークフローの自動化に非常に役立ちます。

ソース管理ビューでGitHub に公開コマンドボタンを使用します。その後、リポジトリの名前と説明、および公開するかプライベートにするかを選択できます。

リポジトリが作成されると、VS Code はローカルコードをリモートリポジトリにプッシュします。これでコードは GitHub にバックアップされ、コミットやプルリクエストを使用して他のユーザーと共同作業を開始できます。

コードスペースで GitHub リポジトリを開く

GitHub Codespaces を使用すると、完全に構成されたクラウドベースの開発環境で GitHub リポジトリを開くことができ、ローカルコンピューターにソフトウェアをインストールすることなくブラウザーで開発できます。GitHub Codespaces は個人向けに無料利用を許可しているため、オープンソースプロジェクトでの作業を簡単に開始できます。

GitHub リポジトリのコードスペースを作成するには

1. VS Code にGitHub Codespaces 拡張機能をインストールし、GitHub アカウントでサインインします。

2. Codespaces: 新しいコードスペースを作成コマンドを実行します。

3. 開きたいリポジトリとブランチを選択します。

   VS Code は、コードスペースに接続された新しいウィンドウを開きます。ソースコード、ターミナル、実行およびデバッグは、リモートのクラウドベース開発環境でホストされます。

   ファイルエクスプローラーとステータスバーが、ワークスペースがコードスペースで開かれていることを示していることに注意してください。

   

または、GitHub Codespaces ウェブサイトのコードスペーステンプレートから開始することもできます。

すでにブラウザーでコードスペースを開いている場合は、ブラウザーでCodespaces: VS Code デスクトップで開くコマンドを実行して、ローカルの VS Code デスクトップからコードスペースに接続します。

ポート転送などのカスタマイズを含む GitHub Codespaces の詳細については、コードスペースでの開発のドキュメントを参照してください。

GitHub リポジトリをリモートで開く

VS Code のリモートリポジトリサポートにより、ローカルコンピューターにクローンすることなく GitHub リポジトリを参照および編集できます。これは、コードベース全体をマシンにクローンすることなく、リモートリポジトリにすばやく変更を加えるのに役立ちます。

1. まず、GitHub リポジトリ拡張機能をインストールします。

2. コマンド リモートリポジトリ: リモートリポジトリを開く... を実行するか、エクスプローラービューのリモートリポジトリを開くボタンを使用します。

3. 開きたい GitHub リポジトリを検索して選択します。

   

コードの変更をステージングしてコミットする

Git リポジトリをセットアップしたら、新しく作成および編集したコードをステージングしてコミットすることで、コードの変更を追跡できます。

アクティビティバーからソース管理ビューにアクセスして、ワークスペース内のすべての変更されたファイルを一覧表示できます。ソース管理ビューヘッダーのツリー/リストアイコンを使用して、ツリービューとリストビューを切り替えることができます。

ソース管理ビューでファイルを選択すると、エディターは差分ビューを表示し、以前にコミットされたファイルと比較してファイル変更を強調表示します。

ファイルをステージングするには、ソース管理ビューでファイルの横にある+ (プラス) アイコンを選択します。これにより、ファイルがステージされた変更セクションに追加され、次のコミットに含まれることが示されます。

また、ソース管理ビューで変更の横にある+ (プラス) アイコンを選択すると、保留中のすべての変更を一度にステージングできます。

ステージされた変更は、ファイルの横にある− (マイナス) アイコンを選択して破棄することもできます。同様に、ソース管理ビューでステージされた変更の横にある− (マイナス) アイコンを選択すると、すべてのステージされた変更を破棄できます。

ステージされた変更をコミットするには、上部のテキストボックスにコミットメッセージを入力し、コミットボタンを選択します。これにより、変更がローカルの Git リポジトリに保存され、必要に応じてコードの以前のバージョンに戻すことができます。

エクスプローラービューの下部にあるタイムラインビューで、すべてのローカルファイルの変更とコミットをナビゲートして確認できます。

リモート変更のプッシュとプル

ローカルの Git リポジトリにコミットをしたら、それらをリモートリポジトリにプッシュできます。変更の同期ボタンは、プッシュおよびプルされるコミットの数を示します。変更の同期ボタンを選択すると、新しいリモートコミットをダウンロード (プル) し、新しいローカルコミットをリモートリポジトリにアップロード (プッシュ) します。

プッシュとプルは、それぞれのコマンドを使用して個別に実行することもできます。これらのコマンドには、ソース管理メニューからアクセスできます。

ブランチの使用

Git では、ブランチを使用すると、コードベースの複数のバージョンで同時に作業できます。これは、メインのコードベースに影響を与えることなく、新機能を試したり、大規模なコード変更を行ったりする場合に役立ちます。

ステータスバーのブランチインジケーターは、現在のブランチを表示し、新規および既存のブランチに切り替えることができます。

新しいブランチを作成するには、ブランチインジケーターを選択し、現在のブランチまたは別のローカルブランチから作成することを選択します。新しいブランチの名前を入力して確認します。VS Code は新しいブランチを作成してそれに切り替え、メインブランチに影響を与えることなくコードに変更を加えることができます。

ローカルブランチを作成した後、ソース管理ビューでブランチを公開を選択して、そのブランチをリモートリポジトリにプッシュできます。これにより、リモートリポジトリに新しいブランチが作成され、そのブランチで他のユーザーと共同作業を行うことができます。

GitHub プルリクエストの作成とレビュー

Git および GitHub では、プルリクエスト (PR) は、共同作業者が個別のブランチからのコード変更をメインブランチにレビューしてマージする方法です。これにより、チームはコード変更をメインのコードベースに組み込む前にレビューおよび承認でき、高品質の変更のみがマージされることが保証されます。

VS Code でプルリクエストを使用するには、GitHub Pull Requests and Issues 拡張機能をインストールする必要があります。この拡張機能は、PR と課題追跡機能を VS Code に追加し、エディター内から PR を作成、レビュー、マージできるようにします。

PR を作成するには、メインブランチとは別のブランチにいることを確認し、コード変更をリモートリポジトリにプッシュします。ソース管理ビューでプルリクエストを作成ボタンを選択します。これにより、PR 作成フォームが開き、PR のタイトルと説明を入力し、変更をマージするブランチを選択できます。作成を選択して PR を作成します。

VS Code の GitHub ドキュメントでプルリクエストの詳細を確認してください。

組み込みターミナルでの Git の使用

すべての Git 状態はローカルリポジトリに保持されるため、VS Code の UI、組み込みターミナル、またはGitHub Desktopのような外部ツール間を簡単に切り替えることができます。また、VS Code をデフォルトの Git エディターとして設定することもでき、VS Code を使用してコミットメッセージやその他の Git 関連ファイルを編集できます。

Windows 上の Git Bash

Git Bash は、Windows 用の人気のあるシェル環境であり、Git やその他のコマンドラインツールを操作するための Unix ライクなコマンドラインインターフェースを提供します。Visual Studio Code の統合ターミナルは、シェルとして Git Bash をサポートしており、Git Bash を開発ワークフローにシームレスに統合できます。Windows マシンに Git をインストールすると、インストール手順で選択解除されていない限り、Git Bash もインストールされます。

まず、表示 > ターミナル (⌃` (Windows、Linux Ctrl+`)) を開きます。ターミナルパネルの+アイコンの横にあるドロップダウン矢印を選択して、新しいシェルを開きます。Git Bash がインストールされている場合、ターミナルとシェルのリストに表示されます。ターミナルサイドバーで、異なるターミナルとシェルを切り替えることができます。Visual Studio Code で Git Bash が構成されている場合、コードエディターのターミナルから直接、お気に入りの Git コマンドすべてを使用できるようになります。

Git Bash をデフォルトシェルとして設定したい場合は、ターミナルドロップダウン (+アイコンの横) を開き、既定のプロファイルを選択を選択します。これにより、Git Bash を含む利用可能なシェルの一覧が開きます。Git Bashを選択すると、それがデフォルトシェルとして設定され、今後のすべてのターミナルが Git Bash で開かれるようになります。より高度なターミナルのヒントは、ターミナルドキュメントで利用できます。