wterm：ZigとWASMで駆動する高速Webベース端末エミュレータ
はじめに
Webアプリケーション内で端末が必要だったことがあるなら—クラウドIDE、リモートシェルダッシュボード、インタラクティブチュートリアルのいずれであっても—wterm は待ち望んでいたツールです。Vercel Labs が開発した wterm は、ZigでコンパイルされたWebAssembly を使用してブラウザ上で動作するフル機能の端末エミュレータです。その小さなフットプリント（コアWASMバイナリは約12 KB）とネイティブに近いパフォーマンスにより、最新のWebスタックに最適です。
wterm が際立つ理由
| 機能 | 利点 |
|---|---|
| Zig + WASM コア | VT100/VT220/xterm エスケープシーケンスのほぼネイティブな解析速度。 |
| プラグイン可能なコア | 超軽量な Zig コア（約12 KB）またはフル機能の libghostty バックエンド（約400 KB）を選択し、完全な VT 準拠を実現します。 |
| DOM レンダリング | 追加ライブラリ不要で、ネイティブなテキスト選択、コピー/ペースト、ブラウザ検索、スクリーンリーダーのサポートを提供します。 |
| フレームワークラッパー | React、Vue 3、そしてバニラ JS API 用のすぐに使えるパッケージを提供します。 |
| テーマ設定 | CSS カスタムプロパティにより、Default、Solarized Dark、Monokai、Light のテーマを瞬時に切り替えられます。 |
| WebSocket トランスポート | バイナリフレーミングと自動再接続を備えたリモート PTY バックエンドに接続します。 |
| 自動リサイズ | ResizeObserver を使用してコンテナサイズの変化に適応します。 |
| スクロールバック & 代替画面 | vim、less、htop などのアプリケーションを完全にサポートします。 |
これらの機能により、wterm はデモ以上の存在となり、あらゆるWebプロジェクトに組み込める本番対応コンポーネントです。
はじめに
前提条件
- Zig 0.16.0以上（WASMコアのビルド用）
- Node.js 20以上
- pnpm 10以上（推奨パッケージマネージャ）
インストール
# Clone the repository
git clone https://github.com/vercel-labs/wterm.git
cd wterm
# Install JavaScript dependencies
pnpm install
WASM バイナリのビルド
zig build # Debug build (default)
zig build -Doptimize=ReleaseSmall # Production‑size build (~12 KB)
wterm.wasm ファイルは web/ ディレクトリに配置され、静的アセットとして配信できます。
すべてのパッケージをビルド
pnpm run build # Compiles @wterm/* packages and bundles examples
様々な環境での wterm の使用方法
1. バニラ JavaScript（DOM レンダラー）
<script type="module">
import { createTerminal } from "https://cdn.jsdelivr.net/npm/@wterm/dom";
const term = createTerminal({ wasmUrl: "/wterm.wasm" });
term.attach(document.getElementById('terminal'));
</script>
<div id="terminal" style="height:400px; width:100%;"></div>
2. React との統合
import { WTermReact } from "@wterm/react";
export default function App() {
return (
<WTermReact
wasmUrl="/wterm.wasm"
className="my-terminal"
onData={data => console.log('User typed:', data)}
/>
);
}
useTerminal フックを使うと、基盤となる PTY とやり取りし、コマンドを送信し、出力を監視できます。
3. Vue 3 コンポーネント
<template>
<WTermVue :wasm-url="'/wterm.wasm'" />
</template>
<script setup>
import { WTermVue } from '@wterm/vue';
</script>
高度な機能
CSS 変数によるテーマ設定
:root {
--wterm-bg: #1e1e1e; /* Background */
--wterm-fg: #d4d4d4; /* Foreground */
--wterm-cursor: #ffcc00; /* Cursor */
}
WebSocket を使ったリモート PTY への接続
import { createTerminal } from '@wterm/core';
const term = createTerminal({
wasmUrl: '/wterm.wasm',
transport: new WebSocketTransport('wss://my-pty-server.example.com')
});
term.attach(document.body);
libghostty バックエンドの使用
完全な VT100/VT220 準拠が必要な場合（例：tmux のような複雑なアプリケーション）、@wterm/ghostty パッケージをインストールします：
pnpm add @wterm/ghostty
ghostty コアを渡します：
import { createTerminal } from '@wterm/core';
import { GhosttyCore } from '@wterm/ghostty';
const term = createTerminal({
core: new GhosttyCore(),
wasmUrl: '/wterm.wasm'
});
実際のユースケース
- クラウド IDE – Gitpod、CodeSandbox、またはカスタム SaaS IDE などのプラットフォームで、組み込みシェルとして wterm を埋め込みます。
- ドキュメント & チュートリアル – ローカル端末を必要とせず、ドキュメント内にライブコマンドラインデモを直接表示します。
- モニタリングダッシュボード – 管理パネル内でリアルタイムログやインタラクティブな CLI ツールを表示します。
- 教育プラットフォーム – 学習者に Linux コマンド学習用のサンドボックスシェルを提供します。
コントリビューション & コミュニティ
wterm は Apache‑2.0 ライセンスのオープンソースです。コントリビューションを歓迎します： - バグ報告 – GitHub で issue を作成してください。 - 機能リクエスト – プルリクエストで機能追加を提案してください。 - ドキュメント – README の改善、サンプル追加、チュートリアル執筆など。
このプロジェクトはエンドツーエンドテストに Playwright（e2e フォルダ）を、全パッケージのユニットテストに Vitest を使用しています。テストスイートの実行は以下のコマンドで簡単です：
pnpm test
結論
wterm は、ネイティブ端末体験と最新の Web アプリケーションの間のギャップを埋めます。Zig ベースの WASM コアは高速性を提供し、vanilla、React、Vue、Ghostty といったパッケージエコシステムにより、スタックに関係なくシームレスに統合できます。クラウド IDE、インタラクティブチュートリアル、リモートシェルダッシュボードの構築に関わらず、wterm は信頼性が高く拡張性のあるオープンソースソリューションを提供します。
試してみませんか？ リポジトリをクローンし、WASM バイナリをビルドして、数分で端末を埋め込みましょう。コマンドラインの力をブラウザに届ける開発者コミュニティに参加してください。