CLIアプリを美しく！React Inkで快適なUIを実現

はじめに

今日のソフトウェア開発において、ユーザーインターフェース（UI）の重要性はますます高まっています。Webアプリケーションやモバイルアプリケーションでは、洗練されたGUIがユーザー体験（UX）を決定づけると言っても過言ではありません。しかし、その一方で、コマンドラインインターフェース（CLI）アプリケーションは、多くの場合、機能性やパフォーマンスが最優先され、UIについては「黒い画面に白い文字」という、最低限の表示に留まることが一般的でした。

しかし、時代は変わりました。開発者やパワーユーザー向けのツールとして広く利用されるCLIアプリにも、より直感的で、視覚的に分かりやすく、そして何よりも「快適に使える」UIが求められるようになってきています。単にコマンドを実行するだけでなく、対話的な操作、進捗の可視化、エラーの明確な表示、そして何よりも「使うのが楽しい」という感情的な側面が、CLIアプリの普及と定着に大きく貢献するようになりました。

このようなニーズに応えるべく登場したのが、React Inkです。React Inkは、Web開発で圧倒的な人気を誇るJavaScriptライブラリ「React」の哲学とコンポーネント指向開発モデルを、そのままターミナル上で実現するための革新的なツールです。これにより、開発者は使い慣れたReactの知識とエコシステムを活用して、美しく、高機能なCLI UIを驚くほど簡単に構築できるようになりました。

本記事では、React InkがなぜCLIアプリのUI開発を変革するのか、その基本的な概念から実践的な開発手法、そして高度なテクニックまでを網羅的に解説します。約5000語にわたる詳細な説明と具体的なコード例を通じて、あなたがCLIアプリのUIを次のレベルへと引き上げるための羅針盤となることを目指します。

第1章：CLIアプリUIのパラダイムシフト – なぜ今、美しさが求められるのか

1.1 コマンドラインツールの進化とユーザー期待の変化

かつて、CLIはUNIXの哲学「Do one thing and do it well」を体現するものでした。テキストベースのシンプルな入出力は、高速性、軽量性、そしてスクリプトとの連携のしやすさという点で他に類を見ない利点を持っていました。開発者はgrep、awk、sedといった強力なコマンドを組み合わせて、複雑なタスクを自動化し、膨大なデータを処理してきました。しかし、これらのツールは「機能性」に特化しており、人間の目に優しい「見た目」や「使いやすさ」は二の次でした。

現代において、CLIツールはもはや特定の専門家だけが使うものではありません。Node.js、Python、Go、Rustなどの言語の普及により、ウェブ開発者からデータサイエンティスト、システム管理者まで、幅広い層が日常的にCLIツールを利用するようになりました。例えば、パッケージマネージャー（npm, yarn, pip）、フレームワークのCLI（create-react-app, Vue CLI, Angular CLI）、バージョン管理ツール（Git）、コンテナ管理ツール（Docker, kubectl）など、数え上げればキリがありません。

これらの新しいユーザー層は、Webやモバイルアプリケーションで培われた「使いやすいUI」への期待をCLIにも持ち込んでいます。単にエラーメッセージが表示されるだけでなく、なぜエラーが発生したのか、どうすれば解決できるのかを視覚的に示してほしい。プログレスバーで進捗状況を確認したい。複数の選択肢から直感的に選びたい。これらのニーズが、CLI UIのパラダイムシフトを加速させています。

1.2 美しいUIがCLIにもたらす価値

美しいCLI UIは、単なる見た目の向上にとどまらず、ユーザーエクスペリエンス全体に多大な価値をもたらします。

• 学習コストの低減:
  • 直感的な操作: 適切なレイアウト、色分け、アイコンの利用は、ユーザーが次に何をすべきかを直感的に理解するのに役立ちます。例えば、必須入力フィールドの強調や、エラー箇所の明確な表示は、学習曲線を大幅に短縮します。
  • 視覚的フィードバック: コマンドの実行結果や進捗状況がリアルタイムに視覚化されることで、ユーザーは現在の状況を瞬時に把握できます。プログレスバーやスピナーは、処理がフリーズしていないことを示し、ユーザーの不安を軽減します。
• エラーの削減と効率性向上:
  • 分かりやすい表示: 曖昧なエラーメッセージはユーザーを混乱させ、解決に時間を要させます。美しいUIは、エラーの種類、原因、推奨される解決策を明確に提示し、ユーザーが迅速に対応できるようにします。
  • 入力補助とバリデーション: 入力プロンプトでの候補表示やリアルタイムバリデーションは、誤入力を防ぎ、正確な情報入力を促します。これにより、ユーザーはより効率的に作業を進めることができます。
• ユーザーエンゲージメントの向上:
  • 使うのが楽しい: 美しく設計されたUIは、ユーザーにとって単なる道具ではなく、「使うのが楽しい」というポジティブな感情を抱かせます。これはツールの継続的な利用やコミュニティへの貢献にも繋がり、結果としてツールのブランド価値を高めます。
  • プロフェッショナルな印象: 洗練されたUIは、開発者のスキルとツールの品質に対する信頼感を高めます。公式のツールや、重要なインフラを操作するCLIにとって、この信頼性は非常に重要です。
