はじめに

近年、Webフロントエンドの開発においてRust言語が大きな注目を集めています。その中でも、DioxusはReactライクなコンポーネント志向でありながらも、Rustで書けるWebフレームワークとして多くのエンジニアから支持を得ています。本記事では、Dioxusの基礎から実践的な活用方法、応用的なテクニックまで13章にわたって徹底的に解説します。各章には実際に使えるサンプルコードを添えて、Dioxusを導入したいエンジニアや初心者の方でもすぐに試せる内容となっています。

第1章 Dioxusとは？

Rustで書かれたDioxusは、Webフロントエンド開発にReactのような宣言的コンポーネントモデルをもたらします。Rustの安全で高速な特徴を最大限に活かしつつ、幅広いプラットフォームで利用可能です。

fn main() {
    println!("DioxusはRustで使えるフロントエンドフレームワークです。");
}

第2章 Dioxusのプロジェクト作成

Dioxusで開発を始める際は、まず新規プロジェクトを作成します。CLIツールを使えば手軽にテンプレートプロジェクトを生成できます。

cargo install dioxus-cli
dioxus new hello-dioxus
cd hello-dioxus
dioxus serve

第3章基本的な“Hello, World!”アプリ

プロジェクト作成後、まずはおなじみの“Hello, World!”アプリを作ります。Dioxusでは関数コンポーネントでUIを記述します。

use dioxus::prelude::*;

fn main() {
    dioxus_web::launch(app);
}

fn app(cx: Scope) -> Element {
    cx.render(rsx! {
        h1 { "こんにちは、Dioxus!" }
    })
}

第4章 JSX風記法(rsx!)の使い方

DioxusではReactのJSXのように、rsx!マクロを使ってUIを構築します。直感的にHTML構造を書けるのが特徴です。

fn ui(cx: Scope) -> Element {
    cx.render(rsx! {
        div {
            h2 { "Dioxus rsx!の例" }
            p { "これは段落タグです。" }
        }
    })
}

第5章 State（状態）とuse_state

フロントエンドUIには状態管理が欠かせません。Dioxusではuse_stateフックで状態を持てます。クリックでカウンターが増える例です。

fn counter(cx: Scope) -> Element {
    let count = use_state(cx, || 0);
    cx.render(rsx! {
        button { onclick: move |_| count.set(*count + 1), "カウント: {count}" }
    })
}

第6章コンポーネントの分割

UIを機能ごとに分割して書きましょう。Dioxusは関数としてコンポーネントを定義し、ネストできます。

fn main(cx: Scope) -> Element {
    cx.render(rsx! {
        Header {}
        Content {}
    })
}

fn Header(cx: Scope) -> Element {
    cx.render(rsx! { h1 { "ヘッダー" } })
}

fn Content(cx: Scope) -> Element {
    cx.render(rsx! { p { "本文セクションです。" } })
}

第7章 Props（プロパティ）の受け渡し

コンポーネント間でデータを受け渡すにはPropsを使います。Rustの構造体としてpropsを記述し、型安全にやり取り可能です。

#[derive(Props)]
struct MessageProps {
    text: &'a str,
}

fn Message(cx: Scope>) -> Element {
    cx.render(rsx! {
        p { "{cx.props.text}" }
    })
}

// 使用例
fn main(cx: Scope) -> Element {
    cx.render(rsx! {
        Message { text: "伝言です" }
    })
}

第8章イベントハンドリング

Dioxusではoninputやonclickなど、イベント処理も直感的です。ユーザー操作に応じて状態を変更できます。

fn click_app(cx: Scope) -> Element {
    let clicked = use_state(cx, || false);
    cx.render(rsx! {
        button {
            onclick: move |_| clicked.set(true),
            if *clicked { "クリック済み" } else { "クリックして下さい" }
        }
    })
}

第9章 use_effectと副作用処理

Dioxusはuse_effectフックで副作用を記述できます。初回レンダリング時や特定の状態変化時にのみ実行したい処理も簡単です。

fn effect_example(cx: Scope) -> Element {
    let count = use_state(cx, || 0);

    use_effect(cx, count, |count| async move {
        println!("カウントが変化: {}", count);
    });

    cx.render(rsx! {
        button { onclick: move |_| count.set(*count + 1), "増やす" }
    })
}

第10章 CSSスタイリング

Dioxusは内蔵のclass属性を活用し、外部CSSファイルとも組み合わせてスタイリングできます。使い慣れたクラス名で装飾が可能です。

fn styled(cx: Scope) -> Element {
    cx.render(rsx! {
        div { class: "container",
            h2 { class: "main-title", "スタイル付きタイトル" }
            p { "これはスタイル付きコンテンツです。" }
        }
    })
}

第11章 List（リスト）レンダリング

Dioxusで配列やベクタのデータから動的にリストを生成することも容易です。forループやiter().map()を活用します。

fn list_app(cx: Scope) -> Element {
    let items = vec!["りんご", "みかん", "バナナ"];
    cx.render(rsx! {
        ul {
            items.iter().map(|item| rsx! {
                li { "{item}" }
            })
        }
    })
}

第12章 Routerによるページ遷移

複数ページ構成にしたい場合、DioxusにはRouterプラグインがあります。Routeごとに異なるコンポーネントを表示できます。

use dioxus_router::*;

fn main() {
    dioxus_web::launch(app);
}

fn app(cx: Scope) -> Element {
    cx.render(rsx! {
        Router {
            Route { to: "/", Home {} }
            Route { to: "/about", About {} }
        }
    })
}

fn Home(cx: Scope) -> Element { cx.render(rsx! { h2 { "ホーム" } }) }
fn About(cx: Scope) -> Element { cx.render(rsx! { h2 { "このサイトについて" } }) }

第13章リリースとデプロイ

完成したDioxusアプリは手軽にリリースできます。WebAssemblyでビルドし、さまざまなホスティングサービスにデプロイ可能です。

cargo install dioxus-cli
dioxus build --release
# distフォルダ内のファイルをホスティングサービスへアップロード

まとめ

Dioxusは、Rustの安全性と高速性を活かしつつ、Web、デスクトップなど幅広いターゲットで活用できる次世代フロントエンドフレームワークです。本記事を通じて、Dioxusの基本から応用までを実践的に学び、すぐにプロジェクトへ導入できる知識やテクニックが身についたはずです。ぜひ、この章構成とサンプルコードを活用し、Rust×Dioxusの魅力を体験してみてください。