【完全保存版】Yewを使ってRustでフロントエンドを作ってみよう！

０　始める前に

Rustのインストールが済んでいる前提で進んでいきます。

バージョンは「1.76.0」以上が必要です。

また、私がやった時はnightlyだったのですが、のちに出てくるの「trunk」のインストールに失敗したので、安定版にしました。

１　ターゲットの追加

まずは、wasm用のターゲットを追加します。

rustup target add wasm32-unknown-unknown

私の場合は、下のようにすでに入っていました。

なお、こちらのコマンドで、インストール済みかを確認できます。

rustup target list --installed 

こちらは余談ですが、最初の「unkown」はOSを、二つ目の「unkown」は環境を表しています。（なんでも良いということを表しています）

色々なターゲットを見るとイメージがつきやすいかもですね。

２　Trunkのインストール

下のようにして、インストールします。

cargo install --locked trunk

Trunkはビルドとバンドルを担当しているのですね。

RustコードをWASMにコンパイルして、JavascriptやCSSをまとめて（bundle）くれるようです。

https://trunkrs.dev/

３　CargoでHello Worldを実行しよう

まずは、動くことを確認していきましょう。

下のようにしてパッケージを作ります。

cargo new yew-app

「main.rs」は下のようになっているので、移動して実行してみましょう。

cd yew-app
cargo run

このように、実行されました。

４　Yewによるアプリを作ってみよう

では、今回の本題に移りましょう。

まずは「Cargo.toml」で依存関係としての「yew」を入れます。

yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }

「main.rs」はこちらのコードに書き換えます。

今回コードの詳細は省きますが、Reactに似ていますね。

ちなみに、コードはこちらものもをそのまま使っています。

Build a sample app | Yew

https://yew.rs/docs/getting-started/build-a-sample-app

次に、「index.html」をルートに作ります。

コードは先ほどと同様、こちらにあります。

Build a sample app | Yew

５　立ち上げてみよう

では、こちらのコマンドで立ち上げてみましょう。

trunk serve --open

このように立ち上がれば成功です。