• ブランドイメージの向上:
  • 多くの開発者ツールやフレームワークは、そのCLIツールを主要なインターフェースとして提供しています。CLIのUIが洗練されていることは、プロジェクトや企業の技術力、ユーザーへの配慮を示す強力なメッセージとなります。

1.3 従来のCLI UI開発の課題

従来のCLI UI開発は、多くの技術的課題を抱えていました。

• シェルスクリプトの限界: echoやprintfといった基本的なコマンドでは、色の変更やテキスト装飾はANSIエスケープシーケンスを直接埋め込むことで可能でしたが、カーソル位置の制御、複雑なレイアウト、リアルタイム更新などは非常に困難でした。コードは読みにくく、保守性も低いものでした。
• 低レベルライブラリの複雑さ: ncursesやterminfo/termcapといったライブラリは、ターミナルの低レベルな制御（画面クリア、カーソル移動、キー入力検出）を可能にしますが、C言語やPythonなど特定の言語に依存し、学習コストが非常に高く、開発速度も遅いという問題がありました。これらは主に、全画面を占有するような、よりGUIに近いターミナルアプリケーション（例: htop, top, vim）の開発に使われました。
• クロスプラットフォーム対応の難しさ: ターミナルエミュレータの種類（Windows Terminal, iTerm2, GNOME Terminalなど）やOSの差異により、エスケープシーケンスの解釈や表示に微妙な違いが生じることがありました。これにより、クロスプラットフォームで一貫したUIを維持することが困難でした。
• コンポーネント指向開発の欠如: 従来のCLI UI開発は、UI要素を再利用可能な部品として扱うコンポーネント指向の概念が希薄でした。これにより、コードの保守性、再利用性、拡張性が損なわれ、大規模なCLIアプリの開発は複雑さを増す一方でした。

これらの課題を根本的に解決し、モダンなWeb開発の手法をCLIにもたらすために登場したのがReact Inkなのです。

第2章：React Inkの登場 – CLI UI開発の革命児

2.1 React Inkとは何か？

React Inkは、その名の通り「React for Interactive Command Line Interfaces (CLIs)」を標榜するライブラリです。Node.js環境で動作し、Reactのコンポーネントモデル、仮想DOM、Hooksといった強力なパラダイムをそのままターミナル上で利用できるようにします。

Inkの核心は、WebブラウザのDOMに相当するターミナル上の描画を抽象化し、Reactのレンダリングパイプラインに乗せることにあります。具体的には、内部でFacebookが開発したレイアウトエンジンYoga（Flexboxの実装）を利用し、Webと同様の柔軟なレイアウトをターミナルで実現します。そして、Reactの仮想DOMが検出した変更のみを効率的にターミナルに反映することで、高速かつスムーズなUIの更新を可能にします。

これにより、Web開発者がReactでWeb UIを構築するのとほぼ同じ感覚で、リッチでインタラクティブなCLI UIを構築できるようになったのです。

2.2 なぜReact Inkを選ぶのか？その魅力とメリット

React Inkを選ぶべき理由は多岐にわたりますが、特に以下の点が挙げられます。

2.2.1 React開発者にとっての学習曲線ゼロ

最大の魅力は、既存のReact開発スキルをそのまま活用できる点です。JSX、コンポーネントのライフサイクル、状態管理（useState, useReducer）、副作用（useEffect）、コンテキストAPI、カスタムHooksといったReactの主要な概念が、Inkでも完全に機能します。
これにより、Webフロントエンド開発者は新たなフレームワークやパラダイムを学ぶ必要がなく、すぐに生産性を発揮できます。既存のReactエコシステム、例えばReduxやMobXといった状態管理ライブラリ、Formikのようなフォームライブラリも、必要に応じて統合することが可能です。仮想DOMによる効率的な再描画は、ターミナルへの不要な書き込みを減らし、パフォーマンスを向上させます。

2.2.2 コンポーネント指向開発の威力

Reactの核であるコンポーネント指向開発は、CLI UI開発においても絶大な威力を発揮します。

• UIのモジュール化: ヘッダー、フッター、プログレスバー、選択リスト、情報パネルなど、UIの各要素を独立した再利用可能なコンポーネントとして開発できます。
• 再利用性: 一度作成したコンポーネントは、異なるCLIアプリで再利用したり、他の開発者と共有したりすることが容易になります。
• 保守性: コードが機能ごとに明確に分離されるため、各コンポーネントの理解とデバッグが容易になり、大規模なアプリケーションでも保守性が向上します。
• 状態管理とUIの分離: 各コンポーネントは自身の状態を持つことができ、UIとロジックの分離が自然に行われます。これにより、コードが整理され、テストもしやすくなります。

2.2.3 美しいレイアウトとスタイル

Inkのスタイリングは、ターミナルにおけるUIの「見た目」を劇的に改善します。

• Flexbox (Yoga) による強力なレイアウトシステム: Web開発者にはおなじみのFlexboxレイアウトがターミナルで利用できます。flexDirection, justifyContent, alignItems, flexGrowなどのプロパティを使って、要素の配置、整列、伸縮を自由自在に制御できます。これにより、レスポンシブな（ターミナルサイズに合わせた）レイアウトも実現しやすくなります。
• JSXスタイルでのインラインCSS風記述: テキストの色、背景色、太字、イタリック、下線などの基本的なスタイルを、JSXのstyleプロパティのように直感的に記述できます。ANSIエスケープシーケンスを直接操作する必要はありません。
  jsx
