フロントエンド統合パターン
Tauri v2 の IPC、Capabilities、プラットフォーム固有の動作とフロントエンドフレームワークを統合するパターン。
このセクションでは、Tauri v2 アプリケーション向けのフロントエンド統合パターンを扱う。フロントエンドはプラットフォームの WebView（macOS では WKWebView、Windows では WebView2）内で動作し、IPC コマンドを通じて Rust バックエンドと通信する。
ここで扱う内容
IPC コマンド
フロントエンドと Rust バックエンドの橋渡し。IPC コマンドページでは、コマンド登録、関数シグネチャ、State アクセス、エラーハンドリング、実際の例を使った非同期パターンを扱う。
useEffect の落とし穴
Tauri の WebView に固有の、微妙だが深刻なパフォーマンスバグ。useEffect の落とし穴ページでは、useLayoutEffect による IPC 呼び出しが macOS のビーチボール（レインボースピナー）を引き起こす理由とその修正方法を解説する。
Playwright テストの落とし穴
Tauri はプラットフォームごとに異なるレンダリングエンジンを使用する（macOS/Linux は WebKit、Windows は Chromium）。Chromium のみで Playwright テストを実行すると誤った安心感を与える。Playwright テストページでは、エンジンの不一致と階層化テスト戦略の構築方法を解説する。
Capabilities と権限
Tauri v2 はフロントエンドがアクセスできる内容を制御する Capabilities システムを使用する。Capabilitiesページでは、権限モデル、プラグインアクセス、セキュリティの考慮事項を扱う。
アセットプロトコルと CSP スコープ
convertFileSrc はローカルファイルパスを WebView が直接読み込める asset: URL に変換する。その URL が実際に読み込まれるかどうかは、Content Security Policy と tauri.conf.json の assetProtocol スコープによって決まる。アセットプロトコルページでは、csp: null ショートカット、ハードニングされたビルド向けの許可リスト方式、セキュリティを強化したときに画像が表示されなくなる理由を解説する。
plugin-http による CORS 回避
Tauri WebView 内でのブラウザ標準の fetch は通常のブラウザと同様に CORS の制約を受ける。plugin-http CORSページでは、@tauri-apps/plugin-http が Rust の reqwest クライアントを通じてリクエストをルーティングし、WebView の CORS 制約を完全に回避する方法を示す。
ディープリンクと useEffect のクリーンアップ競合
カスタム URL スキームを使うと、OS がアプリを起動またはフォアグラウンドにして URL を届けられる。ディープリンクページでは、tauri-plugin-deep-link の登録方法、プラットフォームガード、そして React エフェクト内で URL ハンドラーがリークする非同期クリーンアップ競合を解説する。
ネイティブファイルのドラッグ＆ドロップ
Tauri WebView では、OS からのファイルドロップに対してブラウザの onDrop が発火しない。ネイティブウィンドウレイヤーがドラッグを先にインターセプトするためである。ドラッグ＆ドロップページでは、その理由、正しい onDragDropEvent のサブスクリプション方法、モック/REST 開発モード向けの二重ハンドラーパターンを扱う。
IPC モデル
Tauri v2 はフロントエンドと Rust バックエンド間でメッセージパッシングアーキテクチャを使用する：
主な特徴：
デフォルトで非同期 --
invoke()はPromiseを返すJSON シリアライゼーション -- 引数と戻り値は serde 経由でシリアライズされる
Rust 側は型安全 -- コマンドは型付きパラメータを持つ通常の Rust 関数である
文字列エラー -- Tauri コマンドはエラーハンドリングに
Result<T, String>を返す
フロントエンドフレームワークの互換性
これらのパターンはどのフロントエンドフレームワークでも動作する。Tauri の invoke() API はフレームワーク非依存である：
// React
import { invoke } from "@tauri-apps/api/core";
useEffect(() => {
invoke("settings_get").then((settings) => {
setSettings(settings);
});
}, []);// Svelte
import { invoke } from "@tauri-apps/api/core";
onMount(async () => {
const settings = await invoke("settings_get");
});// Vue
import { invoke } from "@tauri-apps/api/core";
onMounted(async () => {
const settings = await invoke("settings_get");
});Rust からフロントエンドへのイベント
Rust バックエンドは AppHandle::emit() を使用してフロントエンドにイベントをプッシュできる：
// Rust side
app_handle.emit("messages:changed", payload)?;// Frontend side
import { listen } from "@tauri-apps/api/event";
const unlisten = await listen("messages:changed", (event) => {
console.log("File changed:", event.payload.filename);
});
// Clean up on unmount
onCleanup(() => unlisten());この双方向通信モデル（フロントエンドからバックエンドへは invoke、バックエンドからフロントエンドへは emit/listen）が、レスポンシブな Tauri アプリケーションを構築するための基盤である。