リモートリポジトリ

2021年6月10日 Brigit Murtaugh (@BrigitMurtaugh), Eric Amodio (@eamodio) 著

注: このブログ記事の公開後、Remote Repositories 拡張機能は GitHub Repositories に名称が変更されました。この拡張機能に関する最新情報は、最新のドキュメントでご確認いただけます。

Visual Studio Code の新しい拡張機能 Remote Repositories をご紹介できることを嬉しく思います！これは、GitHub の友人たちとのパートナーシップのもとで構築してきた新しい体験で、VS Code 内でソースコードリポジトリを迅速かつ安全に操作できるようにするものです。

ソースコードリポジトリをより速く開く方法

VS Code では、当初から Git の統合サポートを提供しており、拡張機能を通じて他の多くのソース管理マネジメント (SCM) プロバイダーもサポートしてきました。これにより、開発者は VS Code 内で直接リポジトリをクローンして作業できるようになりました。

しかし、開発者が日常的に行う作業の大部分は、他人のコードを読むことに関わっています。プルリクエストのレビュー、オープンソースリポジトリの閲覧、新しい技術やプロジェクトの試用、アプリケーションのデバッグのための上流の依存関係の調査などです。これらすべてに共通するのは、最初のステップとして、通常はリポジトリをローカルにクローンし、それを好みのコードエディター（私たちは VS Code であることを願っています！）で開くということです。しかし、リポジトリのクローンには時間がかかり、プルを忘れると古いバージョンのリポジトリをレビューすることになりかねません。また、コードに不慣れな場合はセキュリティリスクになることもあります。

GitHub が公開した新しい Remote Repositories 拡張機能は、VS Code でソースコードリポジトリを開く体験を瞬時かつ安全なものにします。これを使えば、クローンすることなく、任意のリモート GitHub リポジトリ（そしてまもなく Azure Repos も）を VS Code 内から直接、素早く閲覧、検索、編集、コミットできます！

マシンにソースコードを一切保存することなく、好きなだけ多くのリポジトリで作業できます。Remote Repositories は時間とローカルディスク容量を節約し、すべてのソース管理タスクを VS Code 内で完結できるようにします。

このブログ記事では、Remote Repositories をいかに簡単に始められるか、最初のリモートリポジトリを開いた後に何ができるか、この仮想環境を支える技術的な詳細、そしてフィードバックを提供する方法について探っていきます。

VS Code で最初のリモートリポジトリを開く

VS Code でリモートリポジトリを開いてみましょう。まず、Remote Repositories 拡張機能がインストールされていることを確認してください。

現在、Remote Repositories は GitHub リポジトリをサポートしており、Azure Repos のサポートもまもなく開始されます。このブログ記事では、まず VS Code のリポジトリ (microsoft/vscode) を開くことから始めます。

Remote Repositories 拡張機能をインストールすると、VS Code の左下にあるリモートインジケーターをクリックするだけで、その Open Remote Repository コマンドに即座にアクセスできます（他にインストールされている Remote Development 拡張機能のコマンドと一緒に表示されます）。

これまで VS Code から GitHub にログインしたことがない場合は、GitHub アカウントの認証を求められます。ログイン後、リポジトリまたは PR を検索し、目的のものを選択すれば、準備完了です。

以下の短い動画では、VS Code リポジトリを検索して選択すると、VS Code がリロードされ、まるでローカルにクローンしたかのようにリポジトリのコンテンツが読み込まれます。

VS Code を離れることなく、リポジトリを探索し、貢献することができます。使い慣れた VS Code のインターフェースを使って、まるでローカルのコードで作業しているかのように感じられ、VS Code エクスプローラー、検索、タイムラインビュー、クイックオープン、そしてもちろんソース管理などの機能を使用できます。

これで、仮想ワークスペースとして知られるものに接続されました（仮想ワークスペースに関する詳細は後述）。リモートインジケーターには「GitHub」と表示されます。リモートインジケーターにカーソルを合わせると、仮想ワークスペースでは一部の機能が利用できないことが通知されます。

仮想ワークスペースは特殊な設定であり、拡張機能などの一部の機能は無効化されるか、機能が制限されます。リモートインジケーターにカーソルを合わせたときに表示される Some features リンクをクリックすると、どの拡張機能が無効になっているかを簡単に確認できます。

リンクをクリックすると、どの拡張機能が無効になっているか、どの拡張機能の機能が制限されているかが表示されます。制限された機能は、拡張機能にカーソルを合わせると確認できます。