<Text color="red" bold>エラーが発生しました！</Text>
<Text backgroundColor="green" color="white">成功</Text>
• 豊富な表現力: 文字列のグラデーション表示（ink-gradient）、区切り線（ink-divider）など、視覚的に魅力的な表現を可能にするコミュニティ製のコンポーネントも多数存在します。

2.2.4 豊富なエコシステムとツール

React Inkは、Reactのエコシステムを継承しつつ、CLI UI開発に特化した便利なツールやライブラリも提供しています。

• create-ink-app: プロジェクトの初期設定を高速に行うためのCLIツールです。すぐに開発を始められます。
• Ink独自のコンポーネントライブラリ: スピナー（ink-spinner）、選択リスト（ink-select-input）、プログレスバー（ink-progress-bar）、テキスト入力（ink-text-input）など、CLIアプリでよく使われるUI要素を簡単に実装できる既製のコンポーネントが提供されています。
• テストツールとの連携: JestやReact Testing Library for Ink (@testing-library/react-hooksやink-testing-library) を使って、Reactコンポーネントと同様にUIコンポーネントの単体テストや統合テストを行うことができます。

2.2.5 クロスプラットフォーム対応

InkはNode.js上で動作するため、Node.jsがインストールされている環境であれば、macOS、Linux、Windowsのいずれでも一貫した動作と表示が期待できます。ターミナルエミュレータの細かな違いをInkが吸収してくれるため、開発者はプラットフォーム間の差異に悩まされることなくUI開発に集中できます。

2.2.6 対話型UIの容易な実現

CLIアプリの真価は、ユーザーとの対話にあります。Inkは、この対話性を非常に簡単に実現するための仕組みを提供します。

• ユーザー入力のハンドリング: キーボード入力（キープレス、組み合わせキー）を検出し、それに応じてUIを更新する機能が組み込まれています。
• 組み込みコンポーネント: 選択リストやテキスト入力フィールドなど、複雑な入力処理を要するUI要素も、提供されるコンポーネントを利用するだけで簡単に実装できます。これにより、プロンプトベースのCLIアプリを高度な対話型UIに進化させることが可能です。

第3章：React Inkを始めよう – 環境構築とHello World

React Inkの開発を始めるのは非常に簡単です。基本的なNode.js環境があれば、すぐに最初のアプリケーションを起動できます。

3.1 前提条件の確認

React Inkアプリケーションを開発するには、以下のものがインストールされている必要があります。

• Node.js: バージョン16以上が推奨されます。LTSバージョンを使用するのが一般的です。
• npm または yarn: Node.jsにバンドルされているパッケージマネージャーです。

ターミナルを開き、以下のコマンドでバージョンを確認してください。

“`bash
node -v
npm -v

または

yarn -v
“`

3.2 プロジェクトのセットアップ

React Inkプロジェクトをセットアップする最も簡単な方法は、公式が提供するcreate-ink-appを使用することです。これはcreate-react-appと同様に、必要な依存関係とファイル構造を自動で生成してくれます。

create-ink-app を使ったクイックスタート:

任意のディレクトリに移動し、以下のコマンドを実行します。

bash
npx create-ink-app my-cli-app

npxは、ローカルにインストールされていないパッケージのCLIツールを一時的に実行するためのNode.jsのコマンドです。このコマンドを実行すると、以下のようなプロンプトが表示されます。

? Pick a name for your CLI application: my-cli-app
? Select a language: TypeScript
? Select a package manager: npm

• Pick a name for your CLI application: プロジェクト名を入力します。
• Select a language: TypeScriptまたはJavaScriptを選択します。TypeScriptは型安全で大規模プロジェクトに適しているため、強く推奨されます。
• Select a package manager: npmまたはyarnを選択します。

選択が完了すると、my-cli-appという新しいディレクトリが作成され、必要なファイルが生成され、依存関係がインストールされます。

プロジェクトディレクトリに移動し、開発サーバーを起動します。

“`bash
cd my-cli-app
npm start

または

yarn start
“`

これで、ターミナルにHello, World!と表示されるはずです。Ctrl + Cでアプリケーションを終了できます。

手動でのセットアップ（オプション）:

create-ink-appを使わず、より詳細な設定を自分で行いたい場合は、手動でプロジェクトを設定することも可能です。

1. プロジェクトディレクトリを作成し、移動します。
   bash
mkdir my-manual-ink-app
cd my-manual-ink-app
2. package.jsonを初期化します。
   bash
npm init -y

