はじめに
WebAssemblyの進化により、RustでWebアプリケーションを構築する機会が増えています。特にYewフレームワークは、React風の使い勝手とRustの堅牢性を組み合わせた開発が可能です。
本記事では、Yewアプリケーション開発をスムーズにするビルドツールTrunkについて、セットアップから実践的なテクニックまで解説します。
Trunkとは
Trunkは、WebAssemblyアプリケーションに特化したビルドツールです。そして、以下のような特徴を持ちます。
- ホットリロードによる高速な開発体験
- アセット管理の自動化（画像、CSS、その他静的ファイル）
- 最小限の設定で開発環境の構築が可能
- プロダクションビルドの最適化機能
環境構築
まず、必要なツールをインストールします：
# WebAssemblyターゲットの追加 rustup target add wasm32-unknown-unknown # Trunkのインストール cargo install trunk
プロジェクトの作成
以下のコマンドで新規プロジェクトを作成します：
cargo new yew-app cd yew-app
Cargo.tomlに必要な依存関係を追加：
[dependencies]
yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
シンプルなカウンターアプリの実装
src/main.rsにカウンターアプリのコードを実装します：
use yew::prelude::*; #[function_component(App)] 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(); }
HTMLテンプレートの準備
index.htmlをプロジェクトルートに作成：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Yew Counter App</title> </head> <body></body> </html>
開発サーバーの設定と起動
Trunk.tomlで開発サーバーの設定をカスタマイズできます：
[serve] # 開発サーバーのアドレス address = "127.0.0.1" # ポート番号 port = 8080 # アセットディレクトリ assets = ["public"] # プロキシ設定（APIサーバーなど） [[proxy]] backend = "http://localhost:3000/api/"
開発サーバーを起動：
trunk serve --open
これでhttp://localhost:8080にアプリケーションが立ち上がります。
アセット管理のベストプラクティス
静的ファイルはpublicディレクトリで管理します：
public/ ├── images/ # 画像ファイル ├── styles/ # CSSファイル ├── fonts/ # フォントファイル └── favicon.ico # ファビコン
プロダクションビルドの最適化
本番環境向けのビルドでは、以下の最適化が可能です：
# リリースビルド trunk build --release # WebAssemblyコードの最適化 trunk build --release --filehash
デバッグとトラブルシューティング
開発中によくあるトラブルの対処法：
- ビルドエラー時は
trunk cleanでキャッシュをクリア - アセットが反映されない場合は
trunk serve --watchで監視を強化 - WebAssemblyのデバッグには開発者ツールのConsoleを活用(フロントエンド開発初心者で学びが多かった⋯)
おわりに
Trunkを活用することで、Yewアプリケーションの開発体験が大幅に改善されます。特にホットリロードとアセット管理の自動化は、開発効率を向上させる重要な機能です。
