コア概念

Zylix の技術的な基盤を理解するためのコア概念を解説します。

概要

Zylix は 4 つの主要コンポーネントで構成されています：

  flowchart TB
    User["👆 ユーザー操作<br/>(タップ、クリック、入力、スクロール)"]

    subgraph Shell1["プラットフォームシェル (Swift, Kotlin, JS, C#, C)"]
        Convert["ネイティブイベントを Zylix イベントに変換"]
        Call["呼び出し: zylix_dispatch(event_type, payload)"]
    end

    subgraph Dispatcher["イベントディスパッチャ"]
        Route["イベントを適切なハンドラにルーティング"]
        Validate["イベントペイロードを検証"]
    end

    subgraph Store["状態ストア"]
        Transition["状態遷移を適用"]
        Version["バージョン番号を増加"]
        Trigger["再レンダリングをトリガー"]
    end

    subgraph Builder["Virtual DOM ビルダー"]
        Construct["状態から新しい VNode ツリーを構築"]
        Render["コンポーネントレンダー関数を使用"]
    end

    subgraph Differ["差分アルゴリズム"]
        Compare["旧ツリーと新ツリーを比較"]
        Generate["最小限のパッチセットを生成"]
    end

    subgraph Shell2["プラットフォームシェル"]
        Receive["zylix_get_patches() でパッチを受信"]
        Apply["ネイティブ UI 要素にパッチを適用"]
    end

    Updated["✨ UI 更新完了<br/>ユーザーが変更を確認"]

    User --> Shell1
    Shell1 --> Dispatcher
    Dispatcher --> Store
    Store --> Builder
    Builder --> Differ
    Differ --> Shell2
    Shell2 --> Updated

コア概念

設計原則

1. 不変性 (Immutability)

状態と Virtual DOM ノードは不変です。変更は新しいバージョンの作成を意味します。

// 状態は直接変更されず、新しいバージョンが作成される
const old_version = state.getVersion();
handleIncrement();
const new_version = state.getVersion();
// new_version == old_version + 1

2. 型安全 (Type Safety)

Zig のコンパイル時型チェックにより、ランタイムエラーを防ぎます。

// 判別共用体による型安全なイベント
pub const Event = union(enum) {
    todo_add: []const u8,   // 文字列ペイロード
    todo_toggle: u32,        // ID ペイロード
    todo_clear_completed,    // ペイロードなし
};

3. ゼロアロケーション (Zero Allocation)

ホットパスではヒープアロケーションを行いません。

// アリーナアロケーションで予測可能なパフォーマンス
var arena = Arena(4096).init();
defer arena.reset();

// すべてのアロケーションはアリーナから
const nodes = arena.alloc(VNode, 100);

4. 単一責任 (Single Responsibility)

各モジュールは明確な責任を持ちます。

アーキテクチャパターン

Elm アーキテクチャ

Zylix は Elm アーキテクチャ（Model-View-Update）に基づいています：

  flowchart TB
    subgraph Elm["Elm アーキテクチャ"]
        Model["Model<br/>(状態)"]
        View["View<br/>(描画)"]
        Update["Update<br/>(更新)"]
        Message["Message<br/>(イベント)"]

        Model --> View
        Model --> Update
        Message --> Update
        Update --> Model
        View --> Message
    end

• Model: 不変のアプリケーション状態
• View: 状態から UI を構築
• Update: イベントに基づいて状態を更新
• Message: ユーザーアクションや外部イベント

パフォーマンス特性

メモリ使用量

次のステップ

各コア概念の詳細については、以下のページを参照してください：