3. 必要な依存関係をインストールします。
   reactとinkが必須です。ビルドツールとしてwebpackやrollup、トランスパイラとしてbabelやts-loaderを使用します。TypeScriptを使用する場合は、typescriptと関連する型定義も必要です。

   “`bash
   npm install react ink

   開発依存関係

   npm install –save-dev webpack webpack-cli ts-loader typescript @types/react @types/node
   ``
4. **tsconfig.json(TypeScriptの場合) とwebpack.config.jsを設定します。**
これらは複雑になるため、ここでは詳細を割愛しますが、create-ink-app`が生成するファイルを参考にすると良いでしょう。主要なポイントは、ReactのJSXを認識させる設定と、Node.js環境向けのビルド設定です。

   一般的なwebpack.config.jsの例:
   “`javascript
   const path = require(‘path’);

   module.exports = {
   mode: ‘development’, // または ‘production’
   entry: ‘./src/app.tsx’, // または ‘./src/app.jsx’
   output: {
   path: path.resolve(__dirname, ‘dist’),
   filename: ‘cli.js’,
   },
   target: ‘node’, // Node.js環境向けにビルド
   resolve: {
   extensions: [‘.ts’, ‘.tsx’, ‘.js’, ‘.jsx’, ‘.json’],
   },
   module: {
   rules: [
   {
   test: /.(ts|tsx)$/,
   exclude: /node_modules/,
   use: ‘ts-loader’,
   },
   {
   test: /.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
   loader: ‘babel-loader’,
   options: {
   presets: [‘@babel/preset-env’, ‘@babel/preset-react’],
   },
   },
   },
   ],
   },
   externals: {
   // Ink関連の依存関係は外部として扱う（ビルドサイズを減らすため）
   react: ‘commonjs react’,
   ink: ‘commonjs ink’,
   },
   };
   “`

4. package.jsonにスクリプトを追加します。
   json
{
"name": "my-manual-ink-app",
"version": "1.0.0",
"main": "dist/cli.js",
"scripts": {
"build": "webpack --config webpack.config.js",
"start": "node dist/cli.js",
"dev": "webpack --config webpack.config.js --watch"
},
"dependencies": {
"ink": "^4.0.0",
"react": "^18.2.0"
},
"devDependencies": {
"@types/node": "^20.12.7",
"@types/react": "^18.2.79",
"ts-loader": "^9.5.1",
"typescript": "^5.4.5",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4"
}
}

3.3 基本的なHello Worldアプリの作成

create-ink-appで作成したプロジェクトの場合、src/app.tsx（またはsrc/app.jsx）がエントリポイントになります。内容は以下のようになっているはずです。

“`tsx
// src/app.tsx
import React from ‘react’;
import { Text } from ‘ink’;

export default function App() {
return (
Hello, Ink World!
);
}
“`

コードの解説:

• import React from 'react';: Reactを使うための必須インポートです。
• import { Text } from 'ink';: Inkが提供する基本的なコンポーネントであるTextをインポートしています。Textコンポーネントは、ターミナルにテキストを表示するために使用します。
• export default function App() { ... }: これはReactの関数コンポーネントです。この関数が返すJSXがターミナルに描画されます。
• <Text color="green">Hello, <Text bold>Ink World</Text>!</Text>:
  • <Text>コンポーネントを使ってテキストを表示しています。
  • color="green"プロパティは、テキストの色を緑色に設定します。Inkは主要なANSIカラー（red, green, blue, yellow, magenta, cyan, white, black）をサポートしています。
  • <Text bold>Ink World</Text>のように、Textコンポーネントをネストすることで、特定の単語だけを太字にするといったスタイリングが可能です。boldプロパティは、テキストを太字にします。他にもitalic, underline, strikethroughなどのプロパティがあります。

このアプリを実行するには、プロジェクトルートでnpm start（またはyarn start）を実行します。
ターミナルには、緑色で「Hello, Ink World!」と表示されるでしょう。

これにより、React Inkを使ったCLI UI開発の第一歩を踏み出しました。次の章からは、より実践的なInkの機能と概念について深く掘り下げていきます。

第4章：React Inkの主要概念と実践的なUI開発

この章では、React Inkの核となる概念を詳しく見ていき、実際にインタラクティブで機能的なCLI UIを構築するための具体的な方法を学びます。

4.1 コンポーネントとプロパティ

React InkにおけるUI開発は、Reactと同様にコンポーネント指向です。UIの各要素は独立した再利用可能なコンポーネントとして構築されます。

• 関数のコンポーネント: 現在のReact開発では、Hooksが導入されて以来、関数のコンポーネントが主流です。シンプルで直感的であり、Hooksを使うことで状態管理や副作用も容易に扱えます。
  “`tsx
  import React from ‘react’;
  import { Text } from ‘ink’;

  // プロパティを受け取るシンプルなコンポーネント
  interface GreetingProps {
  name: string;
  }

  const Greeting: React.FC = ({ name }) => {
  return (
  Hello, {name}!
  );
  };

  export default Greeting;
  * **プロパティの渡し方**: 親コンポーネントから子コンポーネントへデータを渡すには、HTMLの属性のようにプロパティ（props）を使用します。tsx
  // App.tsx
  import React from ‘react’;
  import { Box } from ‘ink’;
  import Greeting from ‘./Greeting’; // 上記で定義したGreetingコンポーネント

  export default function App() {
  return (
  
  
  
  
  );
  }
  ``Boxコンポーネントは、Webにおけるdiv`のようなもので、レイアウトのコンテナとして使われます。

4.2 スタイリングの深掘り

