フロントエンドのレシピ
invoke による Rust コマンドの呼び出し、引数・戻り値・エラーの受け渡し、イベントの送受信、ダークモード対応、右クリック無効化、開発者ツールなど、WebView 側 (TypeScript) から見た Tauri の使い方です。
全 9 件 / 対象: Tauri 2.x
- 1 Rust のコマンドを JS から呼び出す (invoke) @tauri-apps/api/core の invoke で、#[tauri::command] を付けた Rust 関数を呼ぶ基本。generate_handler! への登録と、lib.rs と main.rs の関係も示す。
- 2 Rust コマンドに引数を渡す invoke の第 2 引数で Rust コマンドに値を渡す。引数名が camelCase に変換される規則、構造体での受け取り、型が合わないときの invalid args エラーの読み方を示す。
- 3 Rust コマンドからの戻り値を受け取る invoke<T> で Rust コマンドの戻り値を型付きで受け取る。構造体・Vec・Option が JS でどんな形になるか、serde の属性での調整、大きなバイナリを Response で返す方法も示す。
- 4 Rust 側で起きたエラーを JS でキャッチする Rust コマンドが Err を返すと invoke の Promise が reject される。try/catch での受け方と、独自エラー型や thiserror で JS に届くエラーの形がどう変わるかを示す。
- 5 Rust からのイベントを受信する (listen) listen / once で Rust の emit / emit_to から届くイベントを受け取る。ペイロードの型付け、unlisten による解除、Rust 側での送り先の指定とウィンドウごとの届き方も示す。
- 6 JS から Rust へイベントを送る (emit) フロントエンドの emit / emitTo で発火したイベントを Rust 側の listen / once / listen_any で受け取り、ペイロードを serde でデシリアライズする。invoke との使い分けも整理する。
- 7 OS のダークモードを検知して CSS を切り替える prefers-color-scheme と CSS 変数で配色を切り替え、matchMedia か theme() / onThemeChanged で OS のテーマ変更に追従する。真偽値の判定、テーマ固定、起動時のチラつき対策も示す。
- 8 右クリック・テキスト選択・ドラッグを無効化して Web っぽさを消す 右クリックメニュー、テキスト選択、画像のドラッグ、ブラウザ既定のショートカット（F5・Ctrl+P など）を無効にして Web っぽさを消す。本番ビルドだけに適用する方法も示す。
- 9 開発者ツールをプログラムから開く open_devtools() などで開発者ツールをプログラムから開閉する。Cargo の devtools 機能で本番ビルドでも使えるようにする方法と、macOS での開き方も示す。