VS Code で GitHub を操作する

GitHubは、ソースコードを保存および共有するためのクラウドベースのサービスです。Visual Studio CodeでGitHubを使用すると、エディター内で直接ソースコードを共有し、他のユーザーと共同作業できます。GitHubとやり取りする方法は多数あり、たとえばhttps://github.comのWebサイトや、Gitコマンドラインインターフェイス (CLI) を介する方法などがあります。しかし、VS Codeでは、リッチなGitHub統合はGitHub Pull Requests and Issues拡張機能によって提供されます。

GitHub Pull Requests and Issues拡張機能をインストールする

VS Code で GitHub の使用を開始するには、Git をインストールし、GitHub アカウントを作成し、GitHub Pull Requests and Issues 拡張機能をインストールする必要があります。このトピックでは、VS Code を離れることなく、GitHub のお気に入りの機能の一部を使用する方法を説明します。

ソース管理を初めて使用する場合、または VS Code の基本的な Git サポートについてさらに学習したい場合は、ソース管理のトピックから始めることができます。

GitHub Pull RequestsおよびIssuesの使用を開始する

GitHub Pull Requests and Issues 拡張機能をインストールしたら、サインインする必要があります。プロンプトに従ってブラウザーで GitHub を認証し、VS Code に戻ります。

VS Code にリダイレクトされない場合は、承認トークンを手動で追加できます。ブラウザーウィンドウに承認トークンが表示されます。トークンをコピーして VS Code に戻ります。ステータスバーで**github.com にサインインしています...** を選択し、トークンを貼り付けてEnter を押します。

リポジトリのセットアップ

リポジトリのクローン

コマンドパレット (⇧⌘P (Windows、Linux では Ctrl+Shift+P)) の**Git: Clone** コマンドを使用するか、ソース管理ビューの**リポジトリのクローン**ボタン (フォルダーが開いていない場合に利用可能) を使用して、GitHub からリポジトリを検索してクローンできます。

GitHub リポジトリのドロップダウンから、ローカルにクローンしたいリポジトリをフィルターして選択できます。

既存のリポジトリで認証する

GitHub を介した認証の有効化は、メンバーであるリポジトリへのプッシュやプライベートリポジリのクローンなど、GitHub 認証を必要とする Git アクションを VS Code で実行するときに行われます。認証のために特別な拡張機能をインストールする必要はありません。これは VS Code に組み込まれており、リポジトリを効率的に管理できます。

GitHub 認証を必要とする操作を行うと、サインインを促すプロンプトが表示されます。

GitHub にサインインし、VS Code に戻る手順に従ってください。個人アクセストークン (PAT) によるサインインは、GitHub Enterprise Server でのみサポートされています。GitHub Enterprise Server を使用していて PAT を使用したい場合は、PAT のプロンプトが表示されるまでサインインプロンプトを「キャンセル」できます。

GitHub に認証する方法は、ユーザー名とパスワードを二要素認証 (2FA) と共に使用する方法、個人アクセストークン、または SSH キーを使用する方法など、いくつかあります。各オプションの詳細については、「GitHub への認証について」を参照してください。

注: リポジトリの内容をローカルマシンにクローンせずに作業したい場合は、GitHub Repositories 拡張機能をインストールして、GitHub で直接閲覧および編集できます。詳細については、以下の「GitHub Repositories 拡張機能」セクションで確認できます。

エディター統合

ホバー

リポジトリが開いていて、ユーザーが@メンションされた場合、そのユーザー名にマウスを合わせると、GitHub スタイルのホバーが表示されます。

#メンションされた issue 番号、完全な GitHub issue URL、およびリポジトリ指定の issue に対しても同様のホバーがあります。

提案

ユーザー提案は「@」文字でトリガーされ、issue 提案は「#」文字でトリガーされます。提案はエディターと**ソース管理**ビューの入力ボックスで利用できます。

提案に表示される issue は、**GitHub Issues: Queries** (githubIssues.queries) 設定で構成できます。クエリはGitHub の検索構文を使用します。

また、**GitHub Issues: Ignore Completion Trigger** (githubIssues.ignoreCompletionTrigger) および **GitHub Issues: Ignore User Completion Trigger** (githubIssues.ignoreUserCompletionTrigger) の設定を使用して、これらの提案を表示するファイルを構成できます。これらの設定は、ファイルの種類を指定するための言語識別子の配列を受け入れます。

// Languages that the '#' character should not be used to trigger issue completion suggestions.
"githubIssues.ignoreCompletionTrigger": [
  "python"
]

プルリクエスト

**Pull Requests** ビューから、プルリクエストを表示、管理、作成できます。

プルリクエストを表示するために使用されるクエリは、**GitHub Pull Requests: Queries** (githubPullRequests.queries) 設定で構成でき、GitHub の検索構文を使用します。

