kmkkiii.com
TIL Yew Rust

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

🦀

Yewとは

Yew
A framework for creating reliable and efficient web applications.
faviconyew.rs

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とGithub Pagesで公開するWebアプリ：J-IMPACT
サブタイトル「クラウドにお金を払いたくない人のための開発入門」 本書ではGithub Pagesを使用し、とにかく0円でWebアプリ開発・公開を始めるための方法を解説します。本書でのWebアプリ開発には、高速かつセキュリティ性能の高いRustを使用しているため、無料で高機能なWebアプリを実装することができます。 「こんなアプリを作ってみたい！」「でも、みんな使ってくれるかな？」「資金と時間を投資して作る必要があるかな？」―そんなアイデアが生じたときに、まず簡単なものを作って無料で公開して、ユーザの生きた反応を獲得するという選択肢を読者に提供するのが本書の目的です。 ※この本は全体の前半分のみを収録した「前編版」です。 著者の筆があまりにも遅すぎたため、現在執筆が完了しているところまでを「お試し版」として公開しました。 半分とはいえ分量は87ページあるので、本書の基本的な内容はカバーされています。 「完全版」では応用的な内容が追加される予定です。 なお、「完全版」で使用する予定だったサンプルコードへのリンクは、本書にも掲載しています。
favicontechbookfest.org
/rehype-og-card/ae688ad9482b4fcaea9e4e36f25871dd9cee5a36c2e4055bf020318ba1b85f42
TOP

Related Posts