VSCodeのWeb版でプログラムを実行する方法について

VSCodeには、ブラウザから利用できるWeb版の「VS Code for the Web」があります。
代表的なのが「vscode.dev」です。

VSCodeをパソコンへインストールしなくてもコードを編集できるため便利ですが、通常のvscode.dev単体には、デスクトップ版VSCodeのようなローカル実行環境がありません。

そのため、PythonやNode.js、Java、C/C++などのプログラムを実行したい場合は、GitHub CodespacesやRemote Tunnelsなどの外部の実行環境を組み合わせる必要があります。

この記事では、VSCodeのWeb版でプログラムを実行する代表的な方法や、デスクトップ版との違いについて詳しく解説します。

VSCodeのWeb版とは

VS Code for the Webは、Microsoftが提供しているブラウザ版のVisual Studio Codeです。

ブラウザからvscode.devへアクセスすることで、VSCodeをパソコンへインストールしなくてもコードの閲覧や編集ができます。

VSCode Web版でできること

VSCode Web版では、主に次のような作業ができます。

• ソースコードの閲覧
• ソースコードの編集
• GitHubリポジトリの閲覧や編集
• HTML・CSS・JavaScriptなどの編集
• Markdownの編集やプレビュー
• 一部のVSCode拡張機能の利用
• GitHubと連携したソース管理
• コード補完やシンタックスハイライト

ブラウザだけで利用できるため、一時的にコードを確認したい場合や、別のパソコンからGitHub上のコードを編集したい場合にも便利です。

デスクトップ版と同じ実行環境があるわけではない

注意したいのは、vscode.devがデスクトップ版VSCodeをそのままブラウザへ移植したものではないことです。

通常のvscode.devはブラウザの制限された環境で動作しています。

そのため、PCにインストールされているPythonやNode.js、Javaなどへ直接アクセスしてプログラムを実行することは基本的にできません。

vscode.dev単体では基本的にプログラムを実行できない

通常のvscode.dev単体では、PythonやNode.jsなどを実行するための一般的なターミナルを利用できません。

例えばデスクトップ版VSCodeであれば、ターミナルから次のようなコマンドを実行できます。

python main.py

Node.jsであれば、次のように実行できます。

node app.js

しかし、通常のvscode.devには、このようなコマンドをローカルPC上で実行するための環境がありません。

VSCodeはプログラムそのものを実行しているわけではない

そもそもVSCodeは、PythonやJavaScriptなどの実行エンジンそのものではありません。

例えばPythonを実行するにはPythonインタープリター、Javaを実行するにはJDK、C/C++をコンパイルするにはコンパイラが必要です。

イメージすると、次のようになります。

VSCode
↓
コードを書く・編集する

Python
↓
Pythonインタープリターで実行

Java
↓
JDKを利用して実行

C/C++
↓
GCC・Clang・MSVCなどでコンパイル

デスクトップ版では自分のPCにインストールされた実行環境を利用できますが、vscode.dev単体ではそれらへ直接アクセスできません。

GitHub Codespacesを使ってプログラムを実行する方法

ブラウザだけで本格的にプログラミングしたい場合、有力な方法がGitHub Codespacesです。

GitHub Codespacesは、GitHubが提供しているクラウド開発環境です。

クラウド上に開発用のコンピューター環境を作り、ブラウザ版VSCodeから接続できます。

GitHub Codespacesの仕組み

Codespacesでは、次のような構成でプログラムを実行します。

ブラウザ
↓
VSCode
↓
GitHub Codespaces
↓
クラウド上の開発環境
↓
Python・Node.jsなどを実行

つまり、プログラムを実際に実行しているのはブラウザではありません。

GitHub側に用意されたクラウド環境でプログラムが動作し、その環境をブラウザ版VSCodeから操作しています。

GitHub Codespacesを起動する

GitHub上のリポジトリを開き、「Code」ボタンから「Codespaces」を選択します。

新しいCodespaceを作成すると、ブラウザ上にVSCodeに近い開発画面が表示されます。

Codespacesではターミナルを利用できるため、通常の開発環境と同じようにコマンドを実行できます。