"githubPullRequests.queries": [
    {
        "label": "Assigned To Me",
        "query": "is:open assignee:${user}"
    },

プルリクエストの作成

フォークまたはブランチに変更をコミットしたら、**GitHub Pull Requests: Create Pull Request** コマンドまたは**Pull Requests** ビューの**Create Pull Request** ボタンを使用してプルリクエストを作成できます。

新しい**作成**ビューが表示され、プルリクエストのターゲットとするベースリポジトリとベースブランチを選択したり、タイトルと説明を入力したりできます。リポジトリにプルリクエストテンプレートがある場合、それが自動的に説明に使用されます。

上部のアクションバーにあるボタンを使用して、**担当者**、**レビュー担当者**、**ラベル**、および**マイルストーン**を追加します。

**作成**ボタンメニューでは、**ドラフトの作成**や**自動マージ**方法の有効化など、代替の作成オプションを選択できます。

**作成**を選択すると、まだブランチを GitHub リモートにプッシュしていない場合、拡張機能はブランチを公開するかどうかを尋ね、特定のリモートを選択するためのドロップダウンを提供します。

**プルリクエストの作成**ビューが**レビューモード**になり、PR の詳細を確認し、コメントを追加し、準備ができたら PR をマージできます。PR がマージされた後、リモートブランチとローカルブランチの両方を削除するオプションがあります。

レビュー中

プルリクエストは**Pull Requests** ビューからレビューできます。プルリクエストの**説明**から、レビュー担当者とラベルの割り当て、コメントの追加、承認、クローズ、およびマージをすべて行えます。

**説明**ページから、**チェックアウト**ボタンを使用してプルリクエストをローカルで簡単にチェックアウトすることもできます。これにより、VS Code はレビューモードでプルリクエストのフォークとブランチ (ステータスバーに表示) を開き、現在の変更の差分、すべてのコミット、およびこれらのコミット内の変更を表示できる新しい**プルリクエストの変更**ビューを追加します。コメントが付けられたファイルには、ひし形のアイコンが装飾されます。ディスク上のファイルを表示するには、**ファイルを開く**インラインアクションを使用できます。

このビューからの差分エディターはローカルファイルを使用するため、ファイルナビゲーション、IntelliSense、および編集は通常どおり機能します。これらの差分エディター内でコメントを追加できます。単一のコメントの追加と、レビュー全体の作成の両方がサポートされています。

プルリクエストの変更のレビューが完了したら、PR をマージするか、**レビューモードを終了**を選択して作業していた前のブランチに戻ることができます。

Issues

Issue の作成

Issue は、**Issues** ビューの**+** ボタンから、また**GitHub Issues: Create Issue from Selection** および **GitHub Issues: Create Issue from Clipboard** コマンドを使用して作成できます。「TODO」コメントの Code Action を使用して作成することもできます。Issue を作成する際、デフォルトの説明を使用するか、右上にある**説明を編集**の鉛筆アイコンを選択して、issue の本文を編集するためのエディターを表示できます。

**GitHub Issues: Create Issue Triggers** (githubIssues.createIssueTriggers) 設定を使用して、Code Action のトリガーを構成できます。

デフォルトの issue トリガーは次のとおりです。

"githubIssues.createIssueTriggers": [
  "TODO",
  "todo",
  "BUG",
  "FIXME",
  "ISSUE",
  "HACK"
]

Issue の作業

**Issues** ビューから、issue を確認し、作業することができます。

デフォルトでは、issue の作業を開始すると (**Start Working on Issue** コンテキストメニュー項目)、以下の画像のようにステータスバーに表示されるように、ブランチが作成されます。

ステータスバーにはアクティブな issue も表示され、その項目を選択すると、GitHub Web サイトで issue を開いたり、プルリクエストを作成したりするなどの issue アクションのリストが利用できます。

**GitHub Issues: Issue Branch Title** (githubIssues.issueBranchTitle) 設定を使用して、ブランチの名前を構成できます。ワークフローでブランチの作成が含まれない場合、または毎回ブランチ名の入力を求められたい場合は、**GitHub Issues: Use Branch For Issues** (githubIssues.useBranchForIssues) 設定をオフにすることで、その手順をスキップできます。

issue の作業が完了し、変更をコミットしたい場合、**ソース管理**ビューのコミットメッセージ入力ボックスにはメッセージが自動的に入力されます。このメッセージは**GitHub Issues: Working Issue Format SCM** (githubIssues.workingIssueFormatScm) で構成できます。

GitHub Repositories拡張機能

GitHub Repositories 拡張機能を使用すると、リポジトリをローカルにクローンすることなく、Visual Studio Code 内から直接、リモートの GitHub リポジトリを素早く閲覧、検索、編集、コミットできます。これは、ソースコードをレビューしたり、ファイルやアセットに小さな変更を加えたりするだけでよい多くのシナリオで、高速かつ便利です。

リポジトリを開く

GitHub Repositories 拡張機能をインストールしたら、コマンドパレット (⇧⌘P (Windows、Linux では Ctrl+Shift+P)) の**GitHub Repositories: Open Repository...** コマンドを使用するか、ステータスバーの左下にあるリモートインジケーターをクリックして、リポジトリを開くことができます。

**Open Repository** コマンドを実行すると、GitHub からリポジトリを開くか、GitHub からプルリクエストを開くか、以前に接続したリポジトリを再度開くかを選択します。

以前に VS Code から GitHub にログインしたことがない場合は、GitHub アカウントで認証するよう求められます。

リポジトリの URL を直接指定するか、テキストボックスに入力して GitHub で目的のリポジトリを検索できます。

リポジトリまたはプルリクエストを選択すると、VS Code ウィンドウが再読み込みされ、ファイルエクスプローラーにリポジトリの内容が表示されます。その後、ファイルのオープン (完全な構文強調表示と括弧のマッチング付き)、編集、変更のコミットを、ローカルにクローンされたリポジトリで作業するのと同様に行えます。

ローカルリポジトリでの作業との違いの1つは、GitHub Repository 拡張機能で変更をコミットすると、変更がリモートリポジトリに直接プッシュされることです。これは、GitHub の Web インターフェースで作業している場合と似ています。

GitHub Repositories 拡張機能のもう1つの機能は、リポジトリまたはブランチを開くたびに、GitHub から利用可能な最新のソースを取得できることです。ローカルリポジトリのように、更新するためにプルを覚えておく必要はありません。

GitHub Repositories 拡張機能は、Git LFS (Large File System) をローカルにインストールすることなく、LFS で追跡されたファイルを表示したり、コミットしたりすることをサポートしています。LFS で追跡したいファイルの種類を.gitattributes ファイルに追加し、ソース管理ビューを使用して変更を GitHub に直接コミットします。

ブランチの切り替え

ステータスバーのブランチインジケーターをクリックすると、ブランチ間を簡単に切り替えることができます。GitHub Repositories 拡張機能の優れた機能の1つは、コミットされていない変更をスタッシュする必要なくブランチを切り替えられることです。拡張機能は変更を記憶し、ブランチを切り替えると再適用します。

リモートエクスプローラー

アクティビティバーで利用できるリモートエクスプローラーを使用して、リモートリポジトリをすばやく再度開くことができます。このビューには、以前に開いたリポジトリとブランチが表示されます。

プルリクエストの作成

ワークフローでリポジトリへの直接コミットではなくプルリクエストを使用している場合は、ソース管理ビューから新しい PR を作成できます。タイトルを提供し、新しいブランチを作成するよう求められます。

プルリクエストを作成したら、このトピックで以前に説明したように、GitHub Pull Request and Issues 拡張機能を使用して PR をレビュー、編集、およびマージできます。

仮想ファイルシステム

リポジトリのファイルがローカルマシンになくても、GitHub Repositories 拡張機能はメモリ内に仮想ファイルシステムを作成し、ファイルの内容を表示したり編集したりできます。仮想ファイルシステムを使用するということは、ローカルファイルを前提とする一部の操作や拡張機能が有効にならないか、機能が制限されることを意味します。タスク、デバッグ、統合ターミナルなどの機能は有効になっておらず、仮想ファイルシステムのサポートレベルについては、リモートインジケーターのホバーにある**利用できない機能**リンクから確認できます。

拡張機能の作成者は、仮想ファイルシステムとワークスペースでの実行について、仮想ワークスペース拡張機能作成者ガイドで詳細を確認できます。

作業を続行...

ローカルファイルシステムと完全な言語および開発ツールをサポートする開発環境でリポジトリの作業に切り替えたい場合があります。GitHub Repositories 拡張機能を使用すると、簡単に次を実行できます。

• GitHub Codespace を作成する (GitHub Codespaces 拡張機能がある場合)。
• リポジトリをローカルにクローンする。
• Docker コンテナーにリポジトリをクローンする (Docker と Microsoft Container Tools 拡張機能がインストールされている場合)。

開発環境を切り替えるには、コマンドパレット (⇧⌘P (Windows、Linux では Ctrl+Shift+P)) から利用できる**作業を続行...** コマンドを使用するか、ステータスバーのリモートインジケーターをクリックします。

ブラウザーベースのエディターを使用している場合、**「作業を続行...」** コマンドには、リポジトリをローカルで開くか、GitHub Codespaces のクラウドホスト環境内で開くオプションがあります。

コミットされていない変更がある状態で**作業を続行**を初めて使用すると、**クラウド変更**を使用して、選択した開発環境に編集内容を反映するオプションが表示されます。これにより、保留中の変更は設定同期に使用される VS Code サービスと同じ場所に保存されます。

これらの変更は、ターゲットの開発環境に適用されると、当社のサービスから削除されます。コミットされていない変更なしで続行を選択した場合でも、後で設定 "workbench.cloudChanges.continueOn": "prompt" を構成することで、この設定をいつでも変更できます。

保留中の変更がターゲットの開発環境に自動的に適用されない場合、**クラウド変更: クラウド変更を表示**コマンドを使用して、保存された変更を表示、管理、および削除できます。

次のステップ

• Copilot VS Code の詳細 - VS Code での Copilot について学習します。