Inkのスタイリングは、Flexboxとテキスト装飾のプロパティを組み合わせて行います。

インラインスタイルとテキスト装飾

Textコンポーネントには、テキストの色、背景色、装飾を設定するための多くのプロパティが用意されています。

• 色: color, backgroundColor (例: color="red", backgroundColor="blue", color="#FF0000", backgroundColor="rgb(0,255,0)")
• 装飾: bold, italic, underline, strikethrough, inverse, dim
• 結合: これらのプロパティは組み合わせて使用できます。
  tsx
<Text color="yellow" bold underline>重要事項！</Text>

Flexboxによるレイアウト

Inkのレイアウトは、FacebookのYogaライブラリに基づいたFlexboxモデルを採用しています。BoxコンポーネントがFlexコンテナとして機能し、その中に配置される子要素がFlexアイテムとなります。

• <Box>コンポーネント:
  • flexDirection: row (デフォルト), column, row-reverse, column-reverse
  • justifyContent: flex-start (デフォルト), flex-end, center, space-between, space-around, space-evenly
  • alignItems: flex-start, flex-end, center, stretch (デフォルト)
  • flexGrow: 0 (デフォルト), 1, 2… (余白に応じてアイテムがどれだけ拡大するか)
  • flexShrink: 1 (デフォルト), 0… (アイテムがどれだけ縮小するか)
  • width, height: 固定幅、高さ
  • minWidth, maxWidth, minHeight, maxHeight: 最小・最大サイズ
  • padding, paddingLeft, paddingRight, paddingTop, paddingBottom, paddingX, paddingY: 内側の余白
  • margin, marginLeft, marginRight, marginTop, marginBottom, marginX, marginY: 外側の余白
  • borderStyle: single, double, round, bold, singleDouble, doubleSingle など（枠線を追加）
  • borderColor: 枠線の色

実践的なレイアウト例：ヘッダー、フッター、サイドバー、コンテンツ領域

“`tsx
// App.tsx
import React from ‘react’;
import { Box, Text } from ‘ink’;

export default function App() {
return (

{/ ヘッダー /}

My Awesome CLI App v1.0

  {/* メインコンテンツエリア */}
  <Box flexGrow={1} flexDirection="row">
    {/* サイドバー */}
    <Box borderStyle="single" borderColor="blue" paddingX={2} paddingY={1} width="25%" flexDirection="column">
      <Text color="blue" bold>メニュー</Text>
      <Text>1. ダッシュボード</Text>
      <Text>2. 設定</Text>
      <Text>3. ヘルプ</Text>
    </Box>

    {/* メインコンテンツ */}
    <Box flexGrow={1} borderStyle="single" borderColor="gray" padding={2} flexDirection="column">
      <Text bold underline>ようこそ！</Text>
      <Text>これはメインコンテンツ領域です。</Text>
      <Text>ここに様々な情報や対話型UIを表示します。</Text>
      <Text color="green">現在のタスク: 実行中...</Text>
    </Box>
  </Box>

  {/* フッター */}
  <Box borderStyle="round" borderColor="magenta" paddingY={1} justifyContent="center">
    <Text color="gray">Press Q to quit</Text>
  </Box>
</Box>

);
}
``
このコードは、CLIアプリでよく見られる、ヘッダー、フッター、そして左右に分割されたメインコンテンツエリアというレイアウトをFlexboxで実現しています。flexGrow={1}`は、利用可能な空間を最大限に占有することを意味します。

4.3 状態管理（Hooks）

React InkもReactのHooksを全面的にサポートしています。CLIアプリにおけるUIの状態は、ユーザーの入力、データのフェッチング結果、プログレスの進捗など、様々な要因で変化します。

• useState: コンポーネント内部のシンプルな状態を管理します。
  “`tsx
  import React, { useState } from ‘react’;
  import { Text } from ‘ink’;

  const Counter: React.FC = () => {
  const [count, setCount] = useState(0);

  // ここではキーボード入力と連携させてカウントを増やすロジックは省略
  // 例えば、useInputを使って’c’キーでカウントを増やすなど
  // InkのuseInputについては後述
  return Count: {count};
  };
  “`

• useEffect: 副作用（データのフェッチング、タイマー、イベントリスナーの設定と解除など）を処理します。CLIアプリでは、外部APIとの通信や、一定時間ごとに情報を更新するといった用途で頻繁に利用されます。
  “`tsx
  import React, { useState, useEffect } from ‘react’;
  import { Text } from ‘ink’;

  const Timer: React.FC = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
  const interval = setInterval(() => {
  setSeconds(prevSeconds => prevSeconds + 1);
  }, 1000);

  // クリーンアップ関数: コンポーネントがアンマウントされる際にタイマーをクリア
  return () => clearInterval(interval);
  

  }, []); // 空の依存配列は、コンポーネントのマウント時に一度だけ実行されることを意味する

  return Elapsed: {seconds}s;
  };
  “`

• useRef: DOM要素への参照や、コンポーネントの再レンダーで値が変わってほしくないミュータブルな値を保持するために使用します。Inkでは、直接DOMを操作する用途は少ないですが、タイムアウトIDなどを保持するのに役立ちます。

