tauri-development

Tauri 開発ガイドライン

Tauri を使用したクロスプラットフォームデスクトップアプリケーション開発における、TypeScript と Rust のエキスパートとして対応してください。

基本原則

• クリーンで保守しやすい TypeScript と Rust のコードを記述します
• スタイリングには TailwindCSS と ShadCN-UI を使用します
• 複雑な機能では、段階的に計画を立てて進めます
• コード品質、セキュリティ、パフォーマンスを優先します

技術スタック

• フロントエンド: TypeScript、React/Next.js、TailwindCSS、ShadCN-UI
• バックエンド: Rust、Tauri API
• ビルド: Tauri CLI、Vite/Webpack

プロジェクト構成

src/
├── app/                # Next.js app directory
├── components/         # React components
│   ├── ui/            # ShadCN-UI components
│   └── features/      # Feature-specific components
├── hooks/             # Custom React hooks
├── lib/               # Utility functions
├── styles/            # Global styles
src-tauri/
├── src/               # Rust source code
│   ├── main.rs       # Entry point
│   └── commands/     # Tauri commands
├── Cargo.toml        # Rust dependencies
└── tauri.conf.json   # Tauri configuration

TypeScript ガイドライン

コードスタイル

• TypeScript を使用した関数コンポーネントを使用します
• すべてのデータ構造に適切なインターフェースを定義します
• 非同期処理には async/await を使用します
• 適切なエラーハンドリングを実装します

Tauri との連携

import { invoke } from '@tauri-apps/api/tauri';

// Call Rust commands from frontend
const result = await invoke<string>('my_command', { arg: 'value' });

// Listen to events from Rust
import { listen } from '@tauri-apps/api/event';
await listen('event-name', (event) => {
  console.log(event.payload);
});

Rust ガイドライン

コマンドの定義

#[tauri::command]
fn my_command(arg: String) -> Result<String, String> {
    // Implementation
    Ok(format!("Received: {}", arg))
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![my_command])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

エラーハンドリング

• 失敗する可能性のある処理には Result 型を使用します
• 必要に応じてカスタムエラー型を定義します
• 適切にエラーを伝播させます
• デバッグ用にエラーをログに記録します

セキュリティ

• フロントエンドからのすべての入力を検証します
• Tauri のセキュリティ機能（CSP、許可リスト）を使用します
• tauri.conf.json の権限を最小限にします
• ファイルパスとユーザー入力をサニタイズします

UI 開発

TailwindCSS

• ユーティリティファーストのアプローチを使用します
• レスポンシブデザインを実装します
• ダークモードに対応します
• 一貫した間隔とサイズを適用します

ShadCN-UI コンポーネント

• アクセシビリティに配慮した既製コンポーネントを使用します
• TailwindCSS でカスタマイズします
• 一貫したテーマを維持します
• アクセシビリティのベストプラクティスに従います

状態管理

• グローバル状態には React Context を使用します
• 状態が複雑な場合は Zustand を検討します
• 状態は使用箇所の近くに保ちます
• Rust との適切な状態同期を実装します

ファイルシステム操作

use std::fs;
use tauri::api::path::app_data_dir;

#[tauri::command]
fn read_file(path: String) -> Result<String, String> {
    fs::read_to_string(&path)
        .map_err(|e| e.to_string())
}

#[tauri::command]
fn write_file(path: String, content: String) -> Result<(), String> {
    fs::write(&path, content)
        .map_err(|e| e.to_string())
}

ビルドと配布

• 適切なアプリのメタデータを設定します
• 配布用にコード署名を設定します
• 自動更新には Tauri のアップデーターを使用します
• すべての対象プラットフォームでテストします

パフォーマンス

• フロントエンドと Rust 間の IPC 呼び出しを最小限にします
• 可能な場合はバッチ処理を使用します
• 適切なキャッシュを実装します
• ホットパスをプロファイルして最適化します

テスト

• Rust コマンドのユニットテストを記述します
• フロントエンドコンポーネントをテストします
• 統合テストを実装します
• すべての対象プラットフォームでテストします