TauriとLeptosで作るデスクトップアプリ（2）カウンタコンポーネントを作成する
はじめに
TauriとLeptosでデスクトップアプリを作っていきます。今回は、シンプルなカウンタを作成します。
関連記事
環境
- Windows 11 Home
- Rust 1.88
- Tauri 2.6.2
- Leptos 0.8.2
コンポーネントライブラリThaw UIを導入する
Leptosのコンポーネントライブラリはいくつかありますが、個人的にデザインが気に入っているThaw UIを使います。
./apps/src-ui/Cargo.tomlの[dependencies]にthawを追加します。
VS Codeにフォーマッタを導入する
Leptosではview!マクロを用いてRustソースコードの中にHTMLを書いていきます。VS Codeでソースコードを編集するなら、フォーマッタleptosfmtを導入すると便利です。
leptosfmtをインストールします。
> cargo install leptosfmt
.vscode/settings.jsonに以下を追加します。
カウンタコンポーネントを作成する
Leptosフロントエンドクレート./apps/src-uiにコンポーネントをまとめたモジュールcomponentsを作ります。その中にサブモジュールcounterを作ります。ディレクトリ構成は以下のとおりです。
tauri-leptos-example
├─ apps/
│ ├─ src-tauri/
│ └─ src-ui/
│ ├─ src/
│ │ ├─ components/
│ │ │ ├─ counter.rs
│ │ │ └─ mod.rs
│ │ ├─ app.rs
│ │ ├─ lib.rs
: : └─ main.rs
mod.rsは単純にサブモジュールcounterを宣言するだけです。
counter.rsにカウンタを実装します。Leptos公式ページの例を参考にしました。
<Button>コンポーネントのon_click属性でボタンがクリックされたときの動作を指定します。RwSignalのメソッドを使っています。[+1]ボタンと[-1]ボタンであえて異なった記述をしています。[Clear]ボタンではクロージャをview!マクロの中に直に書いています。
SimpleCounterコンポーネントをアプリのAppコンポーネント内に配置します。
ConfigProviderコンポーネントで全体を囲うことで、中のコンポーネントにThaw UIのスタイルが適用されます。SimpleCounterコンポーネントは属性を2つ取ります。コンポーネントの定義における引数が、そのまま属性となります。初期値0、ステップ1を指定しています。
ライブラリクレートのクレートルートlib.rsに、モジュールcomponentsの宣言を追加します。
準備が整いました。プロジェクトを実行します。
> cargo tauri dev
カウンタがThaw UIライブラリのスタイルで表示され、ボタンが期待通りに動作すれば完成です。
カウンタコンポーネントをテストする
wasm-packを使ってカウンタコンポーネントの動作をテストします。
テストコードはLeptos公式サイトを参考にしました。
まず、./apps/src-ui/Cargo.tomlの[dev-dependencies]にテスト用のパッケージを追加します。
テスト用ディレクトリtestsを作成します。
tauri-leptos-example
├─ apps/
│ ├─ src-tauri/
│ └─ src-ui/
│ ├─ src/
│ ├─ tests/
│ │ ├─ common/
│ │ │ └─ mod.rs
: : └─ counter.rs
他のコンポーネントでも使う可能性のあるコードをcommonモジュールにまとめておきます。
カウンタコンポーネント用のテストコードは以下になります。
wasm-packをインストールします。
> cargo install wasm-pack
テストを実行します。
> wasm-pack test --chrome apps/src-ui --test counter
--chromeオプションを指定することによって、Chromeでテストを行います。Chromeがインストールされている必要があります。他には--node, --firefox, --safariが選択できるようです。apps/src-uiはテストしたいクレートのディレクトリです。--testオプションでテスト対象を選びます。今回はコンポーネントが1つしかないので必要ありませんが、複数あるときには指定が必要です。cargo testコマンドと違って、1つのテストファイルしかテストが実行されないためです。（一度に複数のテストをする方法があるかもしれません。）
テストを実行してから、ブラウザでhttp://127.0.0.1:8000を開きます。下のようにテストにパスしたら成功です。
--headlessオプションを使うことで、ブラウザを開くことなくテスト結果を確認できます。また、このときにはtestsディレクトリにある全ファイルを一度にテストできるため、--testを指定することは必須ではありません。
> wasm-pack test --chrome --headless apps/src-ui
[INFO]: Checking for the Wasm target...
Compiling src-ui v0.2.0 (...)
:
test result: ok. 3 passed; ...
サンプルコード
今回作成したプロジェクトは以下からダウンロード可能です。
Discussion