開発モード

Tauri アプリの3つの開発モード -- フルネイティブ、フロントエンドのみモック、ハイブリッド REST

開発モード

純粋な Rust バックエンドと React フロントエンドを持つ Tauri アプリは、3つのモードで開発できる。それぞれが忠実度とイテレーション速度のトレードオフを持つ。バックエンドブリッジのアダプターパターンにより、同じフロントエンドコードベースから3つのモードすべてが可能になる。

3つのモード

モード 1: フル Tauri（pnpm tauri:dev）

本番に最も近い。Tauri が Rust バックエンドを起動し、Vite の開発サーバーに向けた WebView を起動してホットモジュール置換を行う。

pnpm tauri:dev
# 相当: cd tauri-app && cargo tauri dev

処理内容:

1. Cargo が Rust クレートをコンパイル（初回: ~30-60秒、インクリメンタル: ~5-15秒）
2. Vite が HMR 付きでフロントエンド開発サーバーを起動
3. Tauri が http://localhost:1420 を指す WebView 付きネイティブウィンドウを開く
4. フロントエンドが TauriAdapter を使用 — すべてのバックエンド呼び出しが Tauri の IPC（invoke() / listen()）を経由

使用場面:

• ネイティブ機能のテスト（ファイルウォッチャー、PTY ターミナル、ネイティブダイアログ）
• 実際のファイルシステム操作の検証
• ユーザーが体験する通りのアプリテスト
• ビルド前の最終統合テスト

トレードオフ: Rust コードの変更ごとに再コンパイルが発生する。フロントエンドの変更は HMR により即座に反映。

モード 2: モック（pnpm dev:mock）

Rust バックエンドなしのフロントエンドのみの開発。

pnpm dev:mock
# 相当: cd tauri-app && pnpm exec vite --config vite.config.mock.ts

処理内容:

1. Vite がモック Vite 設定でポート 1421 で起動
2. フロントエンドが MockAdapter を使用 — すべてのバックエンド呼び出しがインメモリ実装に行く
3. モックデータ（サンプルメッセージ、ピンツリー、フォントリスト）が起動時にシードされる
4. アプリが通常のブラウザウィンドウで開く（ネイティブ WebView なし）

使用場面:

• React コンポーネント、スタイル、レイアウトの作業
• Storybook ストーリーの実行
• Rust ツールチェーンのないマシンでの作業（例: CI、ディスプレイのない WSL2）
• UI の高速プロトタイピング

トレードオフ: 実際のファイルシステム操作なし。ターミナルは動作しない。ネイティブダイアログはスタブされる。

モード 3: REST（pnpm dev:rest）

ハイブリッドモード: フロントエンドはブラウザで動作するが、実際の Rust バックエンドと HTTP/SSE を介して通信する。

# ターミナル 1: Tauri アプリを起動（axum HTTP サーバーがポート 3001 で起動）
pnpm tauri:dev

# ターミナル 2: フロントエンド開発サーバーをポート 1422 で起動
pnpm dev:rest
# 相当: cd tauri-app && pnpm exec vite --config vite.config.rest.ts

処理内容:

1. Tauri アプリが起動し、HTTP API を localhost:3001 で公開
2. 別の Vite 開発サーバーがポート 1422 で起動
3. フロントエンドが RestAdapter を使用 — コマンドが HTTP リクエストに、イベントが SSE になる
4. ブラウザウィンドウで作業するが、実際のデータに対して

使用場面:

• 実際のバックエンドデータに対するフロントエンドのデバッグ
• ブラウザ DevTools の使用（WebView DevTools より強力）
• REST API 自体のテスト
• 実際のファイル操作が必要だが、フル Tauri モードより速いフロントエンドイテレーションが欲しい場合

トレードオフ: Tauri アプリが動作中である必要がある。一部の機能（ターミナル、ネイティブダイアログ）は HTTP 経由では利用できない。

アダプター選択の仕組み

各 Vite 設定が環境変数またはインポートエイリアスを設定し、起動時にどのアダプターを使用するかを決定する。

// vite.config.mock.ts -> MockAdapter
// vite.config.rest.ts -> RestAdapter
// デフォルト（Tauri） -> TauriAdapter

アプリのエントリポイントがバックエンドブリッジを1回初期化する。

import { initBackend } from "@takazudo/backend-bridge";

// 具体的なアダプターは Vite 設定に基づいてインポート
initBackend(adapter);

初期化後、すべてのコンポーネントはどのアダプターがアクティブかを知らずに getBackend() を呼び出す。

比較表

ビルドモード

開発以外にも、各モードのビルドコマンドがある。

# モック用ビルド（静的サイト、バックエンド不要）
pnpm build:mock

# REST 用ビルド（静的サイト、localhost:3001 のバックエンドを期待）
pnpm build:rest

# Tauri 用ビルド（本番 .app バンドル）
pnpm tauri:build

モックビルドはライブプレビューサイト（Cloudflare Pages にデプロイ）で使用され、バックエンドなしでアプリの UI をデモンストレーションする。

まとめ

3つの開発モードは、速いイテレーションから完全な忠実度へのスペクトルを形成する。UI 作業にはモックモード、実データでのデバッグには REST モード、統合テストにはフル Tauri モード。バックエンドブリッジのアダプターパターンにより、コンポーネントに条件分岐コードなしでこれが可能になる。コンポーネントは常に getBackend() を呼び出し、適切な実装を取得する。