本文へスキップ
QuickGUI

はじめに

#動作要件

  • macOS 14 以降
  • Bun 1.4 以降
  • TypeScript 7
  • Xcode Command Line Tools（xcode-select --install）

現在サポートしている対象は macOS です。

#プロジェクトを作成

bunx @quickgui/cli init my-app --language typescript
cd my-app
quickgui dev

init はプロジェクトを作成し、依存関係をインストールします。--language を省略すると、Go、TypeScript、Rust を対話的に選べます。

#最初のウィンドウ

import { app, Window } from "@quickgui/native";
import { Button, Text, View, createRenderer } from "@quickgui/solid";
import { createSignal } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <View style={{ padding: 24, display: "flex", flexDirection: "column", gap: 12 }}>
      <Text>Count: {count()}</Text>
      <Button onClick={() => setCount(count() + 1)}>Increment</Button>
    </View>
  );
}

function openWindow() {
  new Window({ title: "Counter", width: 720, height: 480, renderer: createRenderer(Counter) });
}

app.on("reopen", ({ hasVisibleWindows }) => {
  if (!hasVisibleWindows) openWindow();
});
await app.whenReady();
openWindow();

表示中のウィンドウがないときに Dock アイコンをクリックすると、reopen がウィンドウを開き直します。

#実行とビルド

quickgui check
quickgui test
quickgui fmt
quickgui dev
quickgui build

dev は編集に合わせて再ビルドします。build はパッケージ済みアプリを dist/ に書き出します。

#次のステップ