警察 vs ヤクザのコントで学ぶ！Rust GUI「gpui-component」はなぜ高性能で使いやすいのか

longbridge/gpui-component

これは、Rustで高性能かつクロスプラットフォームなデスクトップアプリケーションのGUI（グラフィカルユーザーインターフェース）を構築するためのコンポーネントライブラリです。

要するに、Rustで素晴らしいデスクトップアプリを作るための、「部品の詰まった宝箱」のようなものです。特に、大規模なデータや高速な描画が必要なアプリ（例IDE、高性能なツール）開発に適しています。

高橋 巡査
「龍造寺組長、また派手なアプリケーションを作ろうとしているな？ しかし、その手のアプリはクロスプラットフォーム対応やパフォーマンスでいつも手間取っているでしょう。」

龍造寺 組長
「チッ、巡査か。ワシのシマのアプリは見た目が命じゃ！ だが、他のフレームワークは面倒な設定だらけで、動きもモタつく。まるで重い手錠をかけられとる気分だぜ。」

高橋 巡査 「そこにこの『gpui-component』です！ ベースのGPUIはGPU直結の高速描画が特徴。あなたの求める「速さ」は保証されます。」

龍造寺 組長
「ほほう？ 処理が速いのは良いな。だが、デザインはどうだ？ 貧相なボタンやダサいテーブルじゃ、ワシの美学に反する。」

高橋 巡査 「ご安心を。このライブラリには、60種類以上の洗練されたコンポーネントが揃っています。さらに、テーマ機能も標準搭載。あなたのアプリを『漆黒の闇』のようにクールに装飾できますよ。」

龍造寺 組長
「漆黒の闇…いい響きだ。しかも、Rustで作れるんだろう？ 安全性が高いから、巡査も文句は言えまい。これなら、シマを問わず（クロスプラットフォームで）、ワシのアプリを広められるな！」

高橋 巡査 「（ニコリ）ええ。豊富なコンポーネントで開発効率が上がり、GPUベースの高速描画でユーザー体験も抜群です。堅牢性（Rust）と華やかさ（豊富なUI）を両立できる、最強の助っ人です！」

高パフォーマンス
GPUをフル活用した高速な描画で、スムーズなUXを実現。

開発効率
ボタン、入力、テーブル、チャート、エディタなど、すぐに使えるコンポーネントが豊富。

クロスプラットフォーム
Rustの利点を活かし、Windows/macOS/Linuxで動作するデスクトップアプリを構築可能。

テーマ性
簡単にテーマを変更でき、ダークモード対応も容易。

Rustプロジェクトでこのライブラリを使うには、Cargo.tomlに依存関係を追加します。

プロジェクトのルートにあるCargo.tomlファイルを開き、[dependencies]セクションに以下を追加します。

[dependencies]
# GPUI本体とコンポーネントを導入
gpui = "0.7.0" # 最新版に合わせてください
gpui-component = "0.3.0" # 最新版に合わせてください

# 非同期処理のためのtokioもよく使われます
tokio = { version = "1.37", features = ["macros", "rt-multi-thread"] }

注意点
GPUIはまだ開発途上のプロジェクトであり、APIが頻繁に変わる可能性があります。バージョン番号はGitHubで最新のものを確認してください。

GPUIは一部の高度な機能のためにRustのNightlyチャンネルを要求する場合があります。

# Nightlyチャンネルに切り替える（推奨される場合）
rustup override set nightly

ここでは、gpui-componentを使って「ボタン」を表示する最もシンプルな例を示します。

基本的なGPUIアプリケーションは、main関数でアプリを起動し、ウィンドウ内にビュー（View）を作成してUIを描画します。

use gpui::{App, AnyView, View, ViewContext, WindowOptions};
use gpui_component::{
    button::{Button, ButtonSize}, // Buttonコンポーネントをインポート
    prelude::*, // コンポーネント関連のトレイトなど
};

// 1. アプリケーションのルートとなる構造体
struct MyApp {}

// 2. Viewを実装し、UIを構築
impl View for MyApp {
    // 描画するUIの定義
    fn render(&mut self, cx: &mut ViewContext<Self>) -> AnyElement {
        // VStack (垂直方向に要素を積み重ねるレイアウト)
        v_stack(cx, |cx| {
            // HACK: ここでテーマの色を一時的に設定（実際のアプリではより正式な方法を使います）
            // cx.set_theme(DefaultTheme::dark());

            // 1. 大きなプライマリボタン
            Button::new("Primary Action", cx)
                .size(ButtonSize::Large)
                .on_click(move |_, _| {
                    println!("Primaryボタンが押されました！");
                })
                .into_element()
            .with_margin_bottom(Length::Rem(1.0)) // 下に余白

            // 2. 標準サイズのセカンダリボタン
            Button::new("Secondary Button", cx)
                .on_click(move |_, _| {
                    println!("Secondaryボタンが押されました！");
                })
                .into_element()

        })
        .with_padding(Length::Rem(2.0)) // 全体にパディング
        .into_any_element() // 任意の要素として返す
    }
}

fn main() {
    // 3. アプリケーションを起動
    App::new().run(|cx| {
        // 初期ウィンドウの設定
        let options = WindowOptions {
            titlebar: Some(Default::default()),
            bounds: None,
            kind: gpui::WindowKind::Normal,
            is_maximized: false,
            focus: true,
            is_movable: true,
            display_id: None,
        };
        
        // 4. MyAppをビューとしてウィンドウに表示
        cx.open_window(options, |cx| {
            // `View::new`でMyAppのインスタンスを作成
            cx.new_view(|_| MyApp {})
        });
    });
}

gpui_component::prelude::*
コンポーネントを使う上で必要なマクロやトレイトなどをまとめてインポートします。

Button::new("ラベル", cx)
ボタンのインスタンスを作成します。cxはコンテキストで、UIの構築に必須です。

.size(...)
メソッドチェーンでコンポーネントのプロパティ（ここではサイズ）を設定できます。

.on_click(...)
ボタンがクリックされた時のイベントハンドラを定義します。Rustのmoveクロージャを使って、クリック時の動作を記述します。

v_stack(cx, |cx| { ... })
垂直方向のレイアウトコンテナです。他のコンポーネントも同様にh_stack（水平）やstack（重ね合わせ）などが使えます。

このライブラリを使えば、Rustの持つ堅牢性とパフォーマンスを活かしつつ、モダンでリッチなデスクトップアプリケーションを効率的に開発できます。