Pyodide とサービスワーカーを用いたブラウザ上での Python ASGI アプリの実行
Simon Willison は、Claude Code を活用して Pyodide と Service Worker を組み合わせた新手法により、ブラウザ内で JavaScript の実行を可能にする Python ASGI アプリの実装に成功した。
キーポイント
Service Worker による新アプローチ
従来の Web Workers に代わり、Claude Code の支援で Service Worker を使用して Python ASGI アプリを実行する手法を確立し、JavaScript 実行の制限を解消した。
Datasette Lite の機能回復
以前のバージョンで問題となっていた `<script>` タグ内の JavaScript 非実行によるプラグイン不具合が解決され、完全なブラウザ動作が可能になった。
AI エージェントの活用事例
開発者が具体的な課題に対し、Claude Opus 4.8 を用いてアーキテクチャの解決策を探索・実装するプロセスが示された。
影響分析・編集コメントを表示
影響分析
この技術的進展は、Python エコシステムがブラウザネイティブ環境でより堅牢に動作することを示しており、特にデータ可視化ツールや軽量サーバーレスアプリケーションの配信において重要な意味を持つ。また、開発プロセスにおける AI エージェントの実践的な活用事例として、複雑な技術課題解決への信頼性を高めるケーススタディとなる。
編集コメント
ブラウザ内で Python を実行する際の技術的制約を、最新の生成 AI ツールを活用して克服した実例であり、開発ワークフローの効率化と技術的突破の両面で示唆に富む内容です。
研究: Pyodide とサービスワーカーを介してブラウザ上で Python ASGI アプリを実行する
Datasette Lite は、WebAssembly 上の Pyodide を使用してブラウザ内で完全に動作するようにした私のバージョンの Datasette です。
4 年前に初めて構築した際 4 年前の記事 は、Web Workers と、生成された HTML を Python アプリを実行して取得するためにナビゲーション操作をインターセプトするコードを使用していました。
これは機能しましたが、<script> タグ内の JavaScript が実行されないという欠点がありました。これにより一部の Datasette 機能と多くの Datasette プラグインが破損しました。
今朝、私は Claude Opus 4.8 にタスクを割り当てました(Web 版の Claude Code で)、Service Workers を使用して Pyodide 上で Python ASGI アプリを実行する方法を探させるようにしました。すると、うまく機能しているようです!基本的な ASGI FastCGI のデモ と Datasette 1.0a31 を実行するデモ も用意しています。
仕組みが完全に理解できたわけではありませんが、それができ次第、Datasette Lite 自体のアップグレードを計画しています。
Tags: javascript, python, datasette, asgi, service-workers, pyodide, datasette-lite, 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 を組み合わせた実装の詳細を解説し、実際に動作するサンプルプロジェクトの作成方法について取り上げます。また、セキュリティ上の考慮事項や、大規模なデータ処理における限界についても議論する予定です。
原文を表示
Research: Running Python ASGI apps in the browser via Pyodide + a service worker
Datasette Lite is my version of Datasette that runs entirely in the browser using Pyodide in WebAssembly.
When I first built it four years ago I used Web Workers and code that intercepts navigation operations and fetches the generated HTML by running the Python app.
This worked, but had the disadvantage that any JavaScript in `` tags would not be executed - breaking some Datasette functionality and a whole lot of Datasette plugins.
This morning I set Claude Opus 4.8 the task (in Claude Code for web) of figuring out how to run Python ASGI apps in Pyodide using Service Workers instead, and it seems to work! Here's a basic ASGI FastCGI demo and here's a demo that runs Datasette 1.0a31.
I'm still getting my head around exactly how it works, but once I've done that I plan to upgrade Datasette Lite itself.
Tags: javascript, python, datasette, asgi, service-workers, pyodide, datasette-lite, claude-code
関連記事
WebAssemblyとGifsicleを使用したGIF最適化ツール
著者がオンライン記事に含めるアニメーションGIFのファイルサイズを削減するために、WebAssemblyとGifsicleを組み合わせた最適化ツールを開発した。
マイクロPython WASM 0.1a2 のリリース
Simon Willison がマイクロPython の WebAssembly 版である「micropython-wasm」のバージョン 0.1a2 を公開した。
MicroPython と WASM を用いたサンドボックス環境での Python コード実行
Simon Willison は、コード実行のサンドボックス環境を実現する新アルファパッケージ「micropython-wasm」を公開し、Datasette Agent のプラグインとして利用を開始した。
今日のまとめ
AI日報で今日の重要ニュースをまとめ読み