ターミナルアプリをブラウザでも動かす「Gridland」とは？ TUI開発の新定番フレームワーク

ターミナルアプリを作ったとき、「インストールしてもらう前に動きを見せたい」と思ったことはないだろうか。npm install や cargo install を実行してもらうには、そこそこの心理的ハードルがある。Gridland は、その問題をエレガントに解決する新しいフレームワークだ。

Gridland とは？

Gridland は、OpenTUI + React ベースのランタイムで、同一コードベースのアプリをブラウザと本物のターミナル、両方で動作させることができる。公式サイト自体がGridlandで作られており、ブラウザ上でターミナル風UIが動いているのを確認できる。

主な特徴:

• OpenTUI + canvas レンダラー 採用により、チラつきがほぼなく、ロード時間も瞬時
• ShadCN UI レジストリ 対応で、UIコンポーネントを再利用しやすい設計
• React ベース なので、Webフロントエンドエンジニアにも親しみやすい
• ブラウザ上でそのままデモを公開できるため、TUIのプロモーションに最適

前身「Ink Web」から何が変わったか

Gridlandには前身がある。Ink Web（ink-web.dev）は同様のコンセプトで、Ink（ReactベースのTUIライブラリ）+ xterm.js という構成だった。しかし実装を進める中で、OpenTUIとcanvasレンダラーの組み合わせのほうがパフォーマンスが大幅に向上することが判明し、Gridlandとして作り直された。

技術スタックの変遷:

	Ink Web	Gridland
TUIエンジン	Ink	OpenTUI
ブラウザレンダリング	xterm.js	Canvas
チラつき	あり	ほぼなし
ロード速度	普通	ほぼ瞬時

すぐ試せるコマンド

デモを体験するだけなら1コマンドで済む：

bunx @gridland/demo landing

新規プロジェクトを始めるには：

bun create gridland

Bun 前提の設計なので、Bunがインストールされていない場合は先に curl -fsSL https://bun.sh/install | bash で導入しておこう。

なぜこれが面白いのか

TUIアプリの最大の課題はユーザーに「実際に使う前の体験」を提供しにくい点にある。GitHubのREADMEにGIFを貼るのが定番だったが、インタラクティブな操作感は伝わらない。GridlandはURLを渡すだけで、インストール不要のインタラクティブデモを実現する。

CLIツール・TUIアプリを開発している人にとっては、ランディングページ兼デモ環境を1つのコードベースで管理できる点が特に魅力的だ。オープンソースプロジェクトのドキュメントサイトや、社内ツールの紹介ページとしても応用が効く。

Reactエコシステムに乗っているため、既存のWebフロントエンドの知識が活かせるのも嬉しいポイント。TUI開発への入門障壁を大きく下げてくれるフレームワークとして、今後の動向に注目したい。