• Ink特有のHooks:

  • useInput(callback, options): キーボード入力を検出するための最も重要なHookです。
    • callback: キーが押されたときに呼び出される関数です。引数として、押されたキーの文字列と、keyオブジェクト（shift, ctrl, alt, metaなどの修飾キーの状態を含む）を受け取ります。
    • options: { isActive: boolean }など、入力イベントリスナーをアクティブにするかどうかを制御できます。
  • useStdout(): 標準出力ストリーム（process.stdout）への参照を提供します。これにより、Inkのレンダリングとは別に、直接ターミナルに文字を書き込んだり、ターミナルのサイズ変更イベントをリッスンしたりできます。
  • useStdin(): 標準入力ストリーム（process.stdin）への参照を提供します。useInputが抽象化されたキー入力であるのに対し、useStdinはより低レベルな入力ストリームへのアクセスを提供します。
  • useApp(): Inkアプリケーションの制御に特化したHookです。
    • exit(error?: Error): アプリケーションを終了させます。エラーオブジェクトを渡すと、終了コードが1になり、エラーメッセージが標準エラーに出力されます。
    • waitUntilExit(): アプリケーションが終了するまで待機するPromiseを返します。

useInputの例:

“`tsx
import React, { useState } from ‘react’;
import { Text, useInput, Box } from ‘ink’;

const InteractiveCounter: React.FC = () => {
const [count, setCount] = useState(0);
const [lastKeyPressed, setLastKeyPressed] = useState(null);

useInput((input, key) => {
if (input === ‘q’) {
// ‘q’キーで終了するロジック（useApp().exit()と組み合わせる）
// exit(); // useAppから取得
}
if (input === ‘+’) {
setCount(prev => prev + 1);
setLastKeyPressed(‘+’);
}
if (input === ‘-‘) {
setCount(prev => prev – 1);
setLastKeyPressed(‘-‘);
}
if (key.upArrow) {
setCount(prev => prev + 10);
setLastKeyPressed(‘↑’);
}
if (key.downArrow) {
setCount(prev => prev – 10);
setLastKeyPressed(‘↓’);
}
if (key.escape) {
setLastKeyPressed(‘Esc’);
}
});

return (

Count: {count}
{lastKeyPressed && Last key pressed: {lastKeyPressed}}
Press +, -, ↑, ↓ to change count. (Q to quit)

);
};

export default InteractiveCounter;
“`
このコンポーネントは、ユーザーがキーボードで特定のキーを押すたびにカウントを増減させ、最後に押されたキーを表示します。

4.4 ユーザーインタラクションの実現

useInput以外にも、InkのエコシステムにはインタラクティブなUIを簡単に構築できる便利なコンポーネントがあります。

• 選択リスト (ink-select-input): 複数の選択肢から一つを選ぶUIを提供します。カーソルキーで選択肢を移動し、Enterキーで決定します。
  bash
npm install ink-select-input
  “`tsx
  import React, { useState } from ‘react’;
  import { Text } from ‘ink’;
  import SelectInput from ‘ink-select-input’;

  interface MenuItem {
  label: string;
  value: string;
  }

  const SelectExample: React.FC = () => {
  const [selected, setSelected] = useState(null);
  const items: MenuItem[] = [
  { label: ‘Apple’, value: ‘apple’ },
  { label: ‘Banana’, value: ‘banana’ },
  { label: ‘Cherry’, value: ‘cherry’ },
  ];

  const handleSelect = (item: MenuItem) => {
  setSelected(item.value);
  };

  return (
  <>
  Choose your favorite fruit:
  
  {selected && You selected: {selected}}
  
  );
  };
  * **プログレスバー (`ink-progress-bar` または自作)**: 時間のかかる処理の進捗を視覚的に示します。
`ink-progress-bar`はサードパーティライブラリですが、シンプルなプログレスバーは自作することも可能です。tsx
  // シンプルな自作プログレスバーの例
  import React, { useState, useEffect } from ‘react’;
  import { Text } from ‘ink’;

  interface ProgressBarProps {
  progress: number; // 0-100
  width?: number;
  }

  const ProgressBar: React.FC = ({ progress, width = 20 }) => {
  const filledWidth = Math.min(width, Math.max(0, Math.floor(progress / 100 * width)));
  const emptyWidth = width – filledWidth;
  const filled = ‘█’.repeat(filledWidth);
  const empty = ‘░’.repeat(emptyWidth);

  return (
  
  [{filled}{empty}] {progress.toFixed(0)}%
  
  );
  };

  const ProgressDemo: React.FC = () => {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
  if (progress >= 100) return;

  const timer = setTimeout(() => {
    setProgress(prev => Math.min(100, prev + Math.random() * 10));
  }, 200);
  
  return () => clearTimeout(timer);
  

  }, [progress]);

  return (
  <>
  Downloading file:
  
  {progress >= 100 && Download Complete!}
  
  );
  };
  * **テキスト入力 (`ink-text-input`)**: ユーザーが自由なテキストを入力できるフィールドを提供します。bash
  npm install ink-text-input
  tsx
  import React, { useState } from ‘react’;
  import { Text } from ‘ink’;
  import TextInput from ‘ink-text-input’;

  const InputExample: React.FC = () => {
  const [name, setName] = useState(”);
  const [submitted, setSubmitted] = useState(false);

  useInput((input, key) => {
  if (key.return) { // Enterキーで送信
  setSubmitted(true);
  }
  });

  if (submitted) {
  return Hello, {name}!;
  }

  return (
  
  What’s your name?{‘ ‘}
  setSubmitted(true)} />
  
  );
  };
  “`

