# Void でフルスタックアプリを構築して Cloudflare にデプロイする [Void](https://void.cloud) は Vite でフルスタックアプリを構築して Cloudflare にデプロイするためのツールキットです。Vite や Vitest、Oxc、Rolldown を開発している VoidZero が開発し、同社が Cloudflare に加わった後の 2026 年 10 月 15 日にオープンソース（MIT ライセンス）として公開されました。コードで `void/db` を import するだけでローカルのデータベースが使えるようになり、`void deploy` を実行すると Cloudflare の D1 データベースが自動で作成されます。 この記事では、Void を使って D1 にデータを保存するメモアプリを React で構築し、Cloudflare にデプロイするまでの手順を紹介します。 ## Void とは [Cloudflare の公式ブログ](https://blog.cloudflare.com/deploy-with-void/)によると、Void は次の 3 つで構成されています。 - Void SDK: Vite でフルスタックアプリを構築するための JavaScript SDK。ファイルベースのルーティング、プリレンダリング、データベースから UI までの型安全性などを提供する - Void CLI: リソースのプロビジョニングとデプロイを行う CLI。Cloudflare の新しい `cf` CLI の上に構築されている - Void Platform: チームで Void アプリをホスティングするためのデプロイ基盤。自分の Cloudflare アカウント上の Workers for Platforms でセルフホストできる これらはすべて `void` という 1 つの npm パッケージと Vite プラグインとして提供されています。この記事では SDK と CLI を扱います。 公式ブログでは、Void を作った動機として次の 2 点が挙げられています。 - VoidZero のツール群はフロントエンドのツールチェーンをカバーしてきたが、フルスタックのアプリにはサーバーのルート、データベース、ローカルの開発環境、デプロイも必要になる。これらを 1 つの Vite のワークフローで扱えるようにしたい - 企業は社内向けのアプリを手軽に作りたい一方で、全社員にクラウドの権限を渡すことにはセキュリティ上の懸念がある。管理者が制御する共有のデプロイ基盤（Void Platform）でこれに応える Void の中心にあるのは「コードからリソースを推論する」という考え方です。Void は起動時に `routes/` や `pages/` などのディレクトリを走査し、どのモジュールを import しているかを調べます。たとえば `import { db } from "void/db"` があれば D1 データベースの `DB` バインディングが、`import { kv } from "void/kv"` があれば KV の `KV` バインディングが必要だと判断します。 バインディングとは、Cloudflare Workers のコードから D1 や KV などのリソースにアクセスするための接続設定のことです。開発中はこれらの import がローカルのリソースに解決され、デプロイ時には実際の Cloudflare のリソースが作成されます。そのため、`wrangler.jsonc` のような設定ファイルを手で書く必要がありません。 ## プロジェクトを作成する [Quickstart](https://void.cloud/guide/quickstart) に従って、空のディレクトリに Void をインストールし、`void init` コマンドでプロジェクトを作成します。 ```bash mkdir void-memo && cd void-memo npm install -D void npx void init ``` `void init` を実行すると、対話形式でいくつかの質問が表示されます。今回は次のように回答しました。 | 質問 | 選択肢 | 今回の回答 | | ------------------------------------- | ---------------------------------------- | ----------------------- | | Choose a Pages scaffold toolchain | Vite+（デフォルト）/ Vite | Vite+ | | Choose a Pages framework to scaffold | React / Vue / Svelte / Solid | React | | Choose a Pages starter | D1 (SQLite) / PostgreSQL / MySQL / Static Pages | D1 (SQLite) | | Where should this project deploy? | Cloudflare / Void / Skip deployment setup | Cloudflare | 最初の質問にある [Vite+](https://viteplus.dev) は、VoidZero が開発している統合ツールチェーンです。Vite に加えて Vitest、Oxlint、Oxfmt などを `vp` という 1 つのコマンドから使えます。Vite+ をグローバルにインストールする必要はなく、`void init` がプロジェクトの依存関係として追加します。 `void init` が完了すると、次のようなファイルが作成されます。 ```text . ├── AGENTS.md ├── db │ ├── migrations │ ├── schema.ts │ └── seed.ts ├── pages │ ├── index.server.ts │ └── index.tsx ├── routes │ └── api │ └── hello.ts ├── package.json ├── tsconfig.json ├── vite.config.ts └── void.config.ts ``` `vite.config.ts` には Void の Vite プラグインと React アダプターが追加されています。 ```ts:vite.config.ts import { defineConfig } from "vite"; import { voidPlugin } from "void"; import { voidReact } from "@void/react/plugin"; export default defineConfig({ plugins: [ voidPlugin(), voidReact({ react: { compiler: true } }), ], }); ``` `voidPlugin()` がルーティングやリソースの推論を担当し、`voidReact()` が React で Pages モードを使うためのアダプターです。`AGENTS.md` には、コーディングエージェント向けの Void の使い方が書かれています。`node_modules/void/docs/` に Void のドキュメントが同梱されていて、エージェントがそれを参照できるようになっています。 スターターには、すでにメッセージの一覧を表示して追加するページが含まれています。これを書き換えて、メモの追加と削除ができるアプリを作っていきましょう。 ## スキーマとマイグレーション Void は ORM として [Drizzle ORM](https://orm.drizzle.team/) を同梱しています。`db/schema.ts` にメモのテーブルを定義します。カラムの定義に使う関数は、データベースの種類に応じて `void/schema-d1`、`void/schema-pg`、`void/schema-mysql` から import します。 ```ts:db/schema.ts import { sql } from "void/db"; import { integer, sqliteTable, text } from "void/schema-d1"; export const memos = sqliteTable("memos", { id: integer("id").primaryKey({ autoIncrement: true }), body: text("body").notNull(), createdAt: text("created_at").notNull().default(sql`(datetime('now'))`), }); ``` 開発用の初期データを投入する `db/seed.ts` も、テーブル名に合わせて書き換えておきます。 ```ts:db/seed.ts import { defineSeed } from "void/seed"; export default defineSeed(async ({ db, schema }) => { await db.insert(schema.memos).values([{ body: "Void を試す" }]); }); ``` `void init` はスターターの `messages` テーブル用のマイグレーションを `db/migrations/` に生成しています。このマイグレーションはまだどこにも適用していないため、ディレクトリごと削除してから、`void db generate` コマンドでスキーマからマイグレーションファイルを生成し直します。 ```bash rm -rf db/migrations npx void db generate ``` `db/migrations/` ディレクトリに次のような SQL ファイルが生成されます。 ```sql:db/migrations/20261017063732_same_dreaming_celestial.sql CREATE TABLE `memos` ( `id` integer PRIMARY KEY AUTOINCREMENT NOT NULL, `body` text NOT NULL, `created_at` text DEFAULT (datetime('now')) NOT NULL ); ``` 続いて `void db seed` コマンドで、ローカルのデータベースをリセットし、マイグレーションを適用したうえで `db/seed.ts` を実行します。 ```bash npx void db seed ``` ```text ◇ Reset database. Applied 1 migration. ✓ Seeded from db/seed.ts. ``` ローカルのデータベースは `.void` ディレクトリに保存されます。ここで作成したデータベースは開発サーバーからも参照されます。 ## ページと loader・action Void の Pages モードでは、`pages/` ディレクトリに置いたコンポーネントがそのままルートになります。`pages/index.tsx` は `/` に対応します。この仕組みは [Inertia.js](https://inertiajs.com/) から着想を得たもので、各ページに対応する `.server.ts` ファイルでサーバー側の処理を書きます（[Pages Routing](https://github.com/voidzero-dev/void/blob/main/docs/guide/pages-routing/overview.md)）。 `.server.ts` ファイルには、主に次の 2 種類の関数を export します。 - `loader`: GET リクエストで実行され、戻り値がページコンポーネントの props になる - `action` / `actions`: フォームの送信などの変更処理を担当する。ページに複数の変更処理がある場合は、`actions` オブジェクトで名前付きのアクションとして定義する `pages/index.server.ts` を次のように書き換えます。 ```ts:pages/index.server.ts import { defineHandler, type InferProps } from "void"; import { db, desc, eq } from "void/db"; import { createInsertSchema, createSelectSchema } from "void/drizzle-zod"; import { memos } from "@schema"; export type Props = InferProps; export const loader = defineHandler(async () => { const rows = await db.select().from(memos).orderBy(desc(memos.id)); return { memos: rows }; }); export const actions = { create: defineHandler.withValidator({ body: createInsertSchema(memos, { body: (schema) => schema.trim().min(1).max(280), }).pick({ body: true }), })(async (_c, { body }) => { await db.insert(memos).values(body); }), delete: defineHandler.withValidator({ body: createSelectSchema(memos).pick({ id: true }), })(async (_c, { body }) => { await db.delete(memos).where(eq(memos.id, body.id)); }), }; ``` ポイントは次のとおりです。 - `db` は `void/db` から import する。この import によって、Void は D1 の `DB` バインディングが必要だと推論する - `InferProps` で loader の戻り値の型を取り出し、ページコンポーネントの props の型として export する - `defineHandler.withValidator()` でリクエストボディを検証する。`void/drizzle-zod` は [drizzle-zod](https://orm.drizzle.team/docs/zod) を再 export したもので、`createInsertSchema()` や `createSelectSchema()` を使うと Drizzle のスキーマから Zod のスキーマを生成できる 続いて `pages/index.tsx` でページコンポーネントを実装します。 ```tsx:pages/index.tsx import { useEffect } from "react"; import { action, Form, useForm } from "@void/react"; import type { Props } from "./index.server"; export default function HomePage({ memos }: Props) { const form = useForm("/?create", { body: "" }); // 送信成功時は送信した値が新しい初期値になるため、reset() ではなく明示的に空にする useEffect(() => { if (form.wasSuccessful) form.setData("body", ""); }, [form.wasSuccessful]); return (