Pythonを実行する

例えば「main.py」というファイルを作成して、次のコードを記述します。

print("Hello, World!")

Pythonが利用できるCodespaceであれば、ターミナルから次のように実行できます。

python main.py

環境によっては、次のコマンドを使用します。

python3 main.py

実行すると、次のような結果が表示されます。

Hello, World!

ただし、Codespaceの構成によって使用できるPythonのバージョンやコマンドは異なります。

Node.jsでJavaScriptを実行する

Node.jsが利用できるCodespaceであれば、JavaScriptも実行できます。

例えば「app.js」を作成します。

console.log("Hello, VSCode Web!");

ターミナルから次のように実行します。

node app.js

実行結果は次のようになります。

Hello, VSCode Web!

Node.jsのプロジェクトであれば、環境に応じて次のようなコマンドも利用できます。

npm install
npm run dev

Webサーバーも起動できる

Codespacesでは、Webアプリケーション用の開発サーバーを起動することもできます。

例えばPythonでは、次のような簡易HTTPサーバーを起動できます。

python -m http.server 8000

Node.js系のプロジェクトであれば、次のようなコマンドを利用するケースがあります。

npm run dev

Codespacesにはポート転送機能があるため、クラウド環境で起動したWebサーバーへ手元のブラウザからアクセスできます。

ReactやVue、Vite、Next.js、ExpressなどのWeb開発でも利用できます。

vscode.devからGitHub Codespacesへ移行する方法

最初はvscode.devでコードを編集し、実行が必要になった段階でCodespacesへ移動することもできます。

「Continue Working On」を利用する

コマンドパレットを開きます。

WindowsやLinuxでは、一般的に次のショートカットを使用します。

Ctrl + Shift + P

コマンドパレットで、次の項目を検索します。

Continue Working On...

そこからGitHub Codespacesなどの別の開発環境へ作業を引き継ぐことができます。

vscode.devをコード確認や簡単な編集に利用し、プログラムを実行したくなったらCodespacesへ移るという使い分けも便利です。

Remote Tunnelsを使ってプログラムを実行する方法

GitHub Codespaces以外にも、Remote Tunnelsを利用する方法があります。

Remote Tunnelsは、自分のPCやサーバーなどへブラウザ版VSCodeからリモート接続するための機能です。

Remote Tunnelsの仕組み

Remote Tunnelsでは、次のような構成になります。

ブラウザ
↓
vscode.dev
↓
Remote Tunnel
↓
自分のPC・サーバー
↓
Python・Node.jsなどを実行

重要なのは、プログラムがvscode.dev内で実行されるわけではないことです。

実際のプログラムは、Remote Tunnelsで接続しているPCやサーバー上で実行されます。

自分の開発環境をそのまま利用できる

例えば接続先のPCに、すでに次のような環境が構築されているとします。

• Python
• Node.js
• Java
• Go
• Rust
• Docker
• Git

Remote Tunnelsを利用すれば、それらの環境をブラウザから操作できます。

普段使っているPCや自宅サーバーなどを開発環境として活用したい場合に便利です。

GitHub Codespacesとの違い

GitHub CodespacesとRemote Tunnelsでは、主にプログラムを実行する場所が異なります。

GitHub Codespaces
→ GitHub側のクラウド環境で実行

Remote Tunnels
→ 自分のPCやサーバーで実行

クラウド上に新しい開発環境を作りたい場合はCodespaces、自分がすでに持っている環境を遠隔操作したい場合はRemote Tunnelsが向いています。

Jupyter NotebookをVSCode Web版で使う方法

Pythonのデータ分析などでは、Jupyter Notebookを利用する方法もあります。

ただし、「vscode.devを開くだけでPythonを直接実行できる」という意味ではありません。

Pythonを実行するにはカーネルが必要

Jupyter Notebookのコードを実行するには、Pythonなどを実行するためのカーネルが必要です。

VSCode Web版でNotebookを開いた場合も、実際のコードを処理する環境が別途必要になります。

例えば、次のような構成です。

vscode.dev
↓
リモートJupyter Server
↓
Pythonカーネル
↓
コード実行