4.5 外部ライブラリとの連携

React InkはNode.jsの環境で動作するため、多くのNode.jsライブラリとシームレスに連携できます。

• スピナー (ink-spinner): 非同期処理中にローディング状態を示すアニメーションスピナーです。
  bash
npm install ink-spinner ora
  （oraはink-spinnerの依存関係ですが、直接oraを使いたい場合もあります）
  “`tsx
  import React from ‘react’;
  import { Text } from ‘ink’;
  import Spinner from ‘ink-spinner’;

  const LoadingStatus: React.FC = () => {
  return (
  
  
  
  
  {‘ Loading data…’}
  
  );
  };
  ``
* **プロンプト (promptsとの組み合わせ)**: より複雑な質問フロー（複数選択、パスワード入力など）には、ink-cli-uiやpromptsのような既存のプロンプトライブラリとInkを組み合わせることも可能です。ただし、Ink自体が持つ対話コンポーネントが充実しているため、多くの場合はInkのコンポーネントで十分です。
* **データフェッチング**:node-fetch,axiosなどのHTTPクライアントライブラリを使って、APIからデータを取得し、それをUIに表示できます。useEffectの中で非同期処理を実行し、結果をuseState`で管理します。
  * 状態管理ライブラリ: アプリケーションの状態が複雑になる場合、Redux, Zustand, Recoilといった状態管理ライブラリを導入して、コンポーネント間の状態共有を効率化できます。これらはReactエコシステムの一部であるため、Inkでも同様に利用できます。

4.6 エラーハンドリングとロギング

CLIアプリにおいても、エラーハンドリングは重要です。

• React Error Boundaryの利用: ReactのError Boundaryは、子コンポーネントツリーで発生したJavaScriptエラーを捕捉し、フォールバックUIを表示するためのコンポーネントです。Inkアプリでも同様に利用できます。
  “`tsx
  class ErrorBoundary extends React.Component {
  constructor(props: any) {
  super(props);
  this.state = { hasError: false };
  }

  static getDerivedStateFromError(error: any) {
  // 次のレンダーでフォールバックUIを表示するように状態を更新します
  return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
  console.error(“Uncaught error in Ink component:”, error, errorInfo);
  // ここでエラーレポートサービスにログを送信することも可能
  }

  render() {
  if (this.state.hasError) {
  return Something went wrong. Please try again.;
  }
  return this.props.children;
  }
  }

  // Appコンポーネントでラップして使用
  // export default function App() {
  // return (
  //
  //
  //
  // );
  // }
  ``
* **CLI特有のエラー表示**: Inkでエラーメッセージを表示する際は、Text color=”red”などを使って目立たせるのが一般的です。致命的なエラーの場合は、useApp().exit(new Error(‘…’))を使ってアプリケーションをエラー終了させると、シェルに適切な終了コードを返せます。
* **デバッグとロギングのベストプラクティス**:
* 開発中はconsole.logを積極的に利用し、状態の変化やイベントの発生を追跡します。
* Inkはターミナル全体を制御するため、console.logを使うとUIが乱れることがあります。デバッグ目的で一時的に表示する場合は良いですが、永続的なロギングにはlog-updateなどのライブラリを併用するか、ファイルにログを出力する方が良いでしょう。
* Node.jsのデバッガー（Chrome DevToolsなど）をInkアプリにアタッチして、ブレークポイントを設定し、コードの実行をステップバイステップで追跡することも可能です。node –inspect-brk dist/cli.js`のように起動します。

第5章：実践プロジェクト：CLIタスクマネージャーの構築

ここでは、React Inkの機能を総合的に活用し、シンプルなCLIタスクマネージャーを構築するプロセスを追います。このアプリケーションは、タスクの追加、表示、完了、削除といった基本的なCRUD操作を対話的に行えるように設計します。

5.1 プロジェクトの企画と要件定義

機能要件:
* タスクの一覧表示
* 新規タスクの追加
* 既存タスクの完了マーク付け/解除
* 既存タスクの削除
* キーボード操作によるナビゲーション
* 終了コマンド（例: qキー）

UI要件:
* ヘッダーとフッター
* タスクリストの表示（タスク名、完了状態）
* 現在の操作モード（表示、追加など）の表示
* 入力プロンプトの表示
* ステータスメッセージ（例: 「タスクが追加されました」）

5.2 アーキテクチャ設計

コンポーネント構成:
* App.tsx: メインコンポーネント。アプリケーションの全体的なレイアウトと、主要な状態（タスクデータ、現在の操作モード）を管理。
* TaskList.tsx: タスク一覧を表示するコンポーネント。選択状態や完了状態を視覚的に表現。
* TaskInput.tsx: 新規タスク名を入力するためのコンポーネント。
* StatusBar.tsx: 現在のモードや操作ヒント、ステータスメッセージを表示。
* Header.tsx / Footer.tsx: アプリケーションの固定ヘッダーとフッター。

