2025-05-31

Rustでフロントエンドを作るためのフレームワークYew

Yew

Rust

Yewとは

https://yew.rs/ja/

Rustを使ってReactみたいなコンポーネントベースでUIを組めるフレームワーク。
発音はChatGPT曰く「ユー」（/juː/）。

導入

cargo new hello-yewでプロジェクト作成
Cargo.tomlのdependenciesにyewクレートを追加
cargo update

WASMをビルドする準備

target追加

$ rustup target add wasm32-unknown-unknown

Trunkインストール

Trunkを使うことで、WASM ＋ HTML ＋ WASMを呼びだすJSをセットでビルドしてくれる。

$ cargo install --locked trunk

UI作成

html!マクロでJSXのように書ける。

use yew::prelude::*;

// Appコンポーネントを定義
#[function_component(App)]
fn app() -> Html {
    html! {
        <h1>{"Hello, Yew!"}</h1>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

Trunkでビルドするためにindex.htmlを用意

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello, Yew!</title>
  </head>
  <body></body>
</html>

ローカルでアプリのビルド・起動

$ trunk serve --open

Rustでフロントエンドを作るためのフレームワークYew

Yewとは

導入

WASMをビルドする準備

target追加

Trunkインストール

UI作成

ローカルでアプリのビルド・起動

参考