HonoX 家計簿アプリ

HonoXで動かすシンプルな家計簿アプリです。Cloudflare Workers + D1で動作します。

技術スタック

• フレームワーク: HonoX (Hono + React SSR)
• ランタイム: Cloudflare Workers
• データベース: Cloudflare D1 (SQLite)
• 認証: Firebase Authentication
• スタイリング: Tailwind CSS
• チャート: Chart.js

セットアップ手順

1. リポジトリのクローン

git clone https://github.com/qlitre/honox-kakeibo
cd honox-kakeibo
npm install

2. データベースのセットアップ

D1データベースを作成します：

npx wrangler d1 create kakeibo

wrangler.jsonc.templateをコピーしてwrangler.jsoncを作成し、出力されたデータベース情報を編集します：

{
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "kakeibo",
      "database_id": "YOUR_DATABASE_ID" // ← 上のコマンドで出力されたIDに置き換え
    }
  ]
}

テーブルとサンプルデータを作成します：

# テーブル作成
npx wrangler d1 execute kakeibo --local --file=./schema-tables.sql

# サンプルデータ投入（オプション）
npx wrangler d1 execute kakeibo --local --file=./sample-data.sql

3. 開発サーバーの起動

npm run dev

開発サーバーが起動したら、以下のURLにアクセスできます：

• ログインページ: http://localhost:5173/login
• 家計簿メニュー: http://localhost:5173/auth

開発コマンド

npm run dev      # 開発サーバー起動 (localhost:5173)
npm run build    # 本番ビルド
npm run preview  # 本番ビルドのプレビュー
npm run format   # コードフォーマット
npm run deploy   # Cloudflare Workersにデプロイ

データベース操作

# ローカルでクエリ実行
npx wrangler d1 execute kakeibo --local --command="SELECT * FROM expense LIMIT 5"

# 本番環境でクエリ実行（--localを外す）
npx wrangler d1 execute kakeibo --command="SELECT * FROM expense LIMIT 5"

認証設定

開発時：認証なしで利用する場合