Webブラウザ上でWebAssemblyベースのNode.js環境を実現する「WebContainer」がAPI提供開始。ブラウザ内ファイルシステム、HTTPサーバ、Node.js CLIなど

WebAssemblyを用いてWebブラウザ上でNode.js環境を実現する「WebContainer」などを提供するStackBlitzは、WebContainerにアクセスできるAPIの提供を開始したと発表しました。

Today, after years of battle testing by millions of developers, in collaboration with browser vendors:

WebContainer API is now available to everyone.

Start building the next generation of interactive coding experiences at https://t.co/l7QZKdW6ll https://t.co/TCh0grOgRJ

— StackBlitz (@stackblitz) February 14, 2023

WebContainerはWebブラウザ上でNode.js環境を実現

WebContainerはStackBlitzが開発し提供している、Webブラウザ上で実現されるWebAssemblyベースのNode.js環境です（名前に「Container」と付いていますが。Dockerなどのコンテナ技術とは関係ありません）。

Node.jsが備えるJavaScriptランタイムの機能とHTTPサーバの機能などがWebブラウザ上で提供されるため、WebContainerの環境上でNode.jsベースのツールチェーンの実行や、Webアプリケーションの開発、テスト、実行などを外部のサーバに依存することなく、すべてWebブラウザ上で完結できるようになります。

StackBlitzは、例えばサーバサイドレンダリングのためのフレームワークであるNext.jsの実行や、GraphQLの実装などがWebブラウザ上で可能だとしています。

そしてStackBlitzはこのWebContainerをWebブラウザ上の高度なフレームワークとして位置づけ、同社自身がWebContainer上でVisual Studio Codeのような高度な機能を備えたコードエディタの「Codeflow IDE」や、記事執筆者向けにリアルタイムのプレビュー機能を備えた「Web Publisher」などを開発、提供しています。

下記は2021年5月のWebContainer発表のときのブログです。

WebContainerに対するAPIが提供開始

今回StackBlitzが発表したのは、このWebContainerに対してアクセス可能なAPIが公開され提供開始された、ということです。

主な機能として、WebContainer内部でメモリ上の構築された仮想ファイルシステムにアクセスするためのIn-Browser Filesystem API」、WebContainer内でHTTPサーバをオンデマンドで起動するAPI、Node.jsのコマンドラインなどがあります。

Node.jsのコマンドラインでは、サーバの起動、npmのインストール、アプリケーションのscaffoldの作成などの操作が、ローカルにあるサーバのようにできるとのことです。

APIが提供されたことで、WebContainerをプラットフォームにしたさまざまなアプリケーションの構築が可能になります。StackBlitzによると、SvelteのインタラクティブなチュートリアルはWebContainerを用いて開発されているとしており、ほかにもWebブラウザ内で実行されるChatGPTのようなAIアプリケーション、リッチな機能と表現を提供するローコード／ノーコード開発環境などが例に挙がっていました。

WebContainer APIや、その開発のためのCodeflowエディタなどはオープンソースではなくStackBlitzのプロダクトとして提供されていますが、個人利用やGitHub上でのパブリックリポジトリを利用した開発は無料となっています。