---
title: "概要 — zenit Zig UI ドキュメント"
description: "Zig で真にネイティブな macOS デスクトップ UI を構築します。zenit はウィンドウ、GPU レンダリング、テキスト、入力メソッド、アクセシビリティを一つの明快…"
url: https://zenit.z.express/ja/docs
language: ja
alternate_en: https://zenit.z.express/docs.md
alternate_zh: https://zenit.z.express/zh/docs.md
alternate_es: https://zenit.z.express/es/docs.md
alternate_ko: https://zenit.z.express/ko/docs.md
alternate_fr: https://zenit.z.express/fr/docs.md
alternate_de: https://zenit.z.express/de/docs.md
project: zenit v0.1.0-alpha (Zig 0.15.2, macOS)
source: https://github.com/version-next/zenit
---

# zenit 開発マニュアル

Zig で真にネイティブな macOS デスクトップ UI を構築します。zenit はウィンドウ、GPU レンダリング、テキスト、入力メソッド、アクセシビリティを一つの明快な UI モデルにまとめます。このマニュアルは最初のウィンドウから保守しやすい本番アプリまでをガイドします。

[5 分で始める](https://zenit.z.express/ja/docs/guide/getting-started)

$zig build run

**0.15.2**Zig バージョン

**Metal**現在の GPU バックエンド

**2 tiers**公開 API：ui.X と ui.<group>.X

`src/main.zig`

```zig
const std = @import("std");
const ui = @import("ui");
const App = @import("zenit_app").App;

fn mountUi(cx: *ui.Cx, _: *ui.Scope) anyerror!*ui.Node {
    return ui.text(cx, "Hello, zenit!", .{
        .font_size = cx.tokens.font_size.xxxl,
        .color = cx.tokens.color.fg_primary,
    });
}

pub fn main() !void {
    var gpa = std.heap.GeneralPurposeAllocator(.{}){};
    defer _ = gpa.deinit();

    const app = try App.init(gpa.allocator(), .{
        .window = .{ .title = "Hello" },
    });
    defer app.deinit();
    try app.runWith(mountUi);
}
```

Claude Code や他の Agent で開発していますか？ まず zenit UI dev Skill を入れましょう。

この手引き、コンポーネント選定表、実プロジェクトで踏んだ落とし穴を、Agent が必要に応じて読み込める指示としてまとめています。書かれるコードはそのまま zenit の規約に沿います。

[Skill をダウンロード.zip · 54 KB](https://zenit.z.express/downloads/zenit-ui-dev.zip)[インストールガイド](https://zenit.z.express/ja/docs/guide/ai-skill)

## 学習パス

順番に一度通して約 45 分。zenit アプリを自力で開発するためのメンタルモデルがひととおり身につきます。

[01最初のウィンドウを動かす依存を接続し、UI をマウントして、ビルド・実行します。10 min →](https://zenit.z.express/ja/docs/guide/getting-started)[02ノードとレイアウトbox・stack・text で画面を組み立てます。12 min →](https://zenit.z.express/ja/docs/guide/ui-tree)[03データ駆動の UISignal・Memo・Effect の連携。12 min →](https://zenit.z.express/ja/docs/guide/reactivity)[04スタイル体系を作るToken、名前付きスタイル、Recipe。11 min →](https://zenit.z.express/ja/docs/guide/styling)

## あなたが使うアーキテクチャ

アプリは安定した公開レイヤーだけに依存し、プラットフォームとレンダリングは zenit が担います。

LAYERS

`zenit.attach(dep, exe)` は実行ファイルに `ui` と `zenit_app` の 2 つのモジュールインポートだけを追加し、ネイティブブリッジをコンパイルしてシステムフレームワークをリンクします。内部モジュールはアプリのビルドグラフに存在しません。「使わない約束」ではなく、「そもそもインポートできない」のです。

## API の寄せ集めではない

この 3 つは、ランタイム、テキストスタック、ツール群を貫く能力です。いずれも実行可能なデモと実ウィンドウでの証拠に裏付けられています。

[DATA FLOWSignal による精密な更新仮想ツリーの再構築も、ツリー全体の diff もありません。依存は購読しているノードへ直接届きます。アニメーションを見る →](https://zenit.z.express/ja/docs/guide/reactivity#signal-not-diffing)[TEXT ENGINEUnicode 17 + IMEUAX #9 の双方向テキスト、UAX #29 の書記素境界、そして preedit / commit のエンドツーエンド入力経路。準拠データを見る →](https://zenit.z.express/ja/docs/guide/text-engine)[TOOLING目で確かめられる実ウィンドウ E2Eセマンティックなノード検索、仮想カーソル、Retina PNG キャプチャ、drawable から直接録画した MP4。録画を見る →](https://zenit.z.express/ja/docs/advanced/e2e)

## 3 つの開発原則

これらを守れば、zenit が急速に進化している間もコードを明快に保てます。

**公開レイヤーからのみインポート**

アプリのコードでは `ui.*`、`ui.<group>.*`、`zenit_app.App` を使い、内部ディレクトリには踏み込まないでください。

**データに UI を決めさせる**

永続的な状態は Signal またはバインド状態に置き、派生値は Memo、副作用は Effect で扱います。

**Token ファースト**

色、文字サイズ、間隔、角丸はテーマから取ります。どうしてもスケール外の値が必要なときは `ui.arb` で明示します。