状態管理:
* tasks: Task[]型で、各タスクはid, text, completedなどのプロパティを持つ。useStateで管理。
* mode: アプリケーションの現在のモード（例: VIEW, ADD_TASK, CONFIRM_DELETE）。useStateで管理し、useInputでキーイベントに応じてモードを切り替える。
* selectedTaskIndex: タスクリストで現在選択されているタスクのインデックス。useStateで管理。
* statusMessage: ユーザーに一時的に表示するメッセージ。useStateで管理し、useEffectで一定時間後にクリアする。

5.3 各コンポーネントの実装

まず、タスクの型定義から始めます。
typescript
// src/types.ts
export interface Task {
id: string;
text: string;
completed: boolean;
}

App.tsx (メインコンポーネント)

App.tsxはアプリケーションの全体的な骨格と状態管理を担います。

“`tsx
// src/app.tsx
import React, { useState, useEffect, useCallback } from ‘react’;
import { Box, Text, useInput, useApp } from ‘ink’;
import { Task } from ‘./types’;
import Header from ‘./components/Header’;
import Footer from ‘./components/Footer’;
import TaskList from ‘./components/TaskList’;
import TaskInput from ‘./components/TaskInput’;
import StatusBar from ‘./components/StatusBar’;
import { v4 as uuidv4 } from ‘uuid’; // npm install uuid

type AppMode = ‘VIEW’ | ‘ADD_TASK’ | ‘CONFIRM_DELETE’;

export default function App() {
const { exit } = useApp();
const [tasks, setTasks] = useState([]);
const [mode, setMode] = useState(‘VIEW’);
const [selectedTaskIndex, setSelectedTaskIndex] = useState(0);
const [statusMessage, setStatusMessage] = useState(”);

// ステータスメッセージの自動クリア
useEffect(() => {
if (statusMessage) {
const timer = setTimeout(() => setStatusMessage(”), 3000);
return () => clearTimeout(timer);
}
}, [statusMessage]);

// キー入力ハンドリング
useInput((input, key) => {
if (mode === ‘VIEW’) {
if (input === ‘q’) {
exit(); // アプリケーション終了
} else if (input === ‘a’) {
setMode(‘ADD_TASK’); // タスク追加モードへ
} else if (input === ‘d’) {
if (tasks.length > 0) {
setMode(‘CONFIRM_DELETE’); // 削除確認モードへ
} else {
setStatusMessage(‘No tasks to delete.’);
}
} else if (input === ‘ ‘) { // スペースキーで完了/未完了をトグル
if (tasks.length > 0) {
toggleTaskCompleted(selectedTaskIndex);
} else {
setStatusMessage(‘No tasks to mark complete/incomplete.’);
}
} else if (key.upArrow) {
setSelectedTaskIndex(prev => Math.max(0, prev – 1));
} else if (key.downArrow) {
setSelectedTaskIndex(prev => Math.min(tasks.length – 1, prev + 1));
}
} else if (mode === ‘CONFIRM_DELETE’) {
if (input === ‘y’ || input === ‘Y’) {
deleteTask(selectedTaskIndex);
setMode(‘VIEW’);
} else if (input === ‘n’ || input === ‘N’ || key.escape) {
setMode(‘VIEW’); // キャンセル
setStatusMessage(‘Deletion cancelled.’);
}
}
// ADD_TASKモードではTaskInputコンポーネントが入力処理を担当するため、ここでは処理しない
});

const addTask = useCallback((text: string) => {
if (!text.trim()) {
setStatusMessage(‘Task cannot be empty.’);
return;
}
setTasks(prev => […prev, { id: uuidv4(), text, completed: false }]);
setMode(‘VIEW’);
setStatusMessage(‘Task added successfully!’);
}, []);

const toggleTaskCompleted = useCallback((index: number) => {
setTasks(prev =>
prev.map((task, i) =>
i === index ? { …task, completed: !task.completed } : task
)
);
setStatusMessage(Task "${tasks[index].text}" marked as ${tasks[index].completed ? 'incomplete' : 'complete'}.);
}, [tasks]);

const deleteTask = useCallback((index: number) => {
const deletedTaskText = tasks[index].text;
setTasks(prev => prev.filter((_, i) => i !== index));
setSelectedTaskIndex(prev => Math.max(0, Math.min(tasks.length – 2, prev))); // 選択インデックスを調整
setStatusMessage(Task "${deletedTaskText}" deleted.);
}, [tasks]);

return (

  <Box flexGrow={1} flexDirection="column" paddingX={2} paddingY={1}>
    {mode === 'ADD_TASK' ? (
      <TaskInput onAddTask={addTask} onCancel={() => setMode('VIEW')} />
    ) : (
      <TaskList tasks={tasks} selectedIndex={selectedTaskIndex} />
    )}
  </Box>

  <StatusBar mode={mode} statusMessage={statusMessage} />
  <Footer />
</Box>

    return (
      <Text key={task.id} color={isSelected ? 'yellow' : undefined}>
        {prefix}{checkbox} {taskText}
      </Text>
    );
  })}
</Box>