ブラウザで動く tsrs：2D ゲームのプレイグラウンド
debuff のプレイグラウンドは、エディタの横でゲームが動きます。TypeScript 7 の Rust 移植である tsrs が Web Worker の中で型チェックとコンパイルをし、編集1回あたり約 150 ms です。インストール不要で、サーバーも使いません。
| 編集ごとの再チェック（サンプルゲーム） | 123〜174 ms |
| 同じチェックを TypeScript 5.9（JavaScript 版コンパイラ）で | 282〜443 ms |
| 初回訪問時（brotli） | 2.2 MB（うちコンパイラが 1.9 MB） |
| サンプル | squish、platformer、mossfell、basic |
どちらも Node 24 で、毎回まっさらな状態からフルチェックした値です（tsrs 0.18 は WebAssembly 版）。ウォームアップ後7回の中央値で、AMD Ryzen 7 260 で計測しました。出典は measurements.json です。
プレイグラウンドを開くか、platformer、mossfell、squish をリミックスしてみてください。
できること
- 編集して動かす。型エラーには下線が付きますが、ゲームは止まりません
- サンプルから始める。全ファイルとマップが入っています
- リンクで共有する。プロジェクトは URL の中に入っています
- プロジェクトをダウンロードする。
npm install、npm run devで動きます - debuff の開発パネルでパラメータをその場で調整する
ドキュメントの例にも「プレイグラウンドで実行」ボタンがあります（入力など）。サイトのビルドはそのすべてを型チェックします。コーディングエージェントは debuff.jp の MCP サーバーの playground_link でリンクを作れます。
しくみ
- Worker が
@tsrs/wasmで、あなたのファイルと debuff の型を処理します。1回の呼び出しでエラーと JavaScript が返ります。 - ゲームはサンドボックス化した iframe で動くので、共有されたコードはページに触れられません。debuff のランタイムは
data:モジュールとして渡します。 - リミックスしたサンプルは、サイト上のビルドからマップを読み込みます。
なぜ tsrs か
JavaScript 版の TypeScript コンパイラは以前からブラウザで動きます（TypeScript の公式プレイグラウンドもそれです）。これらのゲームでは、tsrs は同じフルチェックを 2.3〜2.7 倍速くこなし、TypeScript 7 のルールで型を調べます。JavaScript も出力するので、道具はひとつで済みます。ただしダウンロードは大きく、TypeScript 5.9 とその標準ライブラリの型が約 1.4 MB なのに対して 1.9 MB です。
手元では、debuff 0.11 から debuff dev が保存のたびに型エラーを開発オーバーレイに表示します（typecheck: true）。こちらはプロジェクトの tsc を使います。tsrs にはまだ Windows 版がないからです。
注意点
- 時間は Node での計測です。プレイグラウンドはステータス行に自分の環境の値を表示します。
- TypeScript の公式プレイグラウンドのようなエディタは編集間で処理を再利用するので、実際の差はまっさらなチェックの比較より小さくなります。
- tsrs は実験的です。エラーが
tscと異なる場合があります（並び順など）。 - テキストファイルのみです。サンプルの絵はコードで描いています。
プレイグラウンドを開いて、buff をもっと高く跳ばせてみましょう。