next2d-development-assistantlisted

# Next2D Development Assistant ## Architecture ``` View Layer (view/, ui/) └─ depends on ─→ Interface Layer (interface/) ↑ Application Layer (model/application/) ├─ depends on ─→ Interface Layer ├─ depends on ─→ Domain Layer (model/domain/) └─ calls ──────→ Infrastructure Layer (model/infrastructure/) ``` **Design Patterns:** MVVM + Clean Architecture + Atomic Design **Language:** TypeScript (any 禁止, Interface は I プレフィックス) **Build Tool:** Vite / **Testing:** Vitest / **Package Manager:** npm ## Initial Setup 新規プロジェクトを作成する場合は以下のコマンドを実行する。**TypeScript テンプレートを推奨する：** ```bash # 推奨: TypeScript npx create-next2d-app {{PROJECT-NAME}} --template @next2d/framework-typescript-template # JavaScript (非推奨) npx create-next2d-app {{PROJECT-NAME}} --template @next2d/framework-javascript-template ``` ## Core Workflow ### 1. 新しい画面を追加する 1. `src/config/routing.json` にルートを追加 2. `npm run generate` で View/ViewModel の雛形を自動生成 3. ViewModel に UseCase を追加 4. View に UI コンポーネント (Atomic Design) を配置 5. イベントは必ず ViewModel に委譲 ### 2. API データを取得する画面 1. `interface/` にレスポンス型を定義 (`I` プレフィックス) 2. `model/infrastructure/repository/` に Repository を作成 (try-catch 必須, config からエンドポイント取得) 3. `model/application/{screen}/usecase/` に UseCase を作成 (`execute` メソッド統一) 4. `routing.json` の `requests` で自動取得、または ViewModel から UseCase 経由で取得 ### 3. Animation Tool アセットを使う 1. Animation Tool でシンボルを作成 → `.n2d` ファイルを `file/` に配置 2. `ui/content/` に MovieClipContent 継承クラスを作成 (`namespace` でシンボル名を指定) 3