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 にバックアップされ、コミットとプルリクエストで他のユーザーと共同作業を開始できます。

codespace で GitHub リポジトリを開く

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

GitHub リポジトリの codespace を作成するには

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

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

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

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

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

   

または、GitHub Codespaces Web サイトの codespace テンプレートから開始することもできます。

ブラウザーで既に codespace を開いている場合は、ブラウザーでCodespaces: VS Code Desktop で開くコマンドを実行して、ローカルの VS Code Desktop から codespace に接続します。

ポート転送などのカスタマイズを含む GitHub Codespaces の詳細については、codespace での開発ドキュメントで学習できます。

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

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

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

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

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

   

コード変更のステージングとコミット

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

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

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

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

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

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

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

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

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

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

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

ブランチの使用

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

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

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

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

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

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

VS Code でプルリクエストを使用するには、GitHub Pull Requests and Issues拡張機能をインストールする必要があります。この拡張機能は、PR および Issue 追跡機能を 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 で開かれます。より高度なターミナルのヒントは、ターミナルドキュメントで利用できます。