アーキテクチャ設計

Claude Code に最適化された動画編集ソフトの設計

Claude Code向け設計原則

1. シンプルさを保つ

・ 1ファイル300行以下を目標
・単一責任の原則を徹底
・過度な抽象化を避ける
・依存関係を最小限に

2. 明確な境界

・ UI / ロジック / データの分離
・明確なAPI定義
・ TypeScriptの型で契約
・ IPC境界を明確に

3. 予測可能な構造

・一貫した命名規則
・標準的なディレクトリ構成
・パターンの統一
・ドキュメント/コメント

4. テスト容易性

・純粋関数を多用
・副作用を分離
・モック可能な設計
・ユニットテスト優先

全体アーキテクチャ

┌─────────────────────────────────────────────────┐
│                   Frontend (Svelte)              │
│  ┌───────────┐ ┌───────────┐ ┌───────────┐     │
│  │ Timeline  │ │  Player   │ │  Effects  │     │
│  └───────────┘ └───────────┘ └───────────┘     │
│  ┌───────────────────────────────────────┐     │
│  │           State Management            │     │
│  │         (Svelte 5 Runes)             │     │
│  └───────────────────────────────────────┘     │
└──────────────────────┬──────────────────────────┘
                       │ IPC (Tauri Commands)
┌──────────────────────┴──────────────────────────┐
│                   Backend (Rust)                 │
│  ┌───────────┐ ┌───────────┐ ┌───────────┐     │
│  │  FFmpeg   │ │   File    │ │  Project  │     │
│  │  Handler  │ │  Manager  │ │   Store   │     │
│  └───────────┘ └───────────┘ └───────────┘     │
└─────────────────────────────────────────────────┘

推奨ディレクトリ構成

video-editor/
├── src/                      # SvelteKit フロントエンド
│   ├── lib/
│   │   ├── components/       # UIコンポーネント
│   │   │   ├── timeline/     # タイムライン関連
│   │   │   ├── player/       # プレイヤー関連
│   │   │   └── effects/      # エフェクトパネル
│   │   │
│   │   ├── stores/           # 状態管理
│   │   │   ├── project.svelte.ts
│   │   │   ├── timeline.svelte.ts
│   │   │   └── playback.svelte.ts
│   │   │
│   │   ├── utils/            # ユーティリティ
│   │   │   ├── time.ts       # 時間計算
│   │   │   └── ffmpeg.ts     # FFmpegヘルパー
│   │   │
│   │   └── types/            # 型定義
│   │       ├── project.ts
│   │       └── media.ts
│   │
│   └── routes/               # ページ
│       └── +page.svelte      # メインエディタ
│
├── src-tauri/                # Tauri バックエンド
│   ├── src/
│   │   ├── main.rs           # エントリー
│   │   ├── commands/         # IPCコマンド
│   │   │   ├── ffmpeg.rs
│   │   │   └── project.rs
│   │   └── lib.rs
│   │
│   ├── Cargo.toml
│   └── tauri.conf.json
│
├── package.json
└── svelte.config.js

主要コンポーネントの責務

Timeline

クリップの配置・編集。Canvas/SVGで描画。ドラッグ&ドロップ、カット、トリミング。

Player

動画プレビュー。HTML5 Video要素。再生/一時停止、シーク、音量。

Effects Panel

エフェクト選択・パラメータ調整。FFmpegフィルターへの変換。

FFmpeg Handler（Rust）

FFmpegプロセス管理。コマンド構築、進捗監視、エラーハンドリング。

データフロー

ユーザー操作
    ↓
Svelteコンポーネント (UIイベント)
    ↓
Store更新 (project.svelte.ts)
    ↓ 必要に応じて
Tauri IPC呼び出し
    ↓
Rustバックエンド処理
    ↓
FFmpeg実行
    ↓
結果をフロントエンドに返却
    ↓
UI更新

← FFmpeg統合 UI/UXフレームワーク →