Remote Explorer

Page content

VS Code（Visual Studio Code）の「Remote Explorer」は、リモート開発拡張機能（Remote Development Extensions）の一部で、以下のようなことができます。

主な機能

  1. リモート環境への接続を管理

    • SSHサーバ、WSL（Windows Subsystem for Linux）、リモートコンテナ、GitHub Codespacesなどのリモート環境に簡単に接続できます。
    • 事前に設定した接続先の一覧が表示され、ワンクリックでアクセスできます。

  2. リモート上のファイルやフォルダーの閲覧・編集

    • リモートマシン上のファイルシステムをローカルと同じようにエクスプローラーで閲覧し、ファイルの作成・編集・削除などが可能です。

  3. リモートワークスペースの管理

    • リモートで開いたプロジェクトの履歴や最近接続した環境などを一覧表示し、素早く再接続できます。

  4. リモート環境の設定操作

    • SSH設定、認証方法、ポートフォワーディングなどリモート接続に関する多様なオプションをGUIで設定できます。

  5. リモート拡張機能のインストールと管理

    • Remote環境上で必要なVS Codeの拡張機能をインストール・管理できます（例：PythonやDockerの拡張機能をリモート環境へ直接インストール）。

利用例

  • 開発用のLinuxサーバにSSHで接続し、VS Code上でコーディング・デバッグ作業をしたいとき
  • WSL環境上でWindowsとは別のLinux環境用開発をしたいとき
  • Dockerコンテナ内で安全にコード編集・テストしたいとき
  • GitHub Codespacesでクラウド上の環境に即座にアクセスしたいとき

まとめ

Remote Explorerは、様々なリモート開発環境への接続や管理、ファイル編集、拡張機能のインストールなどをVS Codeから簡単に操作できる便利なGUIツールです。リモート先でもローカルと同じような開発体験を提供します。

GitHub Codespacesでクラウド上の開発環境に即座にアクセスする手順は以下の通りです。

1. 必要条件

  • GitHubアカウントを持っていること
  • 対象リポジトリにアクセスできる権限があること
  • Codespacesが使えるプラン（Free枠または有料プラン）
    ※チームやEnterpriseで制限がある場合は管理者に確認しましょう

2. Codespacesの作成手順

① GitHubのリポジトリページへアクセス

  1. ブラウザで GitHub を開き、対象リポジトリに移動します。

② 「Code」ボタンから「Codespaces」を選択

  1. リポジトリ画面右上付近にある「Code」ボタンをクリックします。
  2. 「Codespaces」タブを選択します。

③ 新しいCodespaceを作成

  1. 「Create codespace on main」（または他のブランチ名）をクリックすると、
    クラウド上に開発環境が自動で立ち上がります。

3. Codespaces上での操作

  • 数十秒～1分ほどでブラウザ上にVS CodeのWebエディタ環境が開きます。
  • ローカルVS CodeにRemote - GitHub Codespaces拡張を入れて、
    ローカルVS Codeからも接続可能です。
  • ターミナル、デバッグ、拡張機能のインストール、Git操作など、通常のVS Codeとほぼ同じ使い方ができます。

4. 補足

  • 一度作成したCodespaceは一覧表示され、次回は「Resume（再開）」ボタンで即座にアクセスできます。
  • npmやPython、Dockerなどのセットアップはリポジトリ内.devcontainerの設定で自動化できます。

参考: