--- title: "zenit — Zig 向け GPU ネイティブのデスクトップ UI フレームワーク" description: "zenit は Zig で書かれた GPU ネイティブのデスクトップ UI フレームワークです。Metal レンダリング、きめ細かな Signal によるリアクティビティ、完…" url: https://zenit.z.express/ja language: ja alternate_en: https://zenit.z.express/index.md alternate_zh: https://zenit.z.express/zh.md alternate_es: https://zenit.z.express/es.md alternate_ko: https://zenit.z.express/ko.md alternate_fr: https://zenit.z.express/fr.md alternate_de: https://zenit.z.express/de.md project: zenit v0.1.0-alpha (Zig 0.15.2, macOS) source: https://github.com/version-next/zenit --- [v0.1.0-alpha正式版は未公開](https://zenit.z.express/ja#status)macOS ·[Zig 0.15.2](https://ziglang.org) AI SkillAgent に zenit を教える # Web のように作り、 GPU でネイティブ描画 高性能な Zig 向け GPU UI フレームワーク。Signal、スタイルレシピ、Flex / Grid、DevTools は Web のように書けて、Metal レンダリングと完全なテキスト・IME 処理でネイティブアプリとして動きます。ReleaseSmall でビルドした Hello Button.app はわずか 1.7 MB です。 [5 分で始める](https://zenit.z.express/ja/docs/guide/getting-started) [Video](https://zenit.z.express/media/film/zenit-film-4k.mp4?v=74579aad19) 01 / SIGNALS仮想 DOM ではなく Signal。0:00 / 1:53 HELLO, ZENIT ## ファイルひとつで、 ネイティブウィンドウひとつ。 examples/hello\_button/main.zig の完全なソースと、それをコンパイルした .app。ウィンドウの映像は E2E harness が実際のウィンドウでボタンを 3 回クリックして録画したものです。 main.zigexamples/hello\_button/ ```zig const std = @import("std");const ui = @import("ui");const App = @import("zenit_app").App; /// 样式表：具名纯函数 + 应用层自定义 recipe，与业务逻辑分离。const S = @import("styles.zig"); const Counter = struct { n: u32 = 0, label: ?*ui.Node = null, buf: [32]u8 = undefined, pub fn increment(self: *Counter) void { self.n += 1; const node = self.label orelse return; const content = std.fmt.bufPrint(&self.buf, "Clicked {d} times", .{self.n}) catch return; if (node.getText()) |old| { var t = old; t.content = content; node.setText(t); } node.markRenderDirty(); }}; fn mountUI(cx: *ui.Cx, scope: *ui.Scope) anyerror!*ui.Node { const allocator = cx.allocator; const counter = try cx.bindState(Counter, .{}); const click = cx.on(Counter, counter, Counter.increment); const root = try ui.boxStyled(cx, S.root, .{}); try root.appendChild(allocator, try ui.textStyled(cx, S.title, "Hello, zenit!")); try root.appendChild(allocator, try ui.widgets.Button(.{ .label = "Click me", .variant = .primary, .size = .md, .on_click = click, }).mount(scope, cx)); // 应用层自定义 recipe（styles.zig 的 PanelRecipe）包住计数文本 const panel = try ui.boxStyled(cx, S.panel(.highlight), .{}); const label = try ui.textStyled(cx, S.counterLabel, "Clicked 0 times"); try panel.appendChild(allocator, label); try root.appendChild(allocator, panel); counter.label = label; return root;} pub fn main() !void { var gpa = std.heap.GeneralPurposeAllocator(.{}){}; defer _ = gpa.deinit(); const app = try App.init(gpa.allocator(), .{ .window = .{ .width = 640, .height = 480, .title = "Hello Button" }, }); defer app.deinit(); try app.runWith(mountUI);} ``` Hello Button [Video](https://zenit.z.express/media/hello-button.mp4?v=b4d2b8f8a0) ウィンドウ 640 × 480 · Metal .app 1.7 MB · ReleaseSmall 録画 E2E harness /01 1.7MB Hello Button .app のサイズ（ReleaseSmall） /02 51 録画済みコンポーネント story /03 2,026 同梱の Lucide アイコン /04 60fps Debug ビルドでの操作目標 AI SKILL · Claude Code / あらゆる Agent 向け ## AI に書かせる、 本物の zenit UI。 zenit-ui-dev は、zenit フレームワーク自体と、zenit で作られた本番運用の macOS エディタの開発履歴から抽出した Agent Skill です。コンポーネント選定、スタイルの 3 層、Signal の使い方、ネイティブ統合、スクリーンショットによるセルフチェック、そして数十件の「落とし穴 → 原因 → 正しいやり方」を収録。~/.claude/skills に置けば、Agent が zenit コードを書くときに自動で読み込みます。 [Skill をダウンロード.zip · 54 KB](https://zenit.z.express/downloads/zenit-ui-dev.zip)[インストールガイド](https://zenit.z.express/ja/docs/guide/ai-skill) zenit-ui-dev/ SKILL.md9.6 KB references/ app-architecture.md7.2 KB components.md8.3 KB macos-native.md8.2 KB pencil-design.md7.9 KB performance.md4.1 KB pitfalls.md8.5 KB project-setup.md8.1 KB state-reactivity.md7.8 KB styling.md5.8 KB ui-tree-layout.md6.1 KB verification.md5.7 KB tools/ design\_diff.ts20.6 KB png.ts3.6 KB shot.ts3.7 KB 展開先 ```zig ~/.claude/skills/zenit-ui-dev/ ``` [Pencilpen.dev](https://www.pen.dev/) 推奨ワークフロー · PENCIL + SKILL Pencil と組み合わせて、デザインから AI で実装 [Pencil](https://www.pen.dev/) で画面を描き、この Skill を使って Agent に実装させるのがおすすめです。.pen の Flex レイアウト、間隔、角丸、文字サイズ、lucide アイコンは zenit のモデルとよく似ています。Skill にはフィールド対応表と design\_diff 比較ツールが付属しているので、Agent は感覚ではなく数値で再現できます。 [Pencil について](https://www.pen.dev/) [デザインからコードへの流れ](https://zenit.z.express/ja/docs/guide/ai-skill#pencil) 1. 01.penPencil のデザイン 2. 02MCPAgent が正確な数値を読む 3. 03zigwidgets + token で zenit コード 4. 04diffデザインとの数値比較 01 / コア機能 ## ウィンドウからピクセルまで、 すべてネイティブ。 WebView も仮想 DOM もありません。UI ツリーはフラットな DisplayItem リストを出力し、Metal レンダラーがそれを直接処理します。 ### Metal GPU レンダリング `render · gpu` トリプルバッファの SDF・テキスト・画像レンダラー。GPU の処理完了と CPU のレイアウトが並行して進みます。 LabelCount ← dirtyButtonBox ### きめ細かな Signal `Signal · Memo · createEffect` ツリーの再構築も diff もなし。依存関係はそれを読むノードだけに正確に届きます。 baselinex-height Aa字ع ### テキストと IME `text · text_core` Unicode 17、UAX #9 双方向テキスト、UAX #29 書記素境界、そしてエンドツーエンドの preedit / commit。 Click megetByRole("button") ### 実ウィンドウ E2E `ui.devtools · harness` セマンティックなロケーター、仮想カーソル、Retina スクリーンショット、drawable から直接の MP4 録画。DevTools も付属。 02 / コンポーネント ## 51 のコンポーネント、 すべてのピクセルを GPU で。 [すべてのコンポーネントを見る](https://zenit.z.express/ja/components) [![zenit components: buttons, inputs, select, switches, checkboxes, radios, slider, progress, tabs, calendar, steps, table, alerts, tags, badges, chips, timeline, tree, accordion, rate](https://zenit.z.express/media/component-wall.webp?v=7e700be72a)](https://zenit.z.express/ja/components) これはデザインカンプではありません。Storybook の Component Wall story を、E2E harness が実際のウィンドウからキャプチャしたものです。どのタイルもクリック、入力、スクロールできます。 03 / アーキテクチャ ## アプリが依存するのは 2 つの公開モジュールだけ。 プラットフォーム、レンダリング、テキストの詳細は下層が担います。境界はビルド時に強制され、禁止されたインポートはコンパイルエラーになります。 error:import of 'render' is forbidden from L0 your appL0 ui + zenit\_apppublic · L1 system\_sdkrendergputext text\_coreicon\_ir NSWindow · CAMetalLayer · CoreTextmacOS 04 / パフォーマンス 60fps 0 ms16.6 ms / frame1 s Debug ビルドにおける基本操作の目標値です。数万行の仮想リストでのスクロール、カーソル移動、入力を含みます。M シリーズの Apple silicon で計測。 トリプルバッファのインスタンスと frame sync で、GPU と CPU レイアウトを並行処理 サブツリーキャッシュ付きのディスプレイリスト。静的なサブツリーはレイアウトと描画をスキップ `layout_isolation` 境界で dirty の連鎖を遮断 遅延スケジューラーが重い処理を複数フレームに分割 [Video](https://zenit.z.express/media/film/efficient.mp4?v=d765f1d5e1) 映像の第 08 章より：ホバーとスピナーは自分のサブツリーだけを dirty にし、残りはキャッシュから再生。何も変わらなければ run loop はスリープし、0 フレーム・GPU 処理 0。M4 Max · 5K · 60 Hz で計測。 05 / QUICK START ## 3 ステップで、 最初のウィンドウへ。 テンプレートを取得01 ```zig git clone https://github.com/version-next/zenit.git cp -R zenit/templates/minimal-app ./myapp ``` build.zig、build.zig.zon、src/main.zig を同梱しています。 依存関係を接続02 ```zig zenit.attach(zenit_dep, exe); ``` 1 回の呼び出しで ui、zenit\_app、ネイティブブリッジ、システムフレームワークを接続します。 ビルドして実行03 ```zig zig build run zig build app ``` 直接実行するか、ダブルクリックで起動できる macOS .app を生成します。 06 / 現状 ## 正直に言うと、 まだ準備中です。 0.1.0 は最初の公開バージョンですが、1.0 までは API が変わる可能性があります。バージョンは厳密に固定してください。破壊的変更はすべて MIGRATION に記録しています。 [MIGRATION](https://github.com/version-next/zenit/blob/HEAD/docs/MIGRATION.md) [version-next/zenit](https://github.com/version-next/zenit) macOS · Apple Silicon NSWindow + Metal。継続的に検証している唯一のプラットフォーム 対応 Linux · Windows バックエンドは仮実装のみで、まだ使えません 予定 アクセシビリティ a11y ツリーと NSAccessibility ブリッジは実装済みですが、61 コンポーネント中 0 個しか VoiceOver の受け入れ検証を通過していません。アクセシビリティが必要な製品には使わないでください。 非対応 公開 API 1.0 までは破壊的変更あり。すべて MIGRATION に記録し、v1.0.0 で凍結 pre-1.0 07 / 事例 ## 実際のアプリで 動く姿を見る。 コミュニティの既存事例を、実際のウィンドウでそのまま録画。 [すべての事例を見る](https://zenit.z.express/ja/showcase) [0:18コミュニティコード IDE（ネイティブ）本物の TypeScript 言語サーバーに接続：入力中の補完、シグネチャヘルプ、ホバードキュメント。補完リスト、ポップオーバー、エディタ、ミニマップはすべて zenit が GPU 上で描画しています。](https://zenit.z.express/ja/showcase#code-intelligence)[1:09コミュニティWYSIWYG Markdown エディタ完全なネイティブ文書エディタ：リスト、チェックリスト、引用、多階層の番号付けが入力と同時に整形され、表、フローチャート、コードブロック、スクリーンショットがすべて同じ文書に共存します。Electron も WebView もなく、すべてのピクセルを zenit が描画します。](https://zenit.z.express/ja/showcase#ui-tour) [2:22コミュニティシンセ講座とピアノロール（ネイティブ）音色を作りながらシンセシスを学べます。内蔵の講座がフィルターを一歩ずつ解説し、どのノブもフィルターカーブ、エンベロープ、スペクトルをリアルタイムに動かします。続いて 7 トラックのピアノロールで曲を仕上げます。すべての音はアプリ自身のシンセが鳴らしています。クリックすると音声付きで再生します。](https://zenit.z.express/ja/showcase#timbre) 08 / ZENIT で開発中 ## 可能性は無限大、 次はあなたのアイデア。 すでにパートナーが zenit で無限キャンバスのデザインツール、コードエディタ IDE、動画ダウンローダーなどを開発しています。同じノード、スタイル、ネイティブ機能が、まったく異なる製品を支えています。 パートナーが開発中 無限キャンバスのデザインツール ズーム、ドラッグ、複数選択はすべて GPU 上で動作し、リキッドグラスのパネルがキャンバスの上に浮かびます。 GPU canvasGlassBoxmagnify パートナーが開発中 コードエディタ IDE 大きなファイルの仮想スクロール、完全な IME 処理、マルチウィンドウのコマンドパレット、ネイティブメニュー。 VirtualListIMEmulti-window パートナーが開発中 動画ダウンローダー バックグラウンドのジョブと進捗表示。完了したファイルはそのまま Finder にドラッグできます。 workersProgressdrag-out [次は あなたのアイデア フレームワークの可能性は無限です。ウィンドウひとつから始めて、思い描く Mac アプリを作りましょう。 作り始める](https://zenit.z.express/ja/docs/guide/getting-started) ## 最初のウィンドウから 始めよう。 [クイックスタートを読む](https://zenit.z.express/ja/docs/guide/getting-started) [開発マニュアル](https://zenit.z.express/ja/docs)[AI 開発 Skill](https://zenit.z.express/ja/docs/guide/ai-skill) [GitHub](https://github.com/version-next/zenit) オープンソース · 仲間募集中 ### UI のパフォーマンスと モーションを突き詰めたい？ 一緒にやりましょう。 デザイナーでも開発者でも、1 フレームの落ち、1 ティック遅れるキャレット、しっくりこないイージングカーブが気になって仕方ない人こそ、私たちが探している仲間です。zenit を、最高の開発体験（DX）とパフォーマンスを備えた、最も愛される GPU ネイティブ UI フレームワークに一緒に磨き上げましょう。 デザイナーコンポーネントのビジュアル、モーションカーブ、インタラクションの細部 開発者レンダリング、レイアウト、テキストエンジン、パフォーマンス [GitHub で参加](https://github.com/version-next/zenit)[コントリビューションガイド](https://github.com/version-next/zenit/blob/HEAD/CONTRIBUTING.md)