Vercelが2026年にオープンソース公開した「wterm」（ダブターム）は、Webブラウザ上で動作するターミナルエミュレータです。コア部分をZig言語で実装し、WebAssembly（WASM）にコンパイルすることでネイティブに近いパフォーマンスをブラウザ内で実現しています。開発者はJavaScriptやReactを使って既存のWebアプリケーションにターミナルUIを組み込むことができ、クラウドIDEからドキュメントサイトのインタラクティブデモまで幅広い用途で活用が期待されています。
wtermとは何か — Vercelが公開したブラウザ内ターミナル
「wterm」は、Webブラウザ上で完結して動作するターミナルエミュレータです。Vercelが開発し、オープンソースとして公開しました。従来、ターミナル機能をWebページに組み込むためにはxterm.jsなどのJavaScriptライブラリが主流でしたが、wtermはコア部分をZig言語で実装し、WebAssemblyにコンパイルするという異色のアプローチを採用しています。
DOMベースのレンダリングを採用しており、CanvasやWebGLを使わずともWebページのDOMとしてターミナルが描画されます。これにより、CSSでのカスタマイズやブラウザのアクセシビリティ機能との互換性が高く、既存のWebUIとの統合が容易になっています。
Vercelはこのプロジェクトを完全にオープンソースとして公開しており、GitHubからコードを取得して自分のプロジェクトに組み込んだり、改善に貢献したりすることができます。フロントエンドエンジニアがターミナル機能を手軽にWebアプリに統合できる環境を整えることで、ブラウザベースの開発ツールエコシステムの拡大を後押ししています。
ZigとWebAssemblyを選んだ技術的な理由
wtermがZig言語とWebAssemblyを採用した背景には、パフォーマンスと軽量性への強いこだわりがあります。
Zig言語の特性は、C言語に近い低レベル制御と安全性の両立にあります。ガベージコレクション（GC）を持たず、プログラマがメモリ管理を直接制御できるため、実行時のオーバーヘッドが極めて小さいのが特徴です。また、WebAssemblyターゲットへのコンパイルが可能であり、生成されるWASMバイナリのサイズも最小限に抑えられます。
WebAssembly（WASM）は、C・C++・Rust・Zigなどのシステム言語から生成できるバイナリ形式で、ブラウザ上でネイティブに近いパフォーマンスを発揮します。JavaScriptよりも高速な演算が可能であり、ターミナルエミュレータのような入力・描画を頻繁に行うアプリケーションでは特に効果を発揮します。
JavaScriptのみで実装した場合と比べたときの主な優位点は以下の通りです。
- GCポーズが存在しないため、キー入力や描画のレイテンシが安定する
- バイナリサイズが小さく、ページの初期ロードへの影響を最小化できる
- ZigはWASMターゲットのサポートが充実しており、ビルドチェーンが比較的シンプル
- 低レベルの文字コード処理・エスケープシーケンス解析をZigで効率的に実装できる
なおDOMベースのレンダリングを採択したことにより、CanvasやWebGLが不要となりCSSによるスタイリングが素直に機能します。WASMでロジックを処理し、結果をDOMへ反映するアーキテクチャは、パフォーマンスとWebとの親和性を両立する設計判断と言えます。
※なお本記事時点では、Zig言語はバージョン0.14系がリリースされており、WebAssemblyサポートは公式に提供されています。
wtermの主要機能を詳しく見る
wtermはブラウザ内ターミナルとして実用的に使えるよう、多くの機能が実装されています。
UIに関する機能
テキストの選択・コピー＆ペーストはブラウザのネイティブ操作と一貫した動作をします。ブラウザの検索機能（Ctrl+F）との互換性も持ち、ターミナル出力内のテキストを検索することができます。
CSSによるテーマカスタマイズにも対応しており、プロダクトのデザインシステムに合わせた配色・フォントの調整が可能です。24ビットカラーをサポートしているため、モダンなCLIツールが出力するカラフルなUIも正確に表示されます。また、ウィンドウサイズの変更に合わせて自動でリサイズするオートリサイズ機能も備えています。
シェル・接続に関する機能
WebSocket経由でリモートシェルへ接続できます。これにより、バックエンドのサーバーやコンテナ上で動作するシェルをブラウザから操作することが可能です。スクロールバックヒストリー機能で過去の出力を遡れるほか、Alternate Screen Bufferにも対応しており、vim・less・htopといったターミナルUIアプリケーションがページを占有して正常に動作します。
これらの機能を合わせると、一般的なターミナルエミュレータとほぼ遜色のない操作体験をブラウザ内で提供できることがわかります。
Webページへのwtermの埋め込み方法
wtermは公式ドキュメントでバニラJavaScriptとReactの両方向けの埋め込みサンプルを提供しています。
バニラJavaScriptでの基本的な使い方
npmからwtermパッケージをインストールし、ターミナルをマウントするHTML要素を用意します。その後、JavaScriptでインスタンスを生成して要素にアタッチするだけで、ブラウザ内にターミナルが表示されます。WebSocketのURLを渡すことで、リモートシェルへの接続も同時に設定できます。
CSSを使って背景色・文字色・フォントサイズを変更することで、プロダクトのUIに馴染むデザインへのカスタマイズも容易です。
Reactコンポーネントとしての使い方
Reactプロジェクトでは、wtermをラップしたコンポーネントを作成してuseEffect内でインスタンスを生成・マウントするパターンが推奨されています。コンポーネントのunmount時にはdispose処理を呼び出してメモリリークを防ぎます。
既存のReactアプリケーションへの統合がシンプルに行える設計であり、たとえばNext.jsベースのVercel製品やカスタムSaaSに組み込む際も少ないコード変更で対応できます。
どんな場面で使えるか — wtermのユースケース
wtermが活躍できるユースケースは多岐にわたります。
クラウドIDEやWebベースの開発環境
VS Code for WebやGitHub Codespacesのようなブラウザベースの開発環境では、統合ターミナルは必須機能です。wtermのような軽量で高性能なターミナルコンポーネントは、こうした開発ツールの構築に適しています。Vercel自身のプラットフォームへの統合も自然な流れと言えるでしょう。
ドキュメントサイトでのインタラクティブデモ
CLIツールやAPIのドキュメントサイトにwtermを組み込むことで、読者がその場でコマンドを実行して動作を確認できるインタラクティブな学習体験を提供できます。従来は静的なコードブロックで示していた内容を、実際に動くデモとして見せられます。
SaaS製品の管理コンソール
インフラ管理やDevOpsツールのWebコンソールにターミナルを組み込むことで、ユーザーはブラウザを離れることなくサーバーやコンテナへのSSH相当の操作が行えます。Kubernetesのpod execや、クラウドシェルのような機能を自社SaaSに追加する際に有用です。
教育・チュートリアルプラットフォーム
プログラミング学習サービスや企業内トレーニングシステムにおいて、受講者が実際にコマンドを打ちながら学べる環境をブラウザだけで実現できます。環境構築不要で始められる体験は、学習のハードルを大きく下げます。
CI/CDパイプラインのログ表示
ビルドやデプロイのログをリアルタイムでターミナル風に表示するUIを実装したい場合にも、wtermのWebSocket連携機能は役立ちます。ストリーミングログをターミナルらしい見た目で表示することで、エンジニアにとって馴染みやすいUIを提供できます。
Vercelがwtermをオープンソース公開した意図
Vercelがwtermを単なる社内ツールとして使わずオープンソース公開した背景には、いくつかの戦略的な意図が見えます。
第一に、ブラウザをフルスタック開発環境にするというビジョンの実現です。Vercelはフロントエンドインフラのプラットフォームとして、開発者がブラウザ上でより多くの操作を完結できる世界を目指しています。ターミナル機能の提供はその重要なピースであり、オープンソース化によって広く採用されることでそのビジョンが加速します。
第二に、次世代Web技術への先行投資です。ZigとWebAssemblyは、JavaScriptエコシステムの次の層として注目されている技術です。Vercelがこれらを採用してプロダクションレベルのツールを実装したことは、技術コミュニティへの強いメッセージとなります。エンジニアの興味を引き、優秀な人材採用や技術的ブランディングにも貢献します。
第三に、コミュニティとのオープンな関係構築です。オープンソース公開により、外部の開発者がバグ修正・機能追加・ドキュメント改善に貢献できます。Vercelが全ての開発を担わずとも、コミュニティの力でプロダクトが成熟していく循環が生まれます。
Webフロントエンドエンジニアにとってwtermは、ターミナルUIをWebアプリに組み込む際の有力な選択肢となります。またZigやWebAssemblyに興味を持つエンジニアにとっては、実際のプロダクションコードとして参照できる貴重なオープンソースプロジェクトでもあります。今後のアップデートや採用事例にも注目していきたいところです。
