mcpField
D
dioxus-guide

dioxus-guide

github.com/daiki48開発036 回インストール3 週間前に更新
リポジトリ

dioxus-guide について

Dioxus アプリを開発する人向けの、Dioxus v0.7.x リファレンススキルです。RSX、シグナル、ルーティング、イベント処理、CLI コマンドなどの基本 API とパターンを扱います。

主な機能

  1. 01Dioxus 0.7 のセットアップ
  2. 02RSX とコンポーネントのパターン
  3. 03シグナル、メモ、コンテキスト API
  4. 04非同期リソースとルーティング
  5. 05イベント処理と dx コマンド

活用シーン

  1. 01Dioxus 0.7 プロジェクトの開始
  2. 02コンポーネントの状態とコンテキストの実装
  3. 03ルートとイベントハンドラーの追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/daiki48/dotfiles --skill dioxus-guide

インストール後、Claude Code で/dioxus-guideを入力して読み込まれたか確認します。

詳細

Dioxus v0.7.x 開発ガイド

破壊的変更（0.6 から）

0.7 で非推奨：

  • cx / Scope → 不要
  • use_state → use_signal
  • use_ref → use_signal

基本設定

use dioxus::prelude::*;

fn main() { dioxus::launch(App); }

#[component]
fn App() -> Element {
    rsx! { "Hello, Dioxus!" }
}

[dependencies]
dioxus = { version = "0.7.2", features = ["router"] }

[features]
default = ["desktop"]
web = ["dioxus/web"]
desktop = ["dioxus/desktop"]

RSX マクロ

rsx! {
    div { class: "container", color: "red",
        width: if condition { "100%" },  // Conditional attr
        "Hello!"
    }

    for i in 0..5 { div { "{i}" } }      // Loop (prefer for over iter)

    if condition { div { "True!" } }      // Conditional

    {children}                            // Expressions in braces
}

コンポーネント

#[component]
fn MyComponent(
    title: String,
    #[prop(optional)] class: Option<String>,
    #[prop(default = 10)] limit: usize,
    children: Element,
) -> Element {
    rsx! {
        div { class: class.unwrap_or_default(),
            h1 { "{title}" }
            {children}
        }
    }
}

Props：所有型（&str ではなく String）を使用し、PartialEq と Clone を実装する必要があります。

状態：use_signal

#[component]
fn Counter() -> Element {
    let mut count = use_signal(|| 0);

    rsx! {
        h1 { "Count: {count}" }
        button { onclick: move |_| *count.write() += 1, "+" }
    }
}

// Read
count()        // Clone value
count.read()   // Reference (&T)

// Write
count.set(10)
*count.write() = 10
count.with_mut(|c| *c += 1)

派生状態：use_memo

let doubled = use_memo(move || count() * 2);

コンテキスト API

// Provider
#[component]
fn App() -> Element {
    let theme = use_signal(|| "light".to_string());
    use_context_provider(|| theme);
    rsx! { Child {} }
}

// Consumer
#[component]
fn Child() -> Element {
    let theme = use_context::<Signal<String>>();
    rsx! { div { "Theme: {theme}" } }
}

非同期処理：use_resource

let data = use_resource(move || async move { fetch_data().await });

match data() {
    Some(result) => rsx! { div { "{result}" } },
    None => rsx! { "Loading..." },
}

// With dependency
let user = use_resource(move || {
    let id = user_id();  // Re-runs when this changes
    async move { fetch_user(id).await }
});

ルーティング

#[derive(Routable, Clone, PartialEq)]
enum Route {
    #[layout(NavBar)]
        #[route("/")]
        Home {},
        #[route("/blog/:id")]
        BlogPost { id: i32 },
}

#[component]
fn NavBar() -> Element {
    rsx! {
        nav { a { href: "/", "Home" } }
        Outlet::<Route> {}
    }
}

#[component]
fn App() -> Element {
    rsx! { Router::<Route> {} }
}

イベント

rsx! {
    button { onclick: move |_| { /* click */ }, "Click" }

    input {
        oninput: move |e| set_value(e.value()),
        prop:value: value,
    }

    input { onkeydown: move |e| {
        if e.key() == Key::Enter { /* enter pressed */ }
    }}

    form { onsubmit: move |e| {
        e.prevent_default();
        // submit
    }}
}

デスクトップ設定（Dioxus.toml）

[desktop.window]
title = "MyApp"
width = 1200
height = 800

コマンド

curl -sSL http://dioxus.dev/install.sh | sh  # Install dx CLI
dx serve        # Dev server
dx build --release
dx bundle --release  # Create .deb etc.

Dioxus と Leptos の比較

項目Dioxus 0.7Leptos 0.8
シグナルuse_signal（Copy に近い）signal()（クローンが必要な場合があります）
マクロrsx! {}view! {}
デスクトップネイティブサポートTauri が必要

コメント

Markdown 対応