仮想ワークスペースで拡張機能を手動で有効にしたい場合は、ユーザーの settings.json ファイルで extensions.supportVirtualWorkspaces 設定を使用できます。

    "extensions.supportVirtualWorkspaces": { "<extensionID>": true }

拡張機能がローカルファイルシステムへのアクセスなしで仮想ワークスペースを処理するように実装されていない可能性があり、その場合、拡張機能が期待通りに動作しない可能性があることに注意してください。

リポジトリを開いたら、次は何をしますか？

リポジトリを開くと、Remote Repositories はプロジェクトへの貢献を容易にします。

プロジェクトを最新に保つ簡略化された Git ワークフロー

Remote Repositories は、複雑な Git コマンドなしで、いつでもリポジトリの最新バージョンを保つのに役立ちます。

新しいリポジトリを開くたびに、最新バージョンが開かれます。そして、Remote Repositories が GitHub からの新しい変更を検出するたびに、ステータスバーにプルダウンする必要のあるコミット数が表示されます。

そして、変更されたファイルがエクスプローラーでハイライト表示されます。

変更をコミットすると、それらは自動的に GitHub に表示されます。変更をプッシュしたり、作成した新しいブランチを公開したりする必要はありません。

プルリクエストの作成またはチェックアウト

Remote Repositories は GitHub Pull Requests and Issues 拡張機能とうまく連携します。これにより、GitHub のプルリクエストや Issue を VS Code で直接レビューおよび管理できます。2つの拡張機能を並行して使用することで、コードをローカルにクローンしたり VS Code を離れたりすることなく、PR を素早くチェックアウトし、Issue に取り組むことができます。

コードに変更を加え、その変更に基づいて新しいブランチとプルリクエスト (PR) を作成し、その PR をチェックアウトするまでを、数回のクリックで行うことができます。

GitHub Pull Requests and Issues 拡張機能については、GitHub との連携の記事で詳しく学ぶことができます。

変更をブランチごとに分離する

作業を進める中で、ブランチを切り替える必要があるかもしれません。通常の環境では、どの変更をスタッシュするかコミットするかを決定する必要があるため、これは厄介なことがあります。

Remote Repositories を使えば、異なるブランチで同時に簡単に作業できます。あるブランチでの作業を中断して新しいブランチに切り替えても、変更をスタッシュするかどうか尋ねられることはありません。変更は自動的に前のブランチに残ります。前のブランチに戻ると、変更はそのまま残っており、中断したところからすぐに作業を再開できます。

ブランチに変更をプッシュする方法を見てみましょう。

ステータスバーで、現在のブランチ（例えば "main"）を選択してブランチのリストを開きます。

+ Create New Branch... を選択し、ブランチの名前を入力します。

その後、その新しいブランチに切り替えることができます。

新しいブランチには、前のブランチからの変更は含まれません。

制限

Remote Repositories での作業にはいくつかの制限があります

• デバッグ、ターミナル、タスク - 現在サポートされていません。ターミナルはローカルファイルシステム上で開かれ、リモートリポジトリの仮想ファイルシステムにはアクセスできません。
• 限定的な言語インテリジェンス - IntelliSense や [定義へ移動] のような機能は影響を受ける可能性があります。なぜなら、多くの言語がまだ Remote Repositories の仮想化された環境を理解していないためです。
• 検索 - GitHub の検索自体には、ブランチをインデックスしないなどの制限があります。Remote Repositories は、インデックス作成を有効にすることでこの制限を回避し、全文検索を実行できます。インデックス作成は、GitHub からリポジトリのシャロークローンを取得し、ローカルで完全な検索を実行します。これにより、GitHub のあいまいなデフォルトブランチのネイティブ検索よりも強力な機能を提供します。Remote Repositories のインデックス作成は、検索ビューから有効にできます。
• 拡張機能の制限 - すべての拡張機能が仮想ワークスペースでの実行をサポートできるわけではありませんが、時間とともにサポートする拡張機能は増えていくでしょう。ローカルファイルへのアクセスに大きく依存する拡張機能は、この設定をサポートできません。詳細については、後述の仮想ワークスペースのセクションを参照してください。

私たちはこの旅を始めたばかりなので、開発を続けるにつれて機能セットが拡大し、制限が縮小していくことを期待してください。

より強力な環境で作業を続ける

Remote Repositories を使用すると、VS Code は物理的なファイルシステムがないため、すべての機能が利用できるわけではない環境で動作します。これはリポジトリの閲覧を素早く始めるのに最適ですが、次のようなより「高度な」作業を行う準備ができたときはどうでしょうか。

• リポジトリで積極的に作業し、VS Code の全機能を利用したい。
• リモートから定期的にプルして、リポジトリの変更を積極的に追跡する必要がある。

