Webブラウザ上にNode.jsを実装、Webブラウザ上のサーバサイドでNext.jsやVite、Astroなどが実行可能な「Sandpack 2.0」が登場

2023年2月20日

クラウド上でマイクロVMベースのオンライン開発環境などを提供するCodeSandboxは、Webブラウザ上で抽象化したNode.jsを実装しWebブラウザ上にJavaScriptのサーバサイド環境を作り出すことで、WebブラウザだけでNext.jsやAstroなどを実行可能にする新しいソフトウェア「Sandpack 2.0」を発表しました

fig

WindowsやMacなどのデスクトップPC用のWebブラウザだけでなく、iOS上のSafariでもNode.jsが実行可能。ただし現時点でのiOS版Safariへの対応は、メモリリークなどが発生するためβ版だと説明されています。

先週、StackBlitzからはWebブラウザ上で実行できるWebAssemblyベースのNode.js環境である「WebContainer」のAPIが提供開始されるなど、Webブラウザ上でNode.jsを実行するソフトウェア開発が活発化している印象です。

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

もともとSandpack 1.0は、Webブラウザ上でコードエディタを実装し、そのエディタ上で入力されたJavaScriptのコードを即座に実行して結果をリアルタイムにプレビューする能力を備えた、Webブラウザ上でWebアプリケーション開発環境を実装するためのコンポーネントを揃えたソフトウェアでした。

そのSandpack 1.0をベースに、さらにNode.jsの機能を組み込むことでNext.jsやAstro、ViteといったNode.jsを基盤としたサーバサイド向けのフレームワークもWebブラウザ上で実行可能にしたのが、今回発表されたSandpack 2.0です。

Sandpack 2.0を開発した開発者はブログで、Sandpack 2.0によって「 disposable server-side instances」(ディスポーザブル サーバサイドインスタンス:使い捨てできるサーバサイドインスタンス)が実現したと説明しています。

実際、Sandpack 2.0ならばWebブラウザの画面を再描画するだけですぐにまっさらなサーバサイド環境に戻せるのです。

Node.jsを高度に抽象化したNodebox

Webブラウザ上に実装されるNode.jsは「Nodebox」と名付けられており、正確には高度に抽象化されたNode.jsだと、記事「Announcing Sandpack 2.0 and a Node.js runtime for any browser」で次のように説明されています。

Nodebox is a high-level abstraction of Node.js. That means it doesn’t implement some of the small details of Node.js, but we made various tweaks to make it compatible with every browser. So, Nodebox aims for application compatibility, not Node.js feature parity.

NodeboxはNode.jsを高度に抽象化したものです。つまり、Node.jsの細かい部分は実装していませんが、あらゆるWebブラウザとの互換性を持たせるためにさまざまな工夫を凝らしています。Nodeboxは、Node.jsの機能の等価性ではなく、アプリケーションの互換性を目指しているのです。

現時点でNodeboxはNext.js、Vite、Astroに対応しており、それ以外のフレームワークなどにも対応を広げていくとのこと。

We’re shipping Nodebox with out-of-the-box support for Next.js, Vite and Astro, but we’re growing to support just about any server-side framework you can imagine. However, bear in mind it can’t run napi or any other low-level C++/Rust package you can use in Node.js—only WebAssembly and JavaScript modules. Postgres, MongoDB and MySQL are also currently not supported because of the lack of raw socket support in browsers.

Nodeboxは現時点でNext.js、Vite、Astroがすぐに使える状態で提供されますが、想像可能なあらゆるサーバサイドフレームワークをサポートできるように開発を進めています。ただし、NAPI(Node-API)やNode.jsで使える低レベルのC++/Rustパッケージは実行できず、対応するのはWebAssemblyとJavaScriptモジュールだけであることに注意してください。Postgres、MongoDB、MySQL も、WebブラウザでRaw Socketのサポートがないため、現在のところサポートされていません。

Sandpack 2.0とWebContainerの違いは?

前述の通り、Webブラウザ上でNode.js環境を実現する実装としては、すでにStackBlitzのWebContainerがあります。

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

記事「Announcing Sandpack 2.0 and a Node.js runtime for any browser」えは、このWebContainerとSandpack 2.0の違いについても説明があります。

それによると、WebContainerは最新のWebブラウザ技術を使っているためSafariでは実行できない一方で、Nodeboxは最新の技術を使わず、最小限の設定でiOSのSafariを含むどのWebブラウザでも動作するように作られているとしています。

それにより、Nodeboxではスレッドに応じて多くのメモリ消費があること、Node APIの完全な互換性は得られないといった課題がありつつも、小さなプロジェクトやサンプルの実行には非常に適しているとのことです。

マイクロVMでWebブラウザの制限を取り払う

CodeSandboxは今後、SandpackでマイクロVMを使えるようにする予定だとしています。これによりWebブラウザの制限が取り払われ、どんなプログラミング言語や複雑なプロジェクトでもWebブラウザで実行可能になることが期待されます。

また、現時点ではさまざまな理由でNodeboxはオープンソースとなっていません(ちなみにWebContainerもオープンソースではありません)が、将来的にオープンソース化できるかどうか引き続き検討していくとのことです。

あわせて読みたい

JavaScript Web技術 開発ツール Node.js




タグクラウド

クラウド
AWS / Azure / Google Cloud
クラウドネイティブ / サーバレス
クラウドのシェア / クラウドの障害

コンテナ型仮想化

プログラミング言語
JavaScript / Java / .NET
WebAssembly / Web標準
開発ツール / テスト・品質

アジャイル開発 / スクラム / DevOps

データベース / 機械学習・AI
RDB / NoSQL

ネットワーク / セキュリティ
HTTP / QUIC

OS / Windows / Linux / 仮想化
サーバ / ストレージ / ハードウェア

ITエンジニアの給与・年収 / 働き方

殿堂入り / おもしろ / 編集後記

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed

最新記事10本