🌞

Yew で始める Rust のフロントエンド開発

Shota

2024/04/02に公開

はじめに

Rust でフロントエンド開発を可能にするフレームワークの Yew を使ってみます。
最初は Rust でフロントエンド？！と思いましたが、割と前からある有名なフレームワークみたいです。
今回はチュートリアルにフォーカスしていますが、
ゆくゆくは React 等のフレームワークとパフォーマンスにどのような違いがあるかなど、調べてみたいと思います。

▼ Yew ドキュメント
https://yew.rs/ja/

下準備＆ Hello, world!

チュートリアルのページに沿って、順番にやっていきます。

まずは Trunkをインストールする必要があるようなので、以下コマンドを実行します。

$ cargo install trunk

▼ Trunk について
https://trunkrs.dev/

wasm32-unknown-unknownをターゲットアーキテクチャに追加します。

$ rustup target add wasm32-unknown-unknown

プロジェクトディレクトリの作成をします。

$ cargo new yew-app
$ cd yew-app

cargo run を実行する。

$ cargo run

Hello, world!が出力されることを確認します。

Hello, world!

簡単なフロントエンドの実装

Cargo.toml に yew を追加します。

$ cargo add yew

git、features を追加します。

Cargo.toml

[package]
name = "yew-app"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

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

main.rsを以下のように修正します。
#[function_component(App)]とすることでwebコンポーネント化できるようです。

main.rs

use yew::{function_component, html, Html};

#[function_component(App)]
fn app() -> Html {
    html! {
        <div>
            <h1>{"Hello, World!"}</h1>
        </div>
    }
}

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

プロジェクト直下にindex.htmlファイルを作成し、以下のようなひな形を作ります。

index.html

<!doctype html>
<html lang="en">
    <head></head>
    <body></body>
</html>

ここまでできれば、以下のコマンドを実行し、
http://127.0.0.1:8080/ にアクセスします。

$ trunk serve

無事に出力されました👏

おわりに

今回はここまでです。
実際に触ってみての所感とか、フロントエンドの開発言語とのちがいとかをアウトプットしてみようと思います！

ではでは。

コラボスタイル DevelopersPublication

「ワークスタイルの未来を切り拓く」を理念に掲げ、リアルとデジタルの2つの働く場に向けた事業展開に留まらず、自社が率先して新しいワークスタイルに挑戦し、発信を行うことでワークスタイルの未来を切り拓いていきます。

はじめに

下準備 ＆ Hello, world!

簡単なフロントエンドの実装

おわりに

Discussion

下準備＆ Hello, world!