Vercel発のWeb向け爆速ターミナル「wterm」

ブラウザ上で動くターミナルを実装しようとしたとき、我々エンジニアには長らく「xterm.js」という強大な一択しか存在しなかった。VS Codeの統合ターミナルを支え、数々のクラウドIDEで採用されてきた偉大なライブラリだ。しかし、xterm.jsが極限の描画パフォーマンスを追求してCanvasやWebGLへ進化していく過程で、フロントエンド界隈はあるジレンマを抱えることになった。「ブラウザのネイティブ機能との乖離」である。

DOMではなく巨大なキャンバスにピクセルを描画するようになった結果、Ctrl+Fによるページ内検索、自然なテキスト選択、そしてスクリーンリーダーなどのアクセシビリティ対応を、JavaScriptを使って自前で再発明（あるいはハック）しなければならなくなった。本来、Webブラウザの恩恵として無料で手に入るはずの機能を捨てることへの違和感を、一度でもWebターミナルを組み込んだことがある開発者なら感じたはずだ。

DOMへの回帰と、Zigによる最適化

そんなWebターミナルの歴史に、鋭い一石を投じる実験的なリポジトリが現れた。VercelのLabsチームが公開した「wterm」だ。

wtermの設計思想は極めて明快で美しい。描画には純粋なDOMを使い、最も重いVT100/VT220エスケープシーケンスのパース処理はZigで書き上げてWebAssembly（WASM）にコンパイルする。このアプローチがいかにパラダイムシフトか、これまでの常識と比較してみたい。

Canvasを捨ててDOMに戻れば、当然DOMツリーの更新による再描画コストが跳ね上がる。そこでwtermは、変更された行だけをrequestAnimationFrameで更新する「Dirty-row tracking」を採用した。描画の無駄を徹底的に省きつつ、複雑なターミナルの状態管理やパース処理をたった12KBの極小WASMに押し込むことで、DOMベースでありながらニアネイティブな速度を叩き出している。

UIコンポーネントとしてのターミナル

なぜ今、Vercelが新しいターミナルを作ったのか。彼らが展開するv0.devなどのAIアシスタントUIや、エッジコンピューティングのビルドログのリアルタイム表示を想像すれば腑に落ちる。現代のWebにおいて、ターミナルはもはや「黒い画面に向かうエンジニアのためだけの独立したツール」ではなく、Reactなどのコンポーネントツリーに自然に溶け込む「UIの一つ」になりつつあるのだ。

そのため、モダンフロントエンドとの親和性も初めから考慮されている。@wterm/reactパッケージを使えば、驚くほどシンプルにターミナルを埋め込むことが可能だ。

import { useTerminal } from '@wterm/react';

function TerminalUI() {
  const { ref } = useTerminal({
    onData: (data) => {
      // PTYバックエンドやWebSocketへ入力を送信
      console.log('Input:', data);
    }
  });

  return <div ref={ref} className="w-full h-96" />;
}

たったこれだけのコードで、24ビットカラーに対応し、テキスト選択やブラウザの「検索」が完璧に動作し、スクリーンリーダーも読み上げてくれるターミナルが画面に出現する。さらに面白いのは、ターミナル内でMarkdownをレンダリングする@wterm/markdownや、ブラウザ内で完結するBashシェル@wterm/just-bashといったパッケージ群が最初から用意されている点だ。AIエージェントの出力をリッチに表示させるための布石と見るのが自然だろう。

技術の振り子はまた戻る

Web技術の歴史を振り返ると、進化は時に振り子のように揺れ動く。パフォーマンスの限界を突破するためにDOMからCanvasへと逃げたターミナルが、ZigとWASMという現代の強力な武器を手に入れて、再びブラウザのネイティブな強みであるDOMへと帰ってきた。

不要なレイヤーを削ぎ落とし、適材適所の技術を掛け合わせる。wtermは、単なるターミナルエミュレータの枠を超えて、今後のWebコンポーネント設計におけるひとつの美しい最適解を見せてくれている。

参考リポジトリ: vercel-labs/wterm

Photo by Growtika on Unsplash