サーバサイドを含むWordPressのフルスタックをWebAssembly化した「In-Browser WordPress」、WordPressのコア開発チームとGoogle Chromeの開発チームが紹介

PHPやSQLiteなどのサーバサイドを含むWordPressのバックエンドをWebAssembly化し、WordPressのフルスタックをWebブラウザ上で実行する「In-Browser WordPress」が、「WordPress Playground」で公開されています。

これは昨年（2022年）9月にWordPressのコア開発チームが開発中であることを明らかにし、今年1月頃にWordPress Playgroundで公開が始まった、サーバサイドを含むWordPressの試験的なフルスタック実装です。

参考：WordPressのコア開発チーム、WordPressをWebブラウザで実行する「Client-side WebAssembly WordPress」を開発中

「WordPress Playground」でアクセスすると、Webブラウザ上で「In-Browser WordPress」が実行されます。

見た目は完全に普通のWordPressですが、PHPとデータベースのSQLiteも含めてWebブラウザ上で実行されているため、外部への公開を気にすることなく自由にWordPressの変更やカスタマイズを試すことができ、画面をリロードすればすぐに初期状態に戻すことができます。

PHPのバージョンとWordPressのバージョンを任意に入れ替える設定も可能になっています。

また、Webブラウザ上で実行されているPHPランタイムはWordPress専用ではなく、あくまで通常のPHPランタイムをWebAssembly化しているため、PHPのアプリケーションを書けばそのまま実行できるとのことです。

このIn-Browser WordPressを紹介するブログ記事「Build in-browser WordPress experiences with WordPress Playground and WebAssembly」をWordPressのコア開発チームとGoogle Chromeの開発チームのメンバーが公開しています。

Build in-browser WordPress experiences with WordPress Playground and WebAssembly!https://t.co/8VORT4VstI

The full(!) WordPress powered by PHP running solely in the browser with WebAssembly. Learn how @adamzielin pulled this off!#WordPress #Wasm #WebAssembly #PHP

— Chrome Developers (@ChromiumDev) April 12, 2023

Webブラウザ上でフルスタックのWordPressが動作する仕組み

PHPランタイムをWebブラウザ上で実行可能にするWebAssembly化においては、単純にC言語で書かれたPHPランタイムをEmScriptenでWebAssembly化しただけではJavaScriptとの連携が容易ではないため、 TypeScriptで記述した「JavaScript PHP class」および、これとやり取りする「dedicated PHP API module」をC言語で記述し、追加してあるとのことです。

さらにWordPressのデフォルトで対応しているMySQLデータベースを、Webブラウザ上で実行可能なWebAssembly版SQLiteに変更するために、PHP側にはSQLiteドライバを追加し、WordPress側には「SQLite Database Integration」プラグインを追加。

これによりWordPressからMySQLに対するクエリをプラグインでSQLiteへのクエリに変換し、PHPのSQLドライバで接続したSQLiteデータベースにアクセスできるようにしています。

参考：SQLiteの正式なWebAssembly版「SQLite3 WASM/JS」が登場

WordPressを動かすうえで最も重要なサーバであるWebサーバについては、Service WorkerがWebサーバに対するすべてのリクエストをインターセプトし、ワーカースレッドでリクエストを処理、レスポンスを返していると説明されています。

将来的にはWebブラウザ上で開発し、サーバへデプロイも

ブログ記事では、Webブラウザ上でWebアプリケーションのフルスタックが実行できるこのような仕組みを応用することで、将来的にはWebブラウザ上で複数の開発者がコラボレーションするようなフルスタックのWebアプリケーション開発が可能になると展望が語られています。

そうなると、開発環境としてのサーバのセットアップも不要で、すぐにWebブラウザ上でWebAssembly化した開発環境をロードして作業を行い、完成したらワンクリックでアプリケーションをサーバ環境へデプロイする、といったこともできるようになるかもしれません。

WordPress PlaygroundのソースコードはGitHubで公開されています。