Ubuntu上で Rust × ratatui の開発環境構築方法・TUI上にHelloWorld表示まで

今回はrustでtui(ターミナルユーザインタフェース）ツールを構築するまでの環境構築を紹介します。

これを自作できるところまでのセットアップ方法を紹介します。

1. Rustの環境構築

まずは必要なシステムライブラリをインストールします。ratatui 自体はピュア Rust ですが、バックエンドとして crossterm（ターミナル制御）を使うのが一般的です。

Rustが使える環境構築 : 関連記事は、2026年4月21日に公開予定 (あと19時間)

2. tui開発環境を作る

Rustが動く環境で、以下のコマンドのようにすることでTUI開発環境が作れます。(my-tui-appは任意の名前(新規で作られるディレクトリ名)なので自由に変えてください。)

# プロジェクトの作成
cargo new my-tui-app
cd my-tui-app

# 必要なクレートの追加
# ratatui: TUI本体
# crossterm: ターミナルの描画・イベント制御（クロスプラットフォーム）
cargo add ratatui crossterm

3. 実装の基本構造

とりあえず、自動生成のTUIが動くか見てみます。

cargo run

実行すると、main.rsにデフォルト生成されるHelloWorld!を出力するコードがコンパイルされ実行されます。

rust のTUI開発環境 ratatuiのデフォルト生成ファイルが動くかテストした画像

Hello, world!　が出力される

TUIのサンプルを動かす

ratatui の開発は、大きく分けて 「ターミナルの初期化」「メインループ（描画＆イベント）」「終了処理」 の 3 つで構成されます。

以下のコードを “src/main.rs” に貼り付けてみてください。

サンプルコード：シンプルなTUI

use crossterm::{
    event::{self, Event, KeyCode},
    execute,
    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
};
use ratatui::{
    backend::CrosstermBackend,
    widgets::{Block, Borders, Paragraph},
    Terminal,
};
use std::{error::Error, io};

fn main() -> Result<(), Box<dyn Error>> {
    // --- 1. セットアップ ---
    enable_raw_mode()?; // キー入力をそのままプログラムに送るモード
    let mut stdout = io::stdout();
    execute!(stdout, EnterAlternateScreen)?; // 専用の描画画面（バッファ）を開く
    
    let backend = CrosstermBackend::new(stdout);
    let mut terminal = Terminal::new(backend)?;

    // --- 2. メインループ ---
    loop {
        // UIの描画
        terminal.draw(|f| {
            let area = f.area();
            let content = Paragraph::new("Hello, Ratatui!\nPress 'q' to quit.")
                .block(Block::default().borders(Borders::ALL).title(" TUKUMO TUI Sample "));
            f.render_widget(content, area);
        })?;

        // キー入力の待機と判定
        if let Event::Key(key) = event::read()? {
            if let KeyCode::Char('q') = key.code {
                break; // 'q' が押されたらループを抜ける
            }
        }
    }

    // --- 3. クリーンアップ ---
    disable_raw_mode()?;
    execute!(terminal.backend_mut(), LeaveAlternateScreen)?;
    terminal.show_cursor()?;

    Ok(())
}

このサンプルコードで以下のような、HelloWorldが表示され、qで離脱できるUIになります。

TUIのサンプルコードの実行例

4. UI 開発の考え方：Layout と Widget

ratatui で複雑な UI を作る際は、「画面を分割して、そこにウィジェットをはめ込む」 というパズルに近い感覚になります。

WebのようなコンポーネントベースのモダンUIというよりは、
レイアウトで領域（Rect）を明示的に分割し、それぞれに描画していくスタイルです。

どちらかというと、昔ながらのグリッドベースのUIや、座標指定に近い設計思想になっています。

レイアウトの分割例

例えば、上部に「計算式」、下部に「結果」を表示したい場合は、Layout を使って領域（Rect）を分割します。

use ratatui::layout::{Layout, Constraint, Direction};
fn ui(f: &mut Frame) {
// 画面を垂直に 3:7 で分割
    let chunks = Layout::default()
        .direction(Direction::Vertical)
        .constraints([
            Constraint::Percentage(30),
            Constraint::Percentage(70),
        ])
        .split(f.area());

    // chunks[0] に計算式、chunks[1] に結果を配置、といった使い方ができる
    f.render_widget(Block::default().title("Input").borders(Borders::ALL), chunks[0]);
    f.render_widget(Block::default().title("Output").borders(Borders::ALL), chunks[1]);

}