Node.jsがブラウザ上で動作する「WebContainers」のAPIを公開 StackBlitz:WASMベース、商用サポートも提供
StackBlitzは「WebContainer API」を公開した。開発者はWebContainer APIを使用することで、Node.jsを完全にブラウザ内で実行できる。ブラウザ上でHTTPサーバを立ち上げ、プレビューURLを他のユーザーと共有することもできる。
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」など
WebContainer APIの主な機能
ブラウザ内ファイルシステム
WebContainersは、メモリに保存された一時的な仮想ファイルシステムで起動する。プログラムによってファイルやディレクトリをロードし、それらに対して標準的なファイルシステム操作を行える。
開発サーバ
WebContainer内でHTTPサーバをオンデマンドで起動し、プレビューURLを受け取って、ユーザーと共有したり、アプリ内でiframeを使って直接表示したりできる。仮想化されたTCPネットワークスタックがブラウザのServiceWorker APIにマッピングされ、完全にローカルで動作するので、ユーザーがインターネット接続を失った場合でも、サーバは動作し続ける。
Node.jsのコマンドライン
Node.jsのコマンドは、WebContainerに直接渡して、ページロード時に実行したり、アプリケーション内でユーザー操作によってトリガーしたりできる。ローカル開発環境と同じように、パッケージをnpmでインストールしたり、新しいNodeサーバを起動したり、アプリケーションをスキャフォールドしたりできる。
Copyright © ITmedia, Inc. All Rights Reserved.
関連記事
利用者が増え続ける「WebAssembly」、ブラウザ実行できる4つ目の言語の魅力とは
ソフトウェアコンサルティング会社のScott Logicは、「WebAssembly」の使用状況に関する2回目の年次調査を実施、結果を発表した。WebAssemblyは「HTML」「CSS」「JavaScript」に続き、Webブラウザで実行可能なコードを作成できる4つ目の言語と位置付けられている。スクリプト言語TypeScriptでWebAssembly――「AssemblyScript」を体験する
第2回では、TypeScriptでWebAssemblyプログラムを開発できるAssemblyScriptを紹介します。差異こそありますがTypeScriptの構文を使ってコードを書けるので、フロントエンドに慣れた開発者にとってはWebAssemblyのための入りやすい選択肢と言えます。「WebAssembly」は次世代のJava、Node.jsになる?――「Wasmコンテナ」をKubernetesで動かす
Kubernetesやクラウドネイティブをより便利に利用する技術やツールの概要、使い方を凝縮して紹介する連載。今回は、最近注目されている「WebAssembly」について復習しながら、WebAssemblyのアプリケーションをKubernetesで試す方法を紹介する。