メインコンテンツへスキップ
バージョン: 0.21

サンプルアプリの構築

環境が整ったら、基本的な Yew アプリに必要な定型文を含むスターターテンプレートを使用するか、小さなプロジェクトを手動で設定するかを選択できます。

スターターテンプレートの使用​

インストール手順に従って cargo-generate をインストールし、次のコマンドを実行します。

cargo generate --git https://github.com/yewstack/yew-trunk-minimal-template

アプリケーションの手動設定​

プロジェクトの作成​

開始するには、新しい cargo プロジェクトを作成します。

cargo new yew-app

新しく作成されたディレクトリを開きます。

cd yew-app

Hello World の例を実行する​

Rust 環境が正しく設定されていることを確認するには、cargo run を使用して初期プロジェクトを実行します。「Hello World!」メッセージが表示されるはずです。

cargo run
# output: Hello World!

プロジェクトを Yew Web アプリケーションとして設定する​

この単純なコマンドラインアプリケーションを基本的な Yew Web アプリケーションに変換するには、いくつかの変更が必要です。

Cargo.toml の更新​

依存関係のリストに yew を追加します。

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

[dependencies]
# this is the development version of Yew
yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
情報

アプリケーションを構築する場合にのみ、機能 csr が必要です。これにより、Renderer とすべてのクライアント側レンダリング関連のコードが有効になります。

ライブラリを作成する場合は、この機能を有効にしないでください。サーバー側レンダリングバンドルにクライアント側レンダリングロジックがプルインされます。

テストまたは例のために Renderer が必要な場合は、代わりに dev-dependencies で有効にする必要があります。

main.rs の更新​

クリックされたときに値を更新するボタンをレンダリングする App と呼ばれるルートコンポーネントを設定するテンプレートを生成する必要があります。 src/main.rs の内容を次のコードに置き換えます。

注記

main 関数内の yew::Renderer::<App>::new().render() の呼び出しは、アプリケーションを起動し、ページの <body> タグにマウントします。動的プロパティでアプリケーションを開始する場合は、代わりに yew::Renderer::<App>::with_props(..).render() を使用できます。

use yew::prelude::*;

#[function_component]
fn App() -> Html {
    let counter = use_state(|| 0);
    let onclick = {
        let counter = counter.clone();
        move |_| {
            let value = *counter + 1;
            counter.set(value);
        }
    };

    html! {
        <div>
            <button {onclick}>{ "+1" }</button>
            <p>{ *counter }</p>
        </div>
    }
}

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

index.html の作成​

最後に、アプリのルートディレクトリに index.html ファイルを追加します。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Yew App</title>
    </head>
    <body></body>
</html>

Web アプリケーションの表示​

次のコマンドを実行して、アプリケーションをローカルでビルドして提供します。

trunk serve
情報

デフォルトのブラウザを開くには、オプション '--open' を追加します trunk serve --open.

ソースコードファイルを quelconque 変更すると、Trunk はアプリケーションを再構築します。デフォルトでは、サーバーはアドレス '127.0.0.1' とポート '8080' でリッスンします => https://:8080。変更するには、次のファイルを作成して必要に応じて編集します

Trunk.toml
[serve]
# The address to serve on LAN.
address = "127.0.0.1"
# The address to serve on WAN.
# address = "0.0.0.0"
# The port to serve on.
port = 8000

おめでとうございます​

Yew 開発環境の設定と最初の Web アプリケーションの構築が完了しました。

このアプリケーションを試して、例 を確認して学習を深めてください。