(この記事の AI 成分は 5 割ぐらいです)
claude-code や gemini-cli を触った人なら、やたらリッチな CLI のインターフェースが一体どうなってるか疑問に思ったはずです。
これは ink というライブラリで実装されています。実体は React のカスタムレンダラーで、React の差分レンダリングで CLI を構築することができます。
中では yoga というレイアウトエンジンが使われており、これは React Native でも使われているもので、 Web で display: flex を使ったときと同じレイアウト計算モデルになります。
つまり、 React や ReactNative の知識で CLI (TUI) の アスキーアートの UI を作ってるわけですね。
実際に作ってみた例
React Ink の可能性を探るべく、ターミナルで動くゲームを実装してました。
pnpm install && pnpm build && pnpm start で動くと思います。
(注意: ゲームとしては非常に雑です。バランス調整をしていません)
戦闘画面
装備管理画面
このゲームでは以下の機能を実装しています：
- 自動進行のバトルシステム（1 秒ごとにターンが進行）
- インベントリ管理とページネーション
- リアルタイムバトルログ
- 複雑なキー操作（Tab でフォーカス切り替え、Space で装備、Delete で売却）
実例でみる React Ink
最小構成はこんな感じ：
import React from "react";
import { render, Text } from "ink";
const App = () => Text color="green">Hello from React Ink!Text>;
render(App />);
緑色のテキストがターミナルに表示されます。React を知ってる人なら違和感ないはず。
useState や useEffect も当然使えます：
import React, { useState, useEffect } from "react";
import { render, Text, Box } from "ink";
const Counter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount((c) => c + 1);
}, 1000);
return () => clearInterval(timer);
}, []);
return (
Box flexDirection="column">
Text>⏱️ カウンターText>
Text color="cyan" bold>
{count} 秒経過
Text>
Box>
);
};
render(Counter />);
普通に React Hooks が動きます。タイマーも setState も全部そのままです。
実は意外と使われている React Ink
あんまり意識しないだけで、 React Ink は実は有名なライブラリの中で結構使われています。
CLI という、特にライブラリ作者が好きなテーマなので、裏側で採用されている事が多いです。
- AI 系 CLI: claude-code、gemini-cli、GitHub Copilot CLI
- 開発ツール: Vitest, Prisma、Gatsby、Yarn、Parcel、Wrangler
ink の周辺ライブラリ
簡単なコンポーネントライブラリ
- TextInput: テキスト入力フィールド
- Select: 選択リスト（矢印キーで選択）
- MultiSelect: 複数選択リスト
- ProgressBar: プログレスバー
- Spinner: ローディングアニメーション
- ConfirmInput: Yes/No の確認ダイアログ
なんと ink-testing-library もあります。
なぜ今 CLI なのか
正直な話、GUI の開発は疲れます。Web は非常に自由度は高く、同じ目的の画面の実装に対して、無限に実装パターンがあります。
この自由度は AI と相性が悪く、テキストベースの機能要件だけを達成すればいいとなると、リッチな CLI に白羽の矢が立つわけです。
AI による開発支援を考えても、CLI の方が相性がいいです。テキストベースのインターフェースはプロンプトとの親和性が高く、自動化もしやすいです。
React Ink は、この安定性と表現力のバランスを上手く取っています。React の知識でリッチな CLI が作れて、ターミナルという枯れたプラットフォームで動作します。
おわりに
自分は元々 CLI ベースの古典的ローグライクのプレーヤーで、このフレーバーが結構好き、特に Dungeon Crawl は結構遊びました。
GUI に疲れたら、React Ink でリッチな CLI を作ってみてはどうでしょうか。ターミナルの制約が創造性を刺激することもあります。
個人的には、AI 時代の開発ツールは CLI に一時的に回帰していく気がしています。claude-code や gemini-cli のような AI ツールが React Ink を採用しているのも、その証左かもしれません。
Views: 0
