Webブラウザ上にNode.jsを実装、Webブラウザ上のサーバサイドでNext.jsやVite、Astroなどが実行可能な「Sandpack 2.0」が登場
今回は「Webブラウザ上にNode.jsを実装、Webブラウザ上のサーバサイドでNext.jsやVite、Astroなどが実行可能な「Sandpack 2.0」が登場」についてご紹介します。
関連ワード （動作、注意、複雑等） についても参考にしながら、ぜひ本記事について議論していってくださいね。
本記事は、Publickey様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。
クラウド上でマイクロVMベースのオンライン開発環境などを提供するCodeSandboxは、Webブラウザ上で抽象化したNode.jsを実装しWebブラウザ上にJavaScriptのサーバサイド環境を作り出すことで、WebブラウザだけでNext.jsやAstroなどを実行可能にする新しいソフトウェア「Sandpack 2.0」を発表しました。
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など
Introducing Sandpack 2.0 and Nodebox, a Node.js runtime for any browser.
Run Node.js in any browser, any device
Vite, Next.js, Astro & more
Super fast, with a Rust-based transpilerHere’s why we believe this is HUGEhttps://t.co/dZQ5hzK0Am pic.twitter.com/jJJqqcUJYM
— CodeSandbox (@codesandbox) February 16, 2023
もともと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もオープンソースではありません）が、将来的にオープンソース化できるかどうか引き続き検討していくとのことです。