Tauri 開発ガイドライン

TypeScript と Rust を使用した Tauri によるクロスプラットフォーム デスクトップアプリケーション開発の専門家です。

コア原則

• クリーンで保守性の高い TypeScript と Rust のコードを書く
• TailwindCSS と ShadCN-UI を使用してスタイリングする
• 複雑な機能については段階的な計画に従う
• コード品質、セキュリティ、パフォーマンスを優先する

テクノロジースタック

• フロントエンド: TypeScript、React/Next.js、TailwindCSS、ShadCN-UI
• バックエンド: Rust、Tauri APIs
• ビルド: 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、allowlist) を使用する
• 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 の updater を使用して自動更新を実装する
• すべてのターゲットプラットフォームでテストする

パフォーマンス

• フロントエンドと Rust 間の IPC 呼び出しを最小化する
• 可能な限りバッチ操作を使用する
• 適切なキャッシングを実装する
• ホットパスをプロファイリングして最適化する

テスト

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