メモ

    {memos.map((memo) => (
  • {memo.body} {memo.createdAt}{" "}
    • ))}
); } ``` ページコンポーネントは loader の戻り値を props として受け取ります。`Props` 型は `index.server.ts` から import しているため、loader の戻り値を変更するとコンポーネント側の型も追従します。 名前付きアクションは、URL の末尾に `?アクション名` を付けて呼び出します。`useForm("/?create", { body: "" })` は `create` アクションに送信するフォームの状態を管理するフックです。第 2 引数の初期値と `create` アクションのバリデーションスキーマから、`form.data` や `form.errors` の型が推論されます。`Form` コンポーネントに `form` を渡すと、送信時に `create` アクションが呼び出されます。送信中は `form.pending` が `true` になるため、追加ボタンを無効にしています。 削除ボタンのようにフォームの状態が不要な操作には、`action()` ヘルパーを使います。`action("/?delete", { data: { id: memo.id } })` は `delete` アクションに POST リクエストを送り、成功するとページを更新します。 `npm run dev`（中身は `vp dev`）で開発サーバーを起動し、`http://localhost:5173` にアクセスしてみましょう。 ```bash npm run dev ``` `db/seed.ts` で投入した「Void を試す」というメモが表示されます。入力欄にメモを入力して「追加」ボタンを押すと、一覧の先頭にメモが追加されます。「削除」ボタンを押すと、そのメモが一覧から消えます。 ![](https://images.ctfassets.net/in6v9lxmm5c8/4W44Vw9Urvt3c9jDZ8QUnx/c6e2dd2a1828729d45595f1374db5b52/void-vite-cloudflare-deploy-1.png) 空白だけを入力して送信すると、`trim().min(1)` のバリデーションに失敗します。`Form` コンポーネントは `role="alert"` を付けた要素でエラーメッセージを自動的に表示します。 ![](https://images.ctfassets.net/in6v9lxmm5c8/JR6jZxef9JB8XiCOXjdBV/8f8890a9199e1382a27090b8760c12ae/void-vite-cloudflare-deploy-2.png) ## Link と動的ルートで詳細ページを作る 続いて、メモをクリックすると詳細ページに移動できるようにしてみましょう。Pages モードでは、ファイル名を `[id]` のように角括弧で囲むと、その部分が URL のパラメーター（動的セグメント）になります。`pages/memos/[id].tsx` は `/memos/1` や `/memos/2` のような URL に対応します。 まずは詳細ページの loader を `pages/memos/[id].server.ts` に作成します。 ```ts:pages/memos/[id].server.ts import { defineHandler, type InferProps } from "void"; import { db, eq } from "void/db"; import { HTTPException } from "hono/http-exception"; import { memos } from "@schema"; export type Props = InferProps; export const loader = defineHandler(async (c) => { const [memo] = await db .select() .from(memos) .where(eq(memos.id, Number(c.req.param("id")))); if (!memo) { throw new HTTPException(404, { message: "メモが見つかりません" }); } return { memo }; }); ``` loader の引数 `c` は Hono のコンテキストです。URL のパラメーターは `c.req.param("id")` で取得できます。パラメーターは文字列なので、`Number()` で数値に変換してから検索しています。該当するメモがない場合は、Hono の [`HTTPException`](https://hono.dev/docs/api/exception) を throw して 404 を返します。throw した後の行では `memo` が `undefined` でないことが確定するため、`Props` の `memo` もメモの型として推論されます。 次に、ページコンポーネントを `pages/memos/[id].tsx` に作成します。 ```tsx:pages/memos/[id].tsx import { Link, useParams } from "@void/react"; import type { Props } from "./[id].server"; export default function MemoPage({ memo }: Props) { const { id } = useParams<{ id: string }>(); return (

メモ #{id}

{memo.body}

{memo.createdAt}

一覧に戻る
); } ``` コンポーネントの中で URL のパラメーターを参照したい場合は、`@void/react` の `useParams()` を使います。ここでは見出しの番号に使っています。 `Link` はページ間を移動するためのコンポーネントです。通常の `` 要素として描画されますが、クリックを横取りして、ページ全体を読み込み直さずに遷移します。 一覧ページのメモの本文も、`Link` で詳細ページへのリンクにします。 ```diff:pages/index.tsx import { useEffect } from "react"; -import { action, Form, useForm } from "@void/react"; +import { action, Form, Link, useForm } from "@void/react"; import type { Props } from "./index.server"; // ...
  • - {memo.body} {memo.createdAt}{" "} + {memo.body} {memo.createdAt}{" "}