対象読者
- RustのTheBookの数当てゲームはやったけど、それ以外あまり触ったことがない人
- RustでWebアプリケーションを作ってみたい人
- Dioxusに興味がある人
この記事でわかること
- どんな手順でDioxusの環境構築をすれば良いか
- 初めて
dx serveを実行した際のエラー対処法
結論
- DioxusはWeb、デスクトップ、モバイルのアプリケーションがで作れるRustのフレームワーク。
-
dx newで新たにプロジェクトを作成できる。 - rsxを使って、Rustから表示したい要素を宣言できる。
-
dx serveでサーバーを立てられる。 -
--hot-reloadオプションを使うと、ページを更新せずとも自動で再描画される。
Dioxusとは
Dioxus | Fullstack crossplatform app framework for Rust
Rustのフレームワークの一つで、Webアプリーケーション、デスクトップアプリケーション、モバイルのアプリケーションを作ることができます。
下記リンク先にもあるように、DioxusはReactから影響を受けて作られているため、Reactのjsxやtsxに似たrsxという書き方が登場します。
やってみる
今回のゴール
- ローカルで作成したページを表示してみる
- 最低限ページを表示するまでの段取りを話せる
新しくプロジェクトを作成する
好きなディレクトリに移動して、dx newコマンドを実行します。
cd my_directory
dx new
実行すると質問が表示されるので、作りたいものに合わせて選択していきます。
今回は
- Web
- tailwind
- Dioxusのサーバーを利用
としました。
コンポーネントを追加する
コマンドを実行し終えるとディレクトリが生成されます。
src/main.rsを開いて、実際にコンポーネントとルーティングをしていきます。
src/main.rsに既にいくつもコンポーネントがある
実際に開いてみると、既にいくつかコンポーネントが定義されています。
下記のHome {}の部分がコンポーネントです。
// src/main.rs
#[derive(Clone, Routable, Debug, PartialEq)]
enum Route {
#[route("/")]
Home {},
// ...
今回はトップページに自作のコンポーネントを配置・表示させたいため、Homeコンポーネントをコメントアウトしておきます。
自作のコンポーネントを定義してみる
完成したものがこちらになります。
// src/main.rs
#[derive(Clone, Routable, Debug, PartialEq)]
enum Route {
#[route("/")]
About {}, // 自作のコンポーネント
// ...
// Aboutコンポーネントの定義
#[component]
fn About() -> Element {
rsx! {
div{
h1 {"What is RustLadies?"}
p {"RustLadiesは、Rustに興味がある女性のためのコミュニティです。"}
p {"初心者、熟練者問わず、Rustに興味がある女性ならどなたでもご参加いただけます。"}
}
}
}
コンポーネントを定義する際には#[component]アトリビュートをつけます。
Component - Dioxus | Fullstack crossplatform app framework for Rust
また、必ず描画したいUIをrsx!マクロを使って宣言します。
例え今回なら、ばh1要素とp要素を描画したいので下記のように書いています。
rsx! {
div{
h1 {"What is RustLadies?"}
p {"RustLadiesは、Rustに興味がある女性のためのコミュニティです。"}
p {"初心者、熟練者問わず、Rustに興味がある女性ならどなたでもご参加いただけます。"}
}
}
rsxについては下記も参考にしてください。
RSX - Dioxus | Fullstack crossplatform app framework for Rust
サーバーを立ててみる
では実際にコンポーネントとルーティングができたので、サーバーを立てて表示してみます。
dx serve --hot-reloadコマンドを実行して、サーバーを立てます。
この時、下記のようなエラーに遭遇する場合があります。
Error: 🚫 Serving project failed:
Caused by:
Build Failed: WASM bindgen build failed!
This is probably due to the Bindgen version, dioxus-cli is using `0.2.93` which is not compatible with your crate.
Please reinstall the dioxus cli to fix this issue.
You can reinstall the dioxus cli by running `cargo install dioxus-cli --force` and then rebuild your project
エラー: 🚫プロジェクトのサーブに失敗しました：
原因
ビルドに失敗しました： WASM bindgen のビルドに失敗しました！
これはおそらく Bindgen のバージョンによるもので、dioxus-cli は 0.2.93 を使用しています。
この問題を解決するには、dioxus cliを再インストールしてください。
cargo install dioxus-cli --force` を実行して dioxus cli を再インストールし、プロジェクトを再構築してください。
Bindgenのバージョンが原因でビルドに失敗したようです。
エラーに表示されているように、dioxusのCLIツールを再インストールすればOKです。
実行すると、自動で再ビルドが走ります。
ビルドに10分ほどかかるので気長に待ちましょう。
cargo install dioxus-cli --force
無事ビルドできて「Well done 👑」とでたら成功です！！
http://localhost:8080/ にアクセスしてみます。
表示を確認する
無事に表示できました！！！！
ちなみに--hot-reloadオプションをつけて実行すると、更新せずともrsxの内容をリアルタイムで反映させることができます。
まとめ
- DioxusはWeb、デスクトップ、モバイルのアプリケーションがで作れるRustのフレームワーク。
-
dx newで新たにプロジェクトを作成できる。 - rsxを使って、Rustから表示したい要素を宣言できる。
-
dx serveでサーバーを立てられる。 -
--hot-reloadオプションを使うと、ページを更新せずとも自動で再描画される。
最後に
本当にとても簡単にWebページが作れました。
自分が運営するコミュニティのサイトも、Dioxusで完成させてみたいです！
もし「こんなやり方もあるよ」などの情報があれば、ぜひ教えてくださいね！
宣伝
Rustが好きな女性で交流できる場「RustLadies」というコミュニティを運営しています！！
月に一度、お菓子を食べながらThe bookを中心にワイワイやっています〜！！
Rustに興味がある女性の方であれば、どなたでも大歓迎です！🦀
次回は12/22（日）ですので、ぜひお気軽にお越しください！