Dioxus でフロントエンドへの苦手意識が減った話

Dioxus でフロントエンドへの苦手意識が減った話 ふみふみ 2025/02/27(木) Rust の LT 会#4 初心者〜中級者まで大歓迎！ @渋谷

今日一番伝えたいこと なぜフロントエンドへの苦手意識が減った？ Rust でフロントエンド実装できた → 成功体験！！ Rust を通じて React の概念を学べたから React のコードが Dioxus 触る前より読めるようになったから

背景 業務の社内 Web アプリで Rust を使うことに フロントエンドに Dioxus が採用！ バックエンドは別のクレート

Dioxus とは Rust のフレームワーク Web のフロントエンド、バックエンドを 1 つで開発できる コンポーネントベース React のようなコードを Rust で書ける https://dioxuslabs.com/

• https://dioxuslabs.com/

React に似た書き方： RSX

実際のコード
#[component]
fn App() -> Element {
let mut count = use_signal(|| 0);
rsx! {
document::Stylesheet {
href: asset!("/assets/tailwind.css")
}
div {
div { "Now Count is {count}" }
button {
onclick: move |_| count +=1,
"+1"
}
button {
onclick: move |_| count -=1,
"-1"
}
}
}
}

しかし... フロントエンド、めちゃくちゃ苦手 CSS 全然書けない React はチュートリアルをやったきり

ひとまずプレリリースまで頑張る Rust はずっと触りたかった 苦手なことでも Rust なら頑張れる Rust 楽しい

開発中にぶつかったこと スタイリングわからん CSS の実装調査 + Tailwind の場合を調べて実装

開発中にぶつかったこと 状態管理わからん React ドキュメント + dioxus ドキュメント + サンプルコード ex: useState(), useSignal()

無事プレリリース！！ 上長の助けもあり、なんとかなった！！

久しぶりに React のドキュメントでも読んでみるか...

おや？ Dioxus とほぼやっていること同じ あれ、見覚えあるステート... あれ、コンポーネントを組み合わせてページを作っている...

読める、読めるぞッ！！！！ >>> タイトルに戻る <<<

結論 なぜフロントエンドへの苦手意識が減った？ Rust でフロントエンド実装できた → 成功体験！！ Rust を通じて React の概念を学べたから React のコードが Dioxus 触る前より読めるようになったから

ありがとうございました！ 感想等、Twitter でお待ちしています！ ふみふみ Web エンジニア Rust Ladies 運営 X: @2323-code