npm create void@latestとは
Vite+ベースのCloudflare WorkersとD1（SQLite）のWebアプリ開発環境を構築できるコマンドです。
新規プロジェクトの開発環境の構築には「npm create vite@latest」が使用されることが多いですが、「npm create void@latest」だとDB・APIが標準搭載でデプロイも全自動なので爆速で開発環境を構築できます。
ViteとVoidのコマンドの違い
npm create vite@latestとnpm create void@latestは、どちらもViteベースのプロジェクトを初期化するツールですが、ターゲット環境（エッジ/Cloudflare Workers）とフルスタック機能の標準搭載において明確な違いがあります。
Viteのほうはフロントエンド（SPAや静的サイト）のビルドに特化しており、バックエンドやデータベース構成は別途手動で設定が必要です。
しかし、Voidは最初からCloudflare Workersでの動作を前提として設計されています。
D1（SQLiteデータベース）やR2ストレージ、KVなどのバインディングがデフォルトで組み込まれており、環境構築と同時にフルスタックな構成が手に入ります。
デプロイもViteはデプロイ先（Vercel, Netlify, Cloudflare 等）に応じた設定ファイルの作成や、各プロバイダーのCLI / GitHub Actionsのセットアップが必要です。
Voidはデプロイまで全自動で対応
Voidは「npx void deploy」を実行するだけで、ブラウザ認証からD1のリソース確保・データベースマイグレーション・Workersへのデプロイまでを全自動で行ってくれます。
さらにVoidはプロジェクト自体がAIアシスタント（CursorやKiroなどのAI コーディングツール）による自動開発・デプロイ操作を意識して開発されています。
初期化時にAI向けガイドライン（AGENTS.md 等）が含まれるなど、AIを活用した開発効率化が図られています。
コマンドを実行した構築手順
実際にコマンドを実行して開発環境を構築してみましょう。
まず、ターミナルで「npm create void@latest」を実行します。
npm create void@latest実行するとプロジェクト名やGitリポジトリの使用などを質問されるので、今回はすべてEnterキーを押してデフォルトを設定してください。
$ npm create void@latest
> npx
> 'create-void'
◇ Project name:
my-app
◇ Installing Void...
added 186 packages, and audited 187 packages in 13s
◇ Scaffolding starter...
◇ Initialize a git repository?
Yes
● Empty project detected. Scaffolding a Pages starter...
◇ Choose a Pages scaffold toolchain:
Vite+
◇ Choose a Pages framework to scaffold:
React
◇ Choose a Pages starter:
D1 (SQLite)
◇ Create .github/workflows/void-deploy.yml to deploy on pushes to main?
Yes
✓ Created my-app
cd my-app && npm run devちなみにデフォルトだとフレームワークがReactになりますが、Vue、Svelte、Solidも選択可能です。
完了したら「cd my-app && npm run dev」と表示されるので実行して起動します。
$ npm run dev
VITE+ v1.5.0 ready in 1927 ms
➜ Local: http://localhost:5173/起動後にブラウザで http://localhost:5173/ にアクセスすると初期表示画面が表示されます。
「API example: /api/hello」はクリックすると「http://localhost:5173/api/hello」にアクセスして、以下のJSONのレスポンスを受け取ります。
{
"message": "Hello from Void",
"framework": "React",
"database": "D1"
}これは、routes/api/hello.tsに記述された内容を返しています。
import { defineHandler } from "void";
export const GET = defineHandler(() => {
return {
message: "Hello from Void",
framework: "React",
database: "D1",
};
});Messagesにメッセージを入力して「Add message」ボタンを押すと、Cloudflare D1（ローカルのSQLite）にデータが登録され、画面上のリストに即座に追加されます。
データベースのseedとschemaはdbディレクトリに保存されています。
import { defineSeed } from "void/seed";
const SAMPLE_MESSAGES = ["Hello from Void"];
export default defineSeed<typeof import("./schema")>(async ({ db, schema }) => {
await db.insert(schema.messages).values(
SAMPLE_MESSAGES.map((text) => ({
text,
})),
);
});import { sql } from "void/db";
import { integer, sqliteTable, text } from "void/schema-d1";
export const messages = sqliteTable("messages", {
id: integer("id").primaryKey({ autoIncrement: true }),
text: text("text").notNull(),
createdAt: text("created_at").notNull().default(sql`(datetime('now'))`),
});npx void deployでデプロイする
npx void deployを実行すると、ビルド、リソース(DBなど)の用意、マイグレーション適用、URL公開を行います。
$ npx void deploy
# 中略
✓ built in 82ms
◇ Preparing deployment...
◇ Applying D1 migrations...
● Saved a D1 restore point before applying 1 migration.
To undo these migrations, restore this point (discards every later write):
void db restore --bookmark=00000000-0000000a-0000123d-27d4bfc123456789692b22cb24e1c2b3
? About to apply 1 migration(s)
Your database may not be available to serve requests during the migration, continue?
Using fallback value in non-interactive context: yes
╭─ https://my-app.sample.workers.dev ─╮
│ │
│ Worker: my-app │
│ D1 migrations up to date │
│ │
╰────────────────────────────────────────╯
✓ Successfully deployed!「https://my-app.sample.workers.dev」のようなURLが発行されるので、アクセスするとローカルと同じ画面が表示されます。
試しにMessageに「foo」と入力して送信すると、D1 (データベース)に保存されるため、ほかのブラウザでアクセスしても、同様の内容が表示されます。
Cloudflareの「D1 Database > my-app-db > Studio」を確認すると、データベースにデータが登録されていることを確認できます。
まとめ
npm create void@latestを使えば、複雑な設定ファイルやインフラの準備に悩むことなく、数ステップでCloudflare Workers + D1のフルスタック構成が完成します。
- 圧倒的な速さの環境構築
- DB・APIが標準搭載
- デプロイも全自動
「とにかく早くアイデアを形にしたい」「Cloudflareのエッジ環境で軽量アプリを作ってみたい」という方には間違いなくオススメです。
CursorやKiroなどのAIエディタとも非常に相性が良いので、ぜひ組み合わせて爆速開発を体験してみてください。
