【Rust】Rust初心者がdioxusでサクッとWebページを作ってみる

## 対象読者

- 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](https://dioxuslabs.com/)

Rustのフレームワークの一つで、Webアプリーケーション、デスクトップアプリケーション、モバイルのアプリケーションを作ることができます。

下記リンク先にもあるように、DioxusはReactから影響を受けて作られているため、Reactのjsxやtsxに似た`rsx`という書き方が登場します。

https://dioxuslabs.com/learn/0.5/#:~:text=Dioxus%20is%20heavily%20inspired%20by%20React.%20If%20you%20know%20React%2C%20getting%20started%20with%20Dioxus%20will%20be%20a%20breeze.


## やってみる
### 今回のゴール
- ローカルで作成したページを表示してみる
- 最低限ページを表示するまでの段取りを話せる


### 新しくプロジェクトを作成する

好きなディレクトリに移動して、`dx new`コマンドを実行します。

```shell-session
cd my_directory
dx new
```

実行すると質問が表示されるので、作りたいものに合わせて選択していきます。

今回は

- Web
- tailwind
- Dioxusのサーバーを利用

としました。

### コンポーネントを追加する

コマンドを実行し終えるとディレクトリが生成されます。

`src/main.rs`を開いて、実際にコンポーネントとルーティングをしていきます。

#### `src/main.rs`に既にいくつもコンポーネントがある

実際に開いてみると、既にいくつかコンポーネントが定義されています。

下記の`Home {}`の部分がコンポーネントです。


```rust
// src/main.rs

#[derive(Clone, Routable, Debug, PartialEq)]
enum Route {
    #[route("/")]
    Home {},
    // ...
```

今回はトップページに自作のコンポーネントを配置・表示させたいため、Homeコンポーネントをコメントアウトしておきます。

#### 自作のコンポーネントを定義してみる

完成したものがこちらになります。

```rust
// 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](https://dioxuslabs.com/learn/0.5/reference/components)

また、必ず描画したいUIを`rsx!`マクロを使って宣言します。

例え今回なら、ばh1要素とp要素を描画したいので下記のように書いています。

```rust
    rsx! {
        div{
            h1 {"What is RustLadies?"}
            p {"RustLadiesは、Rustに興味がある女性のためのコミュニティです。"}
            p {"初心者、熟練者問わず、Rustに興味がある女性ならどなたでもご参加いただけます。"}
        }
    }        
```

rsxについては下記も参考にしてください。

[RSX - Dioxus | Fullstack crossplatform app framework for Rust](https://dioxuslabs.com/learn/0.5/reference/rsx)

### サーバーを立ててみる
では実際にコンポーネントとルーティングができたので、サーバーを立てて表示してみます。

`dx serve --hot-reload`コマンドを実行して、サーバーを立てます。

この時、下記のようなエラーに遭遇する場合があります。

```shell-session
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分ほどかかるので気長に待ちましょう。

```shell-session
cargo install dioxus-cli --force
```

無事ビルドできて「Well done 👑」とでたら成功です！！

http://localhost:8080/ にアクセスしてみます。

### 表示を確認する
無事に表示できました！！！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687477/f07f6926-6d65-ac97-a9f0-4a3f9bf2ca55.png)

ちなみに`--hot-reload`オプションをつけて実行すると、更新せずともrsxの内容をリアルタイムで反映させることができます。

## まとめ

- DioxusはWeb、デスクトップ、モバイルのアプリケーションがで作れるRustのフレームワーク。
- `dx new`で新たにプロジェクトを作成できる。
- rsxを使って、Rustから表示したい要素を宣言できる。
- `dx serve`でサーバーを立てられる。
- `--hot-reload`オプションを使うと、ページを更新せずとも自動で再描画される。

## 最後に

本当にとても簡単にWebページが作れました。

自分が運営するコミュニティのサイトも、Dioxusで完成させてみたいです！

もし「こんなやり方もあるよ」などの情報があれば、ぜひ教えてくださいね！

### 宣伝

Rustが好きな女性で交流できる場「RustLadies」というコミュニティを運営しています！！

月に一度、お菓子を食べながらThe bookを中心にワイワイやっています〜！！

Rustに興味がある女性の方であれば、どなたでも大歓迎です！🦀

次回は12/22（日）ですので、ぜひお気軽にお越しください！

https://rustladies.connpass.com/event/337620/

## 参考文献
- [アトリビュート - Rust By Example 日本語版](https://doc.rust-jp.rs/rust-by-example-ja/attribute.html)
- [Dioxus | Fullstack crossplatform app framework for Rust](https://dioxuslabs.com/)