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 デスクトップで開く コマンドを実行して、ローカル VS Code デスクトップから 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 とイシュー追跡機能を 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 で開かれます。 より高度なターミナルのヒントは、ターミナルドキュメントで入手できます。