より高度なワークフローに移行するために、Remote Repositories は環境を「アップグレード」し、現在いる場所から作業を続ける方法を提供します。

左下のリモートインジケーターをクリックし、Continue Working on... を選択します。

3つのオプションが表示されます。

• Clone Repository Locally (リポジトリをローカルにクローン): 現在のリポジトリをローカルマシンにクローンします。ローカルファイルエクスプローラーがポップアップし、リモートリポジトリをクローンするディスク上の場所を選択できます。
• Clone Repository in Container Volume (コンテナーボリュームにリポジトリをクローン): Dev Containers 拡張機能を使用して、現在のリポジトリを Docker のコンテナーボリュームにクローンします（Dev Containers 拡張機能と Docker がインストールされている必要があります）。VS Code はリロードして Dev Containers を使用して接続し、リモートインジケーターには Dev Container: {イメージ名} と表示されます。
• Open in Codespaces (Codespaces で開く): GitHub Codespace で作業を続けます。このオプションを選択すると、ブラウザが開き、このリポジトリの Codespaces のリストに移動します。

VS Code で Remote Repositories を使用する方法を探ってきましたが、次にこの体験を支える技術的な詳細と、あなたの拡張機能が Remote Repository セッションで動作することを保証する方法について説明したいと思います。

仮想ファイルシステムと仮想ワークスペース

このリモート作業を支える中心的な概念は、仮想ファイルシステムと仮想ワークスペースです。

エンドユーザーとしては、どのリポジトリや PR で作業したいかを知っているだけで十分です。VS Code が仮想ファイルシステムの面倒を見て、ワークスペースを管理してくれます。拡張機能開発者としては、拡張機能が期待通りに動作するように、仮想ファイルシステム API を採用する必要があります。

仮想ファイルシステムの仕組み

従来の git ワークフローでは、リポジトリを "git clone" すると、コピーがコンピュータのローカルファイルシステムに保存されます。しかし、Remote Repositories で作業する場合、コードはローカルコンピュータ上には存在せず、依然として GitHub 上にあります。

ディスク上に物理的に存在するファイルから抽象化された仮想ファイルシステムを通じてコードを操作します。仮想ファイルシステムは、GitHub のようなコードホスト、クラウドストレージ、またはデータベースからコンテンツを提供し、これらをシームレスに VS Code のユーザーにファイルとして提供できます。

仮想ファイルシステム上でワークスペースを開くと、それは仮想ワークスペースとして知られます。仮想ワークスペースで作業している間も、拡張機能を含む VS Code の機能にアクセスできます。

拡張機能が仮想ワークスペースで動作することを確認する

拡張機能が適切に動作するためには、仮想ファイルシステムをサポートする必要があります。

拡張機能がコードを持たず、純粋なカラーテーマ、キーバインディング、スニペット、または文法拡張機能である場合、それは仮想ワークスペースで実行でき、採用は必要ありません。

メインのエントリポイントを定義する、つまり実際のコードを実行する拡張機能は、検査とおそらくは採用が必要です。

仮想ファイルシステムの API サポートは、FileSystemProvider インターフェースを通じて提供されます。ファイルシステムプロバイダーは新しい URI スキーム（例: vscode-vfs）に登録され、そのファイルシステム上のリソースは、そのスキーマを使用した URI（vscode-vfs://github/microsoft/vscode/package.json）で表されます。

拡張機能の package.json には capabilities プロパティがあり、そのサブプロパティである virtualWorkspaces は、拡張機能が仮想ワークスペースで動作するかどうかを示すために使用されます。

仮想ファイルシステム、ワークスペース、および拡張機能での実装方法については、仮想ワークスペース拡張機能作成者ガイドで詳しく学ぶことができます。

フィードバックと参考資料

皆さんに Remote Repositories を試していただき、フィードバックをいただけることを心待ちにしています。

Remote Repositories 拡張機能をインストールしてください。問題や機能リクエストを報告したり、@code 宛に感想をツイートしてください。

Remote Repositories 拡張機能の使い方に関する新しいYouTube ビデオもぜひご覧ください。

拡張機能の作成者の方は、拡張機能作成者のための仮想ワークスペースサポートガイドを確認し、質問やフィードバックがあればトラッキング Issueで共有してください。また、Extension Authors コミュニティの Slack グループに参加することもできます。

ハッピーコーディング！

Brigit Murtaugh、VS Code プログラムマネージャー @BrigitMurtaugh
Eric Amodio, VS Code プリンシパルソフトウェアエンジニア @eamodio