Node.jsがブラウザ上で動作する「WebContainers」のAPIを公開 StackBlitz：WASMベース、商用サポートも提供

StackBlitzは「WebContainer API」を公開した。開発者はWebContainer APIを使用することで、Node.jsを完全にブラウザ内で実行できる。ブラウザ上でHTTPサーバを立ち上げ、プレビューURLを他のユーザーと共有することもできる。

[＠IT]

　StackBlitzは2023年2月14日（米国時間）、「WebContainer API」を公開したと発表した。開発者はWebContainer APIを使用することで、Node.jsを完全にブラウザ内で実行できる。WebAssemblyベースのマイクロOSである「WebContainers」上に独自のユーザーアプリケーションを構築することもできる。

WebContainersとは

　StackBlitzが2021年に発表したWebContainersは、ブラウザのタブ内でローカルにNode.jsサーバを起動できるように設計されている。従来はユーザーコードの実行にクラウド仮想マシン（VM）を必要としていたアプリケーションを、WebContainersでは完全にクライアントサイドで実行でき、レガシーなクラウドVMに比べて多くの利点があると、StackBlitzは説明している。

フルスタックのNode.js環境が即座に利用可能

　WebContainersへのアクセスを可能にするWebContainer APIにより、開発者はWebContainers上に独自のアプリケーションを柔軟に構築できる。WebContainer APIは、StackBlitzのコア製品と同様に、オープンソースのユースケースでは無料で利用でき、企業ユースでは、StackBlitzからサポートとライセンスが提供される。

WebContainer APIの使用例

　StackBlitzは、WebContainer APIのこれまでの使用例として、以下を紹介している。

• オープンソースJavaScriptフレームワーク「Svelte」のインタラクティブなチュートリアル：SvelteKitの使い方をステップ・バイ・ステップで学べる
• StackBlitzの本番グレードのWeb IDE「Codeflow IDE」：コードエディタ「Visual Studio Code」をベースにしており、gitコマンド、デスクトップ拡張、ターミナルが使用できるNode.js開発サーバをサポートしている
• AIアプリケーション：OpenAIの統合機能を利用して、ブラウザ内で動作するアプリケーションを生成できる
• 新タイプのローコード／ノーコード環境：変更内容をリアルタイムでプレビューできるStackBlitzのパブリッシングツール「Web Publisher」など

Codeflow IDE（提供：StackBlitz）《クリックで動画を再生》

WebContainer APIを利用したChatGPT（提供：StackBlitz）《クリックで動画を再生》

WebContainer APIの主な機能

ブラウザ内ファイルシステム

　WebContainersは、メモリに保存された一時的な仮想ファイルシステムで起動する。プログラムによってファイルやディレクトリをロードし、それらに対して標準的なファイルシステム操作を行える。

開発サーバ

　WebContainer内でHTTPサーバをオンデマンドで起動し、プレビューURLを受け取って、ユーザーと共有したり、アプリ内でiframeを使って直接表示したりできる。仮想化されたTCPネットワークスタックがブラウザのServiceWorker APIにマッピングされ、完全にローカルで動作するので、ユーザーがインターネット接続を失った場合でも、サーバは動作し続ける。

Node.jsのコマンドライン

　Node.jsのコマンドは、WebContainerに直接渡して、ページロード時に実行したり、アプリケーション内でユーザー操作によってトリガーしたりできる。ローカル開発環境と同じように、パッケージをnpmでインストールしたり、新しいNodeサーバを起動したり、アプリケーションをスキャフォールドしたりできる。