Transcript
00:00:00今回はOpenTuiを紹介します。Zig製のTUI構築ライブラリで、
00:00:04ReactやSolid、FreeJSのバインディングにより、Web開発と同じ感覚で高性能なTUIを構築できます。
00:00:09これは、オープンソースのコーディングエージェント「OpenCode」を開発したチーム、Anomalyによって作られました。
00:00:14何百万人ものユーザーが日々利用しているOpenCodeのUIを支えるために開発されたものです。
00:00:19では、この新しいライブラリは、昔からある人気のReact向け
00:00:24TUI構築ツールと比べてどうなのでしょうか？多くのコーディングエージェントでも使われているツールです。
00:00:29ぜひチャンネル登録をして、一緒に確かめていきましょう！
00:00:35さて、ReactでTUIを作る際の定番ライブラリといえば「Ink」です。
00:00:40これについては以前動画で解説しているので、そちらもチェックしてみてください。ですが、問題点もあります。
00:00:44まず、単純なアプリでもメモリを50MB以上消費します。さらに30fpsの制限があり、
00:00:51多くのアプリケーションでは問題ありませんが、コーディングエージェントのように
00:00:56テキストを大量にストリーミング表示する場合、このフレーム制限が動作を重く感じさせてしまいます。
00:01:00そこで、元々GolangとBubble TeaでOpenCodeを構築していたAnomalyチームは、
00:01:06Inkを使わずにTypeScriptで書き直すことにしました。そこで生まれたのがOpenTuiです。正確には彼らが買ったというべきでしょうか。
00:01:13ゼロから作ったわけではなく、Commander FX氏が既にZigベースのターミナルライブラリを開発していました。
00:01:18Anomalyは彼を支援し、その成果の上にOpenTuiを構築しました。Zigコアが重いレンダリングを担当し、
00:01:24TypeScriptバインディングによってReactやSolidでUIコンポーネントを書けるようになっています。
00:01:30さらに賢いのが、BUNの外部関数インターフェース（FFI）を使っている点です。
00:01:36これにより、TypeScriptからZigのネイティブコードを遅延なしで直接呼び出せます。これがOpenTuiの超高性能の秘密です。
00:01:42FlexboxレイアウトにはYogaが使われ、入力フォームやセレクトボックスなどのコンポーネントも内蔵されています。
00:01:47さらにThree.jsパッケージを使えば、ターミナル内でWebGPU 3Dグラフィックスまで描画できます。少し正気の沙汰とは思えませんね。
00:01:54では、簡単なデモでOpenTuiの実力を見てみましょう。プロジェクトのセットアップ方法は色々ありますが、
00:01:59個人的には「BUN CreateTui」をおすすめします。
00:02:04便利なウィザード形式でプロジェクト名を決めたり、使いたいテンプレートを選択したりできます。
00:02:09今回はReactを選びます。これら3つのテンプレートの違いは動画の後半で解説します。
00:02:13セットアップが完了すると、全画面プロジェクトを実行するindexファイルなどが作成されます。
00:02:17コードを見てみると、9行目付近でOpenTuiのレンダリングエンジンを使うための「CreateCLI」レンダラーが使われています。
00:02:21その下には「CreateRoot」があり、アプリコンポーネントを描画しています。
00:02:27Reactに詳しい方なら、これはHTMLファイルにマウントするためのコードだとわかるはずです。
00:02:32しかし今回はターミナルへのレンダリングなのでindex.htmlは存在しません。
00:02:37その代わり、HTMLコンポーネントの代わりにターミナルボックスとテキストを使用するカスタムReactレンダラーが使われています。
00:02:42その上ではJSXが使われていて、BoxコンポーネントとYogaのFlexboxプロパティでテキストやASCIIアートを配置しています。
00:02:49（前段の続き）テキストを配置しています。
00:02:55全画面モード以外も使いたい場合は、OpenTuiは複数のスクリーンモードをサポートしています。
00:03:00例えば「split footer」モードに変えれば、ターミナルの下部にフッター領域を予約することができます。
00:03:05では、もう少し面白いことをしてみましょう。
00:03:10タイトルと入力フォームがあるシンプルなTUIです。これを見てください。OpenTuiならレスポンシブなUIを無料で手に入れられます。
00:03:17ターミナルの幅を変えても、すべて適切に表示されます。
00:03:21コードを見ると、Reactでおなじみの構文ですね。ここではuseStateで名前を管理しています。
00:03:26入力欄では「on input」プロパティで名前を更新し、それがテキストに反映されます。
00:03:32OpenTuiの本当にクールな点は、HMRなしでライブリロードのようなことができることです。
00:03:37テキストを「goodbye」に変更して保存すると、自動的に画面が更新されました。
00:03:43レスポンシブな入力フォームは便利ですが、時々テキストが見えなくなることがあります。
00:03:48これは幅を設定してあげれば解決します。Boxコンポーネントには枠線や背景色などの
00:03:52クールなプロパティがあり、これを使えばターミナルアプリを一気に洗練された見た目にできます。
00:03:56見出しにはテキストの代わりにASCIIフォントを使うと、さらに際立ちます。
00:04:01もちろん、選べるASCIIフォントはたくさんあります。ただし、Webページではなくターミナルアプリなので、
00:04:05システム上の全フォントは使えず、ターミナルがサポートするものだけになります。
00:04:10また、Reactアプリと同じように「on submit」で状態を変え、表示するJSXを切り替えるといったことも可能です。
00:04:15しかし、ターミナルでは期待しないような機能もあります。
00:04:20名前を送信すると、別の状態がふわっと表示されます。
00:04:25これはOpenTuiの「use timeline」フックを使ったアニメーションです。
00:04:30アニメーション時間を設定し、ターゲットを指定します。ここでは不透明度0、オフセット8（垂直方向に少しずらした状態）から始まり、
00:04:36最終的にオフセット0、不透明度1になるように設定しています。
00:04:40ここで不透明度やオフセットの状態を更新しています。これらの値がBoxのプロパティに適用されます。
00:04:45少しカクついて見えるのは、ターミナルのアニメーションはグリッド単位で動く必要があるからです。
00:04:50それでも、OpenTuiでこれほど簡単にアニメーションを作れるのは非常にクールです。
00:04:55さらに便利なのが、Flexboxレイアウトを使ってボックスを並べることです。
00:05:00片側に入力欄を、もう片側には別のボックスを配置できます。
00:05:05そして入力欄に値を入力して送信すると、値を隣のボックスへアニメーションさせて移動できます。
00:05:10OpenTuiでは他にも多くのことができます。
00:05:14「use keyboard」フックでのキーボード操作、Node OSでのシステムデータ表示、
00:05:19マウスサポートや仮想リストなどです。しかもBUNの上で動いているため、
00:05:24SQLiteやPostgres、fetch APIなどもWeb開発と同じ感覚で利用できます。
00:05:28面白いのは、コンパイル後のサイズです。BUNランタイムとReactを含んでいるので71MBありますが、
00:05:34実行時のメモリ消費量は50MB未満です。
00:05:39それにReactは非常に人気があるので、LLMが使いこなせます。
00:05:43なので、ドキュメントを何度も見返さなくてもOpenTuiでアプリを作れます。
00:05:49ここまでOpenTuiを簡単に紹介してきました。
00:05:53では、動画の最初に約束したReact、Solid、Coreの違いについて解説します。
00:05:58フロントエンド開発の知識があれば簡単です。
00:06:02基本的にはすべて同じZigコアを経由して描画されるため、見た目はほぼ同じです。
00:06:07唯一違うのは、コンポーネントの書き方と更新の適用方法です。
00:06:11Reactは仮想DOMのように、コンポーネントを再実行してツリーを比較します。
00:06:17Solidは変更された部分だけを更新する細かい粒度の更新を行います。
00:06:22そしてCoreはそれら全てをスキップし、オブジェクトを直接操作します。
00:06:27理論上はReactが最も重く、Coreが最も軽いです。ですが実際には、
00:06:33重い処理はZigコアが行うため、ターミナルアプリではその差はごくわずかです。
00:06:38つまり、フレームワーク選びは完全に個人の好みと言えます。
00:06:44OpenTuiアプリはBUNランタイムを含んでいますが、それでもInkよりサイズは小さいです。
00:06:50もちろん、RatatouilleやBubble Teaのようなネイティブなものほど高性能ではありません。
00:06:56ですが個人的には、JSXこそUI構築における最も直感的で優れた手法だと思います。
00:07:02サイズやメモリを少し犠牲にしてでも、優れた開発体験を得られる方が良いです。
00:07:09軽量だけど書くのが苦痛なものよりずっといいですね。
00:07:15以上の理由から、もし私がターミナルアプリを作るなら、毎回OpenTuiを選びます。
00:07:20InkではなくOpenTuiを間違いなく使います。
00:07:25近いうちに必ず作ってみますね。
Community Posts
No posts yet. Be the first to write about this video!
Write about this video