家計簿アプリを作る #1：SvelteKit × Cloudflare D1 × Drizzle の環境構築

SvelteKit + Cloudflare Workers（D1 + Drizzle ORM）を使って家計簿アプリを作っていきます。この記事はその第1回で、プロジェクトの環境構築をまとめます。

作るもの

• 家計簿アプリ（収支の記録・管理）
• 技術スタック：SvelteKit / Cloudflare Workers + D1 / Drizzle ORM / 認証

Step 1：プロジェクト作成

npx sv create kakeibo-app

対話形式でいくつか質問されます。TypeScript は Yes を選択しました。

Step 2：adapter-cloudflare を追加する

SvelteKit を Cloudflare Workers にデプロイするには @sveltejs/adapter-cloudflare が必要です。

最初に npx sv add cloudflare-workers を試しましたが、エラーになりました。

■  Invalid add-on package specified: 'cloudflare-workers' is missing 'sv' in its 'peerDependencies'

sv add ではなく、手動でインストールする必要があります。

npm install -D @sveltejs/adapter-cloudflare

次に svelte.config.js の adapter を書き換えます。

import adapter from '@sveltejs/adapter-cloudflare'; // ← ここを変更
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter()
  }
};

export default config;

デフォルトで adapter-auto が入っているので、import の行ごと書き換えます。他の設定（compilerOptions など）はそのまま残してください。

Step 3：Drizzle を追加する

npx sv add drizzle

対話形式でいくつか質問されます。

ハマりポイント： SQLite クライアントの選択肢に libSQL もありますが、これは Turso 向けです。D1 には better-sqlite3 を選びます。

Drizzle の追加が完了すると以下が生成されます。

• drizzle.config.ts：Drizzle の設定ファイル
• src/lib/server/db/：スキーマやDB接続のベースフォルダ

動作確認

npm run dev

http://localhost:5173 でデフォルトのページが表示されれば完了です。

まとめ

次回はスキーマ設計とマイグレーションを実装します。