WebでPythonを実行およびデバッグする
Web上でのPythonコード実行の実験的なサポートを発表できることを嬉しく思います。お試しいただくには、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プログラムを実行している様子を示しています。このプログラムは、ローカルファイルシステムに保存されているapp.pyとhello.pyの2つのファイルで構成されています。

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を使用してパッケージをインストールします。pipを含むPythonのOSインストールが必要であることに注意してください。
- ルートに
-
変更をコミットします。
-
python.wasm.runtime設定をGitHubリポジトリを指すように変更します。例:{ "python.wasm.runtime": "https://github.com/dbaeumer/python-3.11.0" }
制限
WebでのPythonのサポートは、ローカルマシンでソースコードを実行する際に利用できるすべての機能を提供するわけではありません。Pythonインタープリターの主な制限は次のとおりです。
- ソケットのサポートなし。
- スレッドのサポートなし。結果として、非同期サポートはありません。
- pipのサポートなし。
- ネイティブPythonモジュールのサポートなし。
謝辞
この作業は、CPythonの必要なWASMファイルを構築し維持しているPythonコミュニティのサポートなしには不可能でした。
フィードバック
Python for the Web拡張機能の使用中に問題が発生した場合は、vscode-python-web-wasmリポジトリに問題を報告してください。