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: 新しいCodespaceを作成コマンドを実行します。

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

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

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

   

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

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

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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

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

ブランチの使用

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

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

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

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

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

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

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で開かれます。より高度なターミナルのヒントは、ターミナルドキュメントで利用可能です。