# アーキテクチャ構成図

## パッケージ依存関係図

```mermaid
graph TD
    subgraph "Distribution Layer"
        VUE["vue<br/>(フルビルド配布パッケージ)"]
        COMPAT["@vue/compat<br/>(Vue 2互換ビルド)"]
    end

    subgraph "Server Rendering"
        SR["@vue/server-renderer<br/>(SSRランタイム)"]
    end

    subgraph "Runtime Layer"
        RDOM["@vue/runtime-dom<br/>(DOM固有ランタイム)"]
        RTEST["@vue/runtime-test<br/>(テスト用ランタイム)"]
        RCORE["@vue/runtime-core<br/>(プラットフォーム非依存ランタイム)"]
    end

    subgraph "Reactivity Layer"
        REACT["@vue/reactivity<br/>(リアクティビティシステム)"]
    end

    subgraph "Compiler Layer"
        CSFC["@vue/compiler-sfc<br/>(SFCコンパイラ)"]
        CSSR["@vue/compiler-ssr<br/>(SSRコンパイラ)"]
        CDOM["@vue/compiler-dom<br/>(DOMコンパイラ)"]
        CCORE["@vue/compiler-core<br/>(プラットフォーム非依存コンパイラ)"]
    end

    subgraph "Foundation Layer"
        SHARED["@vue/shared<br/>(共通ユーティリティ)"]
    end

    VUE --> RDOM
    VUE --> CDOM
    VUE --> CSFC
    VUE --> SR
    VUE --> SHARED

    COMPAT -.->|peer| VUE

    SR --> CSSR
    SR --> SHARED

    RDOM --> RCORE
    RDOM --> REACT
    RDOM --> SHARED

    RTEST --> RCORE
    RTEST --> SHARED

    RCORE --> REACT
    RCORE --> SHARED

    REACT --> SHARED

    CSFC --> CCORE
    CSFC --> CDOM
    CSFC --> CSSR
    CSFC --> SHARED

    CSSR --> CDOM
    CSSR --> SHARED

    CDOM --> CCORE
    CDOM --> SHARED

    CCORE --> SHARED
```

## レイヤー構成図

```mermaid
graph TB
    subgraph "Distribution"
        direction LR
        D1["vue"]
        D2["@vue/compat"]
    end

    subgraph "Platform Implementations"
        direction LR
        P1["@vue/runtime-dom<br/>(ブラウザ)"]
        P2["@vue/runtime-test<br/>(テスト)"]
        P3["@vue/server-renderer<br/>(SSR)"]
    end

    subgraph "Compiler Pipeline"
        direction LR
        C1["@vue/compiler-sfc<br/>(.vue統合)"]
        C2["@vue/compiler-dom<br/>(HTML)"]
        C3["@vue/compiler-ssr<br/>(SSR)"]
        C4["@vue/compiler-core<br/>(基盤)"]
    end

    subgraph "Core Runtime"
        RC["@vue/runtime-core<br/>(コンポーネント・VNode・スケジューラ)"]
    end

    subgraph "Reactivity"
        RE["@vue/reactivity<br/>(ref・reactive・computed・effect)"]
    end

    subgraph "Foundation"
        SH["@vue/shared<br/>(ユーティリティ・定数・型)"]
    end

    Distribution --> Platform_Implementations
    Distribution --> Compiler_Pipeline
    Platform_Implementations --> Core_Runtime
    Compiler_Pipeline --> C4
    Core_Runtime --> Reactivity
    Reactivity --> Foundation
    C4 --> Foundation
```

## テンプレートコンパイルパイプライン

```mermaid
flowchart LR
    A["テンプレート文字列<br/>&lt;template&gt;"] --> B["baseParse()<br/>字句解析+構文解析"]
    B --> C["AST<br/>(RootNode)"]
    C --> D["transform()<br/>NodeTransform<br/>DirectiveTransform"]
    D --> E["変換済みAST"]
    E --> F["generate()<br/>コード生成"]
    F --> G["レンダー関数<br/>JavaScript コード"]

    subgraph "Transform Plugins"
        T1["vIf / vFor"]
        T2["vOn / vBind / vModel"]
        T3["transformElement"]
        T4["transformText"]
        T5["cacheStatic"]
    end

    D -.-> T1
    D -.-> T2
    D -.-> T3
    D -.-> T4
    D -.-> T5
```

## リアクティブ更新フロー

```mermaid
sequenceDiagram
    participant User as ユーザーコード
    participant Reactive as @vue/reactivity
    participant Scheduler as scheduler.ts
    participant Renderer as renderer.ts
    participant DOM as @vue/runtime-dom

    User->>Reactive: リアクティブデータ変更<br/>(state.count++)
    Reactive->>Reactive: Proxy set trap → trigger()
    Reactive->>Scheduler: 依存エフェクトに通知<br/>(コンポーネント更新ジョブをキューイング)
    Note over Scheduler: queueJob() → マイクロタスクでフラッシュ予約
    Scheduler->>Scheduler: Pre-flush: ウォッチャー実行
    Scheduler->>Renderer: Main flush: コンポーネント再レンダリング
    Renderer->>Renderer: レンダー関数実行 → 新VNodeツリー生成
    Renderer->>Renderer: patch() → 旧VNodeと差分比較
    Renderer->>DOM: DOMパッチ適用<br/>(nodeOps.insert, patchProp等)
    Scheduler->>Scheduler: Post-flush: DOM更新後コールバック
```

## SFC コンパイルフロー

```mermaid
flowchart TD
    A[".vue ファイル"] --> B["parse()<br/>SFCDescriptor生成"]

    B --> C["&lt;template&gt; ブロック"]
    B --> D["&lt;script setup&gt; ブロック"]
    B --> E["&lt;style&gt; ブロック"]

    C --> F["compileTemplate()<br/>@vue/compiler-dom"]
    D --> G["compileScript()<br/>マクロ展開+バインディング解析"]
    E --> H["compileStyle()<br/>PostCSS + スコープID注入"]

    F --> I["レンダー関数コード"]
    G --> J["setup() 関数コード"]
    H --> K["スコープ付きCSS"]

    I --> L["最終モジュール出力<br/>(JavaScript)"]
    J --> L
    K --> M["CSS出力"]

    subgraph "Script Macros"
        M1["defineProps()"]
        M2["defineEmits()"]
        M3["defineExpose()"]
        M4["defineModel()"]
        M5["defineSlots()"]
        M6["defineOptions()"]
    end

    G -.-> M1
    G -.-> M2
    G -.-> M3
    G -.-> M4
    G -.-> M5
    G -.-> M6
```

## エラーハンドリングフロー

```mermaid
flowchart TD
    A["エラー発生<br/>(レンダー/ライフサイクル/イベント等)"] --> B{"callWithErrorHandling /<br/>callWithAsyncErrorHandling"}
    B --> C["handleError()"]
    C --> D{"現在のコンポーネントに<br/>errorCaptured フック?"}
    D -->|あり| E["errorCaptured 実行"]
    E --> F{"伝播停止?<br/>(return false)"}
    F -->|はい| G["エラー処理完了"]
    F -->|いいえ| H["親コンポーネントへ伝播"]
    D -->|なし| H
    H --> I{"親コンポーネント<br/>が存在?"}
    I -->|あり| D
    I -->|なし| J{"app.config.errorHandler<br/>が設定済み?"}
    J -->|あり| K["グローバルエラーハンドラ実行"]
    J -->|なし| L["console.error 出力"]
```
