mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
d77cf0196b
* Update CHANGELOG https://github.com/yewstack/yew/actions/runs/11314974928/job/31465588862 * Add items. * Write blog. * Archive the documents. * Add author. * Update SSR document. * Fix typo. * Add simplified Chinese translation. * Update package.json * Sync documents * Add traditional Chinese translation. * Sync documents * Add Japanese translation. * Sync documents * Fix typo by `fmt:write`. * Fix typo by `write-translations`. * Apply suggestions from code review * Fix typo. * #3769 in changelog --------- Co-authored-by: Elina <imelina@elina.website>
150 lines
4.9 KiB
Plaintext
150 lines
4.9 KiB
Plaintext
---
|
|
title: 'サンプルアプリケーションの構築'
|
|
---
|
|
|
|
環境が整ったら、基本的な Yew アプリケーションに必要なテンプレートを使用するか、小さなプロジェクトを手動で設定することができます。
|
|
|
|
## テンプレートを使用して迅速に開始
|
|
|
|
[`cargo-generate`](https://github.com/cargo-generate/cargo-generate) のインストール手順に従ってツールをインストールし、次のコマンドを実行します：
|
|
|
|
```shell
|
|
cargo generate --git https://github.com/yewstack/yew-trunk-minimal-template
|
|
```
|
|
|
|
## 手動でアプリケーションを設定する
|
|
|
|
### プロジェクトの作成
|
|
|
|
まず、新しい cargo プロジェクトを作成してください。
|
|
|
|
```bash
|
|
cargo new yew-app
|
|
```
|
|
|
|
新しく作成したディレクトリを開きます。
|
|
|
|
```bash
|
|
cd yew-app
|
|
```
|
|
|
|
### Hello World サンプルを実行する
|
|
|
|
Rust 環境が正しく設定されているかを確認するために、`cargo run` を使用して初期プロジェクトを実行します。"Hello World!" メッセージが表示されるはずです。
|
|
|
|
```bash
|
|
cargo run
|
|
# output: Hello World!
|
|
```
|
|
|
|
### プロジェクトを Yew Web アプリケーションに設定する
|
|
|
|
このシンプルなコマンドラインアプリケーションを基本的な Yew Web アプリケーションに変換するために、いくつかの変更が必要です。
|
|
|
|
#### Cargo.toml の更新
|
|
|
|
依存関係リストに `yew` を追加します。
|
|
|
|
```toml title=Cargo.toml
|
|
[package]
|
|
name = "yew-app"
|
|
version = "0.1.0"
|
|
edition = "2021"
|
|
|
|
[dependencies]
|
|
# 開発バージョンの Yew
|
|
yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
|
|
```
|
|
|
|
:::info
|
|
|
|
アプリケーションを構築するだけの場合は、`csr` 特性のみが必要です。これにより、`Renderer` とクライアントサイドレンダリングに関連するすべてのコードが有効になります。
|
|
|
|
ライブラリを作成している場合は、この特性を有効にしないでください。クライアントサイドレンダリングロジックがサーバーサイドレンダリングパッケージに含まれることになります。
|
|
|
|
テストやサンプルのために Renderer が必要な場合は、`dev-dependencies` で有効にするべきです。
|
|
|
|
:::
|
|
|
|
#### main.rs の更新
|
|
|
|
テンプレートを生成し、クリック時に値を更新するボタンをレンダリングする `App` という名前のルートコンポーネントを設定する必要があります。以下のコードで `src/main.rs` の内容を置き換えます。
|
|
|
|
:::note
|
|
`main` 関数内の `yew::Renderer::<App>::new().render()` 呼び出しは、アプリケーションを起動し、ページの `<body>` タグにマウントします。動的なプロパティを使用してアプリケーションを起動したい場合は、`yew::Renderer::<App>::with_props(..).render()` を使用できます。
|
|
:::
|
|
|
|
```rust ,no_run, title=main.rs
|
|
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` ファイルを追加します。
|
|
|
|
```html , title=index.html
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Yew App</title>
|
|
</head>
|
|
<body></body>
|
|
</html>
|
|
```
|
|
|
|
## アプリケーションの表示
|
|
|
|
以下のコマンドを実行して、ローカルでアプリケーションをビルドおよび提供します。
|
|
|
|
```bash
|
|
trunk serve
|
|
```
|
|
|
|
:::info
|
|
`--open` オプションを追加して、デフォルトのブラウザを開くことができます：`trunk serve --open`。
|
|
:::
|
|
|
|
Trunk は、ソースコードファイルを変更するたびにアプリケーションをリアルタイムで再構築します。
|
|
デフォルトでは、サーバーはアドレス '127.0.0.1' のポート '8080' でリッスンします => [http://localhost:8080](http://127.0.0.1:8080)。
|
|
この設定を変更するには、次のファイルを作成して必要に応じて編集してください：
|
|
|
|
```toml title="Trunk.toml"
|
|
[serve]
|
|
# ローカルネットワーク上のリッスンアドレス
|
|
address = "127.0.0.1"
|
|
# 広域ネットワーク上のリッスンアドレス
|
|
# address = "0.0.0.0"
|
|
# リッスンするポート
|
|
port = 8000
|
|
```
|
|
|
|
## おめでとうございます
|
|
|
|
これで、Yew 開発環境の設定が完了し、最初の Web アプリケーションを構築できました。
|
|
|
|
このアプリケーションを試してみて、さらに学習するために[サンプル](./examples.mdx)を参照してください。
|