オープンソース / Apache-2.0
ブラウザの中で動く、
小さな仮想マシン。
開発者の PC でしていた開発を、ブラウザのタブの中で。
npm install も npm run dev も、ふだんは開発者の PC で動かすものです。OpenVessel は、ファイルシステム・プロセス・シェルを持つ小さな仮想マシンとして、Node.js と npm をブラウザのタブの中で動かします。URL を開くだけで開発環境がそろい、PC にもサーバーにも、何も入れずに済みます。Apache License 2.0 のオープンソースで、無料で使えます。
デモは Chromium 系のブラウザ（Chrome・Edge など）で開いてください。
$ node -v v22.23.4 $ npm install resolved from registry.npmjs.org (network gate: npm) esbuild, rolldown → WebAssembly builds $ npm run dev astro ready ┃ Local http://localhost:4321/ (virtual port) → preview iframe via service worker $ ▍
PC の開発環境との比較
Node.js のプロジェクトを動かすには、ふつうは開発者の PC に Node.js を入れ、版をそろえ、依存を入れてから開発サーバーを起動します。OpenVessel では、その一式がブラウザのタブの中にあります。
- 01 Node.js を入れるプロジェクトに合う版をそろえる（nvm など）
- 02 ソースを取るgit clone
- 03 依存を入れるnpm install（ネイティブのモジュールは OS ごとにビルド）
- 04 開発サーバーを起動するnpm run dev
- 05 ブラウザで開くlocalhost:4321（PC のポートを開ける）
- ・OS・Node.js の版・設定の違いで、動いたり動かなかったりする
- ・ネイティブのモジュールのビルドに、OS ごとの道具が要る
- ・人に渡すには、同じ手順をもう一度たどってもらう
- 01 URL を開くNode.js・npm・シェルがタブの中で立ち上がる
- 02 依存を入れるnpm install（ネイティブのモジュールは WebAssembly 版）
- 03 開発サーバーを起動するnpm run dev
- 04 同じ画面でプレビュー仮想ポートにつながる iframe。PC のポートは開けない
- ・Chromium 系のブラウザがあれば、どの PC でも同じ環境
- ・ネイティブのモジュールは WebAssembly 版で、OS を問わない
- ・URL を渡せば、同じ環境を渡せる
タブの中に開発環境があると
環境構築
環境構築がいらない
Node.js の導入や版の管理なしに、URL を開くだけで開発環境がそろいます。手元の OS や設定の違いにも左右されません。
再現性
開くたびに同じ環境
開発環境はタブの中で毎回まっさらに立ち上がり、閉じれば消えます。教材や検証で、全員が同じ状態から始められます。
実行場所
利用者の手元で動く
npm install もビルドも開発サーバーも、利用者のブラウザが動かします。開発環境を提供する側が、利用者ごとのサーバーやコンテナを用意する必要はありません。
ライセンス（Apache License 2.0）
できること
- ・商用の製品・サービスへの組み込み
- ・改変、改変したものの配布
- ・ソースを公開しない形での利用
- ・含まれる特許の利用（ライセンスによる許諾）
守ること
- ・配布するときに、ライセンスの写しと NOTICE を付ける
- ・改変したファイルには、変えたことを書く
- ・「OpenVessel」などの名前や商標は、許諾の範囲の外
- ・無保証（ソフトウェアはそのままの形で提供）
ライセンスの全文は apache.org とリポジトリの LICENSE にあります。上は要点で、正式な条件はライセンスの本文です。
ユースケース
製品への組み込み
CMS・オンラインのエディタ・AI の開発ツールの中に、本物の npm と Node.js が動く開発環境を組み込みます。編集した内容は、その場でビルドしてプレビューできます。
チュートリアル・ドキュメント
読者ひとりずつに、隔離された開発環境を用意します。環境構築の説明を飛ばして、本物のコマンドを試してもらえます。
テンプレート・プルリクエストのプレビュー
変更したサイトやテンプレートを、その場でビルドして見せます。確かめるためにサーバーを用意する必要がありません。
開発環境の配布
新しく加わった人や社外の協力者に、URL だけで同じ開発環境を渡せます。
アーキテクチャの要点
01
Node.js の lib/ をそのまま実行
Node.js v22 の JavaScript の部分（lib/）を、書き換えずに動かします。作り直したのは、Node が C++ で書いている部分（internalBinding）だけです。エラーの文言・スタックトレース・イベントの順番が Node と同じになり、新しい Node への追従もしやすくなります。
02
ネイティブモジュールの WebAssembly 化
esbuild・rollup・rolldown・lightningcss・sharp など、ネイティブのバイナリを配るパッケージは WebAssembly 版を入れます。無いものには、同じプロジェクトを WebAssembly にコンパイルした互換パッケージを用意します。
03
仮想ポート
開発サーバーは、カーネルの中の仮想ポートで待ち受けます。プレビューは Service Worker を通してそこにつながるので、手元のマシンにもネットワークにも、ポートは1つも開きません。
04
オリジン分離
埋め込む側のページ・ランタイム・プレビューを別のオリジンに置きます。プレビューの中のコードが、ランタイムや埋め込む側のページに触れられません。
OpenVessel はクリーンルームで作っています。ほかのブラウザ内のランタイムのソースは見ていません。