---
title: Dioxus でフロントエンドへの苦手意識が減った話
tags: 
author: [ふみふみ](https://www.docswell.com/user/2323code)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/GJWPR9P272.jpg?width=480
description: 「RustのLT会#4 初心者〜中級者まで大歓迎！ @渋谷」で発表したLT資料です。 https://osaki-rs.connpass.com/event/343903/  AIによる要約： フロントエンドへの苦手意識を和らげるためにRustを利用し、Dioxusを使ったフロントエンド実装の成功体験を共有しています。Rustを学ぶことでReactの概念が理解できるようになり、Reactのコードも以前より読みやすくなったと述べています。また、DioxusというRustのフレームワークを通じて、コンポーネントベースの開発が可能であることも強調しています。  おすすめタグ：Rust,Dioxus,フロントエンド,Web開発,初心者
published: February 27, 25
canonical: https://www.docswell.com/s/2323code/ZP2XP6-2025-02-27-232611
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/GJWPR9P272.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4EZKR9K4E3.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/Y76QRKQG7V.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/G75R8PRXE4.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/9J2DK6DQJR.jpg)

React に似た書き方： RSX


# Page. 6

![Page Image](https://bcdn.docswell.com/page/DEY2N92YEM.jpg)

実際のコード
#[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"
}
}
}
}


# Page. 7

![Page Image](https://bcdn.docswell.com/page/VJN8XL8R78.jpg)



# Page. 8

![Page Image](https://bcdn.docswell.com/page/YE9K84KZE3.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/GE8R8Q2YJD.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/LELKRX29JR.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4JM2RL8VJW.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/PJRMRK5WE9.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/PEXVRLKV7X.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/3EKQRL55ED.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/L73P83K1E5.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/87DLM43KEG.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/VJP2RM43J8.jpg)

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