← 一覧へ
🛠 コードを作るCodex難易度: 中級
OpenTUI opentui
ターミナルで広がる新しい世界を体験！
これは何？
OpenTUIは、ターミナル上で動作するアプリケーションを作成するための強力なツールです。ReactやSolidJSのような使い慣れたフレームワークを活用して、直感的にUIを構築できます。ターミナルを使いこなしたい方や、新しいスキルを身につけたい方にぴったりのガイドです。
これでできること
- ターミナル上で動く美しいUIを簡単に作成できる
- ReactやSolidJSを使って、使い慣れた方法で開発できる
- キーボード操作やアニメーションなど、高度な機能を実装できる
- テストやデバッグもサポートされている
- レイアウトや入力処理を柔軟にカスタマイズできる
こんな時に便利
コマンドラインツールのUIを改善したい時
ターミナル上での対話型アプリを開発したい時
ReactやSolidJSを使って新しいスキルを学びたい時
テストやデバッグを効率的に行いたい時
使い方
まずは`create-tui`コマンドを使って新しいプロジェクトを作成しましょう。ReactやSolidJSなどのフレームワークを選択し、ターミナル上で動くUIを構築していきます。ドキュメントを参考にしながら、必要なコンポーネントやレイアウトを追加していきましょう。
使用例（こう頼んでみよう）
`bunx create-tui -t react my-app``bunx create-tui -t solid my-cli-tool``npm install opentui`必要なもの
- Node.js
- Bun
導入方法
いちばん簡単（AIに頼む）
次のスキルを入れて: https://github.com/cline/cline/tree/main/.agents/skills/opentui手動で置く
Claude Code →
~/.claude/skills/opentui/Codex →
~/.agents/skills/opentui/使いこなしのコツ
- `create-tui`コマンドのオプションは必ず引数の前に指定しましょう。
- `process.exit()`ではなく`renderer.destroy()`を使ってアプリを終了させましょう。