Web上でPythonを実行・デバッグする
Web上でPythonコードを実行するための実験的(experimental)サポートを提供できることを嬉しく思います。試用するには、Marketplaceから Experimental - Python for the Web 拡張機能の最新プレリリース版をインストールしてください。この取り組みは現在開発中のPythonのWASMに基づいています。仕組みや最新の進捗状況については、Compiling Python to WebAssembly (WASM) を参照してください。
前提条件
拡張機能を使用するには、以下の前提条件が必要です
- GitHub Repositories 拡張機能がインストールされている必要があります。
- GitHubで認証を行う必要があります。
- クロスオリジン分離をサポートするブラウザを使用する必要があります。本拡張機能は、Microsoft EdgeおよびGoogle Chromeブラウザでテスト済みです。
- VS Code for the Web のインサイダー版を使用する必要があります(例:
https://insiders.vscode.dev/)。 - ソースコードは、ローカルファイルシステム、または GitHub Repositories 拡張機能を通じてアクセスされるGitHubリポジトリのいずれかでホストされている必要があります。
- VS Code for the Web を起動する際、URLの末尾に次のクエリパラメータを追加する必要があります:
?vscode-coi=。
Hello Worldを実行する
下のスクリーンショットは、ブラウザ上で簡単なPythonプログラムを実行した様子です。プログラムはローカルファイルシステムに保存された2つのファイル、app.py と hello.py で構成されています。

REPLを開始する
この拡張機能には統合Python REPLが付属しています。起動するには、コマンド Python WASM: Start REPL を実行してください。

デバッグ
Web上でPythonファイルをデバッグする機能があり、VS Codeデスクトップ版のデバッグと同じUIを使用します。現在サポートされている機能は以下の通りです。
- ブレークポイントの設定
- 関数のステップイン、ステップアウト
- モジュールを跨いだデバッグ
- デバッグコンソールでの変数評価
- 統合ターミナルでのプログラムデバッグ
下のスクリーンショットは、アクティブなデバッグセッションを示しています。ファイルはこのサンプルリポジトリ上のGitHubで直接ホストされています。

独自のPython環境を作成する
この拡張機能は、CPython WebAssemblyビルドに基づいた事前構成済みのPython環境を使用します。使用されるビルドは Python-3.11.0-wasm32-wasi-16.zip です。
以下の手順に従うことで、ソースホイールのPythonパッケージを含む独自のPython環境を作成できます。
-
新しいGitHubリポジトリを作成します。
-
cpython-wasm-test/releases から wasm-wasi-16 ビルドをダウンロードし、リポジトリのルートに展開します。
-
ソースホイールパッケージを追加するには、以下の操作を行います。
- ルートに
site-packagesフォルダを作成します。 - 次のコマンドを使用してパッケージをインストールします:
pip install my_package --target ./site-packages。OS上でpipを含むPython環境がインストールされている必要があることに注意してください。
- ルートに
-
変更をコミットします。
-
python.wasm.runtime設定を変更して、作成したGitHubリポジトリを指定します。例:{ "python.wasm.runtime": "https://github.com/dbaeumer/python-3.11.0" }
制限事項
Python for the Webのサポートには、ローカルマシンでソースコードを実行する際に利用可能なすべての機能が含まれているわけではありません。Pythonインタプリタの主な制限事項は以下の通りです。
- ソケットサポートなし。
- スレッドサポートなし。その結果、非同期(async)サポートもありません。
- pipサポートなし。
- ネイティブPythonモジュールのサポートなし。
謝辞
この取り組みは、CPythonの必要なWASMファイルを構築・保守しているPythonコミュニティのサポートなしには実現できませんでした。
フィードバック
Python for the Web拡張機能の使用中に問題が発生した場合は、vscode-python-web-wasm リポジトリにIssueを登録してください。