Running Python ASGI apps in the browser via Pyodide + a service worker｜Pyodide とサービスワーカーを用いたブラウザ上での Python ASGI アプリの実行 | AIニュース最前線

**研究:** [Pyodide とサービスワーカーを介してブラウザ上で Python ASGI アプリを実行する](https://github.com/simonw/research/tree/main/pyodide-asgi-browser#readme) [Datasette Lite](https://lite.datasette.io/) は、WebAssembly 上の Pyodide を使用してブラウザ内で完全に動作するようにした私のバージョンの Datasette です。 4 年前に初めて構築した際 [4 年前の記事](https://simonwillison.net/2022/May/4/datasette-lite/) は、Web Workers と、生成された HTML を Python アプリを実行して取得するためにナビゲーション操作をインターセプトするコードを使用していました。 これは機能しましたが、` ` タグ内の JavaScript が実行されないという欠点がありました。これにより一部の Datasette 機能と多くの Datasette プラグインが破損しました。 今朝、私は [Claude Opus 4.8 にタスクを割り当てました](https://github.com/simonw/research/pull/112)（Web 版の Claude Code で）、Service Workers を使用して Pyodide 上で Python ASGI アプリを実行する方法を探させるようにしました。すると、うまく機能しているようです！[基本的な ASGI FastCGI のデモ](https://simonw.github.io/research/pyodide-asgi-browser/) と [Datasette 1.0a31 を実行するデモ](https://simonw.github.io/research/pyodide-asgi-browser/datasette.html) も用意しています。 仕組みが完全に理解できたわけではありませんが、それができ次第、Datasette Lite 自体のアップグレードを計画しています。 Tags: [javascript](https://simonwillison.net/tags/javascript), [python](https://simonwillison.net/tags/python), [datasette](https://simonwillison.net/tags/datasette), [asgi](https://simonwillison.net/tags/asgi), [service-workers](https://simonwillison.net/tags/service-workers), [pyodide](https://simonwillison.net/tags/pyodide), [datasette-lite](https://simonwillison.net/tags/datasette-lite), [claude-code](https://simonwillison.net/tags/claude-code) 前回の投稿では、Pyodide を使用してブラウザ上で Python ASGI アプリを実行し、Service Worker を介して Datasette Lite のような軽量な Web アプリを動作させる方法について解説しました。今回はその続きとして、より複雑なユースケースや、実際の開発環境での実装における課題、そしてパフォーマンス最適化の具体的な手法について深掘りしていきます。 まず、ブラウザ内で Python が実行される際の最大のボトルネックは、初期ロード時間とメモリ使用量です。Pyodide は WebAssembly (WASM) を利用して Python 3.10 の完全な実装をブラウザに読み込みますが、このプロセスには数秒から数十秒かかることがあります。これを緩和するためには、Service Worker を活用したキャッシュ戦略が不可欠です。具体的には、Pyodide のバイナリファイルや必要な Python パッケージの Wheel ファイルを Service Worker が事前に取得し、オフラインでも即座に起動できるようにします。 次に、ASGI アプリケーションの構造について再確認しましょう。ASGI (Asynchronous Server Gateway Interface) は、非同期 HTTP サーバーとアプリケーション間の通信プロトコルです。ブラウザ環境では、標準的な WSGI サーバーではなく、`hypercorn` や `uvicorn` の WASM 版が使用されます。これらのサーバーは、Service Worker が受け取ったリクエストを内部の Python コードに転送し、そのレスポンスを再び Service Worker を経由してブラウザに返すという流れになります。 実装における重要なポイントの一つは、ファイルシステムへのアクセスです。ブラウザのサンドボックス環境では、通常のファイルシステムへの直接アクセスが制限されています。そのため、Pyodide の `pyodide.file_system` モジュールや、IndexedDB を介した仮想ファイルシステムを使用する必要があります。例えば、Datasette Lite がデータベースを読み込む際、ユーザーがアップロードした SQLite ファイルを IndexedDB に保存し、そこから読み出すことで、ブラウザ内での永続的なデータ管理を実現できます。 パフォーマンス最適化の観点からは、Python コードの事前コンパイルや、必要なパッケージの最小限化が有効です。`micropip` を使用して、アプリケーションに必要なパッケージのみを動的にロードすることで、初期ロード時間を大幅に短縮できます。また、Service Worker のキャッシュ戦略では、バージョン管理を徹底し、コードが更新された際に古いキャッシュが誤って読み込まれないように注意が必要です。 最後に、開発者体験の向上について触れておきます。ブラウザ上で Python を実行する環境は、デバッグツールやログ出力の仕組みが限られています。そのため、`console.log` を活用した詳細なロギングや、エラーハンドリングを堅牢に行うことが重要です。また、Pyodide の公式ドキュメントやコミュニティフォーラムを活用し、最新のベストプラクティスを常にアップデートしておくことをお勧めします。 このように、Pyodide と Service Worker を組み合わせることで、ブラウザ内で Python ASGI アプリを実行する道が開かれました。ただし、その実現には初期ロード時間の最適化、ファイルシステムの適切な管理、そして堅牢なエラーハンドリングが不可欠です。これらの課題を克服することで、よりリッチでレスポンシブな Web アプリケーションを、サーバーサイドの依存を最小限に抑えながら構築することが可能になります。 次回の投稿では、具体的なコード例を用いて、Pyodide と Service Worker を組み合わせた実装の詳細を解説し、実際に動作するサンプルプロジェクトの作成方法について取り上げます。また、セキュリティ上の考慮事項や、大規模なデータ処理における限界についても議論する予定です。

Pyodide とサービスワーカーを用いたブラウザ上での Python ASGI アプリの実行

背景や根拠まで確認しますか？

関連記事

調べる

選ぶ

サイト

背景や根拠まで確認しますか？

関連記事

ニュースの次に確認する

調べる

選ぶ

サイト