Webブラウザ版VSCode、WebAssembly版PythonによるWeb上でのPythonコードの実行やデバッグが可能に

今回は「Webブラウザ版VSCode、WebAssembly版PythonによるWeb上でのPythonコードの実行やデバッグが可能に」についてご紹介します。

関連ワード （実行環境、発表、編集等） についても参考にしながら、ぜひ本記事について議論していってくださいね。

本記事は、Publickey様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。

マイクロソフトは、WebAssembly版Pythonを用いることにより、Webブラウザ版のVisual Studio Code（以下VSCode）上でPythonコードの実行やデバッグを可能にする実験的な拡張機能「Python for the Web」のプレビュー公開を発表しました。

下記は実際にWebブラウザ版VSCodeに拡張機能「Python for the Web」を組み込み、Pythonコードを実行したときの画面です。

下部の「ターミナル」のペインで、実行結果の「6」が表示されているのが分かると思います。これはこのWebブラウザ上でPythonが実行された結果です。

Webブラウザ上でPython実行環境が自動的に用意される

WindowsやMac、Linuxで利用できるデスクトップ版のVisual Studio Codeでも、エディタ画面からコードを実行し、ターミナル画面でその結果を参照することが可能です。

ただしこの場合、基本的にはプログラミング言語のランタイムをユーザーが事前にインストールし、OS上でコードが実行可能な環境にしておく必要があります。

今回公開されたWeb版VSCodeの拡張機能であるPython for the Webでは、この拡張機能が自動的にWebAssembly版PythonをWebブラウザ上にロードし、Web版VSCodeから実行可能にしてくれます。

つまりユーザーは事前にOSやサーバなどのリモート環境などでコードの実行環境を用意する必要もありません。

下記画面のようにWeb版VSCodeの拡張機能の画面から拡張機能であるPython for the Webを選んでインストールするだけで、Pythonの実行環境がWeb版VSCode上で自動的に用意されるのです。

実際に試すには、下記のURLにアクセスしてWeb版VSCodeのインサイダーズ版からGitHubのリポジトリにアクセスし、拡張機能のPython for the Webをインストールします。{username}にはGitHubのユーザー名を、{repo}にはリポジトリ名を入れます。

「https://insiders.vscode.dev/github/{username}/{repo}?vscode-coi=」

Webブラウザ上でコードの編集、実行、デバッグの可能性が広がる

WebAssembly版Pythonとして使われているのは、Pythonのリファレンス実装であるCPythonのWebAssembly版ビルドの最新版です。

まだWebAssembly版Pythonには制限があり、パッケージ管理のPIPはサポートされておらず、ソケットやスレッド、非同期機能、ネイティブなPythonモジュールなどもサポートされていません。

拡張機能であるPython for Web自体もまだプレビュー版ですので、実用になるまでにはまだしばらく時間がかかるでしょう。

しかし利用しているOSに関係なくWebブラウザがあれば、コードエディタを中心としたVSCodeの統合開発環境だけでなく、言語のランタイムとデバッガまで簡単に用意できてしまう今回のWebブラウザ版VSCodeと拡張機能、そしてWebAssembly版Pythonの組み合わせには、大きな可能性を感じます。

WebAssembly版のランタイムはPythonだけでなく、先日Rubyの正式版がリリースされたばかりです。それ以外でもWebAssembly版の開発が進んでいるプログラミング言語は少なくないでしょう。

参考：WebAssembly版Rubyが正式に登場、YJITが実用段階に。「Ruby 3.2.0」正式リリース

今後Python以外にもWebブラウザで実行可能なプログラミング言語が増えてくるとすれば、今回と同様の仕組みによってWebブラウザの上で簡単にさまざまなプログラミング言語の編集、実行、デバッグなどの統合環境が実現していくのかもしれません。