Remote Tunnelsで接続している環境のPythonカーネルを使用する方法もあります。

vscode.dev
↓
Remote Tunnel
↓
リモートPC・サーバー
↓
Pythonカーネル

そのため、Jupyter Notebookを利用する場合も、vscode.dev自体がPythonを実行しているわけではありません。

HTML・CSS・JavaScriptを実行する場合

HTML・CSS・クライアントサイドJavaScriptについては、少し事情が異なります。

これらはWebブラウザ自体が実行・表示環境になるためです。

HTMLやCSSはブラウザで確認できる

例えば、次のようなHTMLファイルを作成したとします。

<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
</head>
<body>
    <h1>Hello VSCode</h1>

    <script>
        console.log("Hello JavaScript");
    </script>
</body>
</html>

HTMLやCSS、クライアントサイドJavaScriptはWebブラウザで表示・実行できます。

ただし、vscode.dev自体に一般的なローカルWebサーバーが内蔵されているわけではありません。

開発サーバーが必要なWebアプリケーションでは、Codespacesなどの実行環境を利用する必要があります。

ブラウザJavaScriptとNode.jsは別物

特にJavaScriptでは、この違いに注意が必要です。

ブラウザで動作するJavaScriptはWebブラウザが実行します。

一方、次のようなコマンドを実行するにはNode.jsが必要です。

node app.js

そのため、通常のvscode.dev単体でNode.jsプログラムを実行することはできません。

ReactやVue、Next.js、ViteなどでNode.jsベースの開発サーバーを使用する場合も、CodespacesやRemote Tunnelsなどの実行環境が必要です。

拡張機能をインストールしても実行できるとは限らない

VSCodeでは、さまざまな拡張機能をインストールできます。

そのため、「Python拡張機能やCode Runnerを入れればWeb版でも実行できるのではないか」と考える人もいるでしょう。

しかし、拡張機能とプログラムの実行環境は別物です。

拡張機能と実行環境は別

例えばPythonの場合、次のように役割が分かれています。

VSCode
→ コードを編集する

Python拡張機能
→ Python開発を支援する

Pythonインタープリター
→ Pythonコードを実際に実行する

Python用の拡張機能があっても、Pythonインタープリターを動かせる環境がなければPythonプログラムを実行できません。

Web版で利用できる拡張機能にも制限がある

vscode.devでは、主にWeb環境に対応した拡張機能を利用します。

デスクトップ版VSCodeの拡張機能がすべて同じように利用できるわけではありません。

OS上の実行ファイルやNode.js APIなどへ依存する拡張機能は、Web版では正常に動作しない場合があります。

そのため、次のように考えると分かりやすいでしょう。

拡張機能
≠
プログラムの実行環境

VSCode Web版ではGitを使える？

vscode.devでは、GitHubリポジトリと連携してコードを編集したり、Source Control機能を利用したりできます。

ただし、デスクトップ版VSCodeでローカルGitを操作する場合とは仕組みが異なることがあります。

ローカルGit CLIとは異なる

デスクトップ版ではターミナルから次のようなコマンドを実行できます。

git status
git add .
git commit
git push

通常のvscode.devには一般的なローカルターミナルがないため、同じ方法でローカルGitを操作するわけではありません。

Web版では、GitHubリポジトリとの連携やSource Control機能を中心に利用すると考えると分かりやすいでしょう。

VSCode Web版でデバッグすることはできる？

通常のvscode.devでは、デバッグ機能にも制限があります。

デスクトップ版VSCodeのように、ローカルPC上で自由にプログラムを起動してデバッグできるわけではありません。

CodespacesやRemote Tunnelsではデバッグしやすい

GitHub CodespacesやRemote Tunnelsを利用すると、実際の実行環境へ接続できるため、対応している言語や拡張機能でデバッグできるようになります。

整理すると、次のようになります。

vscode.dev単体
→ デバッグ機能に大きな制限がある

GitHub Codespaces
→ クラウド環境を利用してデバッグ可能

Remote Tunnels
→ 接続先のPC・サーバーを利用してデバッグ可能

使用する言語や拡張機能によって対応状況は異なるため、実際の開発環境に合わせて確認する必要があります。

VSCode Web版とデスクトップ版の違い

プログラムの実行という観点から比較すると、次のようになります。

機能	vscode.dev単体	GitHub Codespaces	デスクトップ版VSCode
コード編集	○	○	○
ターミナル	基本的に×	○	○
Python実行	原則×	○※環境による	○※Pythonが必要
Node.js実行	原則×	○※環境による	○※Node.jsが必要
C/C++コンパイル	原則×	○※コンパイラが必要	○※コンパイラが必要
Jupyter実行	外部カーネルなどが必要	○※環境による	○※環境による
デバッグ	制限あり	○※環境による	○
拡張機能	Web対応中心	幅広く利用可能	最も幅広い
ローカルインストール	不要	不要	必要
主な実行場所	原則なし	クラウド	自分のPC

ここで重要なのは、GitHub Codespacesやデスクトップ版VSCodeを利用したからといって、すべてのプログラミング言語を無条件に実行できるわけではないことです。

PythonならPython、JavaならJDK、C/C++ならコンパイラというように、使用する言語に対応した実行環境が必要です。

VSCode Web版でプログラムを実行するならどの方法がおすすめ？

利用目的によって適した方法が変わります。

ブラウザだけで本格的に開発したいならGitHub Codespaces

ソフトウェアをパソコンへインストールせず、ブラウザだけでプログラムを編集・実行したい場合はGitHub Codespacesが便利です。

例えばPythonなら、次のような流れになります。

GitHubリポジトリを用意する
↓
Codespaceを作成する
↓
main.pyを作成する
↓
ターミナルを開く
↓
python main.pyを実行する

Node.jsやWebアプリケーションの開発にも利用できます。

ただし、GitHub Codespacesには利用量に関する制限や料金体系があるため、利用前にGitHub公式サイトで最新の条件を確認しておくと安心です。

自分のPCやサーバーを使いたいならRemote Tunnels

すでに開発環境を構築したPCやサーバーを持っている場合は、Remote Tunnelsが便利です。

ブラウザから接続しながら、実際のコードは接続先のマシンで実行できます。

コードを見るだけならvscode.devでも十分

プログラムを実行する必要がなく、次のような作業だけを行いたい場合はvscode.dev単体でも十分便利です。

• コードを確認する
• 簡単な修正をする
• GitHub上のファイルを編集する
• Markdownを編集する
• ソースコードをレビューする

「編集はvscode.dev、実行が必要になったらCodespaces」という使い分けもできます。

まとめ

VSCodeのWeb版であるvscode.devは、ブラウザだけでコードを閲覧・編集できる便利なサービスです。

ただし、通常のvscode.dev単体には、デスクトップ版VSCodeのようなローカルのターミナルやプログラム実行環境がありません。

そのため、PythonやNode.js、Java、C/C++などを実際に実行する場合は、GitHub CodespacesやRemote Tunnelsなどを利用する必要があります。

GitHub Codespacesではクラウド上の開発環境を利用でき、Remote Tunnelsでは自分のPCやサーバーを実行環境として利用できます。

また、Jupyter Notebookについても、vscode.dev単体でPythonを実行するわけではなく、リモートJupyter ServerやRemote Tunnelsなどを通じて実行用のカーネルへ接続する必要があります。

VSCode Web版を理解するうえでは、次のように整理すると分かりやすいでしょう。

vscode.dev
→ コードの閲覧・編集が中心

GitHub Codespaces
→ クラウド上でプログラムを実行

Remote Tunnels
→ 自分のPCやサーバー上でプログラムを実行

デスクトップ版VSCode
→ 自分のPCにある実行環境を利用

ブラウザだけで本格的なプログラミングを行いたい場合は、GitHub Codespacesを組み合わせる方法が有力です。

一方、コードの閲覧や簡単な編集が目的であれば、vscode.dev単体でも十分活用できます。

以上、VSCodeのWeb版でプログラムを実行する方法についてでした。

最後までお読みいただき、ありがとうございました。