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"

認証設定

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

app/checkauthFb.tsの先頭でreturn trueを追加すると、Firebase設定なしで動作確認できます：

export const checkauthFb = async (c: Context): Promise<boolean> => {
    return true; // ← この行を追加
    // 以下の認証処理はスキップされます
    ...
}

これで http://localhost:5173/auth に直接アクセスできます。

本番環境：Firebase認証を設定する

1. Firebaseプロジェクトの作成

Firebaseコンソールにアクセスしてプロジェクトを作成します。

2. Webアプリの追加

プロジェクトのトップページからWebアプリを追加します。

アプリ名を入力します：

3. Firebase設定を取得

発行されたAPIキーなどの設定値をコピーします：

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "kakeibo-test-d41d3.firebaseapp.com",
  projectId: "kakeibo-test-d41d3",
  storageBucket: "kakeibo-test-d41d3.firebasestorage.app",
  messagingSenderId: "798687987590",
  appId: "1:798687987590:web:xxxxxxxxxxxxx"
};

この値をwrangler.jsoncのvarsセクションに対応する形で設定します：

{
  "vars": {
    "FB_API_KEY": "your-api-key",
    "FB_AUTH_DOMAIN": "kakeibo-test-d41d3.firebaseapp.com",
    "FB_PROJECT_ID": "kakeibo-test-d41d3",
    "FB_STORAGE_BUCKET": "kakeibo-test-d41d3.firebasestorage.app",
    "FB_MESSAGE_SENDER_ID": "798687987590",
    "FB_APP_ID": "1:798687987590:web:xxxxxxxxxxxxx"
  }
}

4. 認証方法の設定

Firebaseコンソールで Authentication をクリックします。

「始める」をクリックし、ログイン方法で「メール / パスワード」を選択します。

以下のように設定して有効化します：

5. ユーザーの追加

「ユーザー」タブに移動し、ユーザーを追加します。

6. 動作確認

npm run dev

http://localhost:5173/login にアクセスし、登録したメールアドレスとパスワードでログインできればOKです。

注意: 開発時にapp/checkauthFb.tsを編集した場合は元に戻してください。

プロジェクト構成

app/
├── routes/          # ファイルベースルーティング
│   ├── auth/       # 認証が必要なページ
│   └── api/        # APIエンドポイント
├── islands/        # クライアントサイドコンポーネント
├── components/     # サーバーサイドコンポーネント
├── libs/           # データベース操作（dbService.ts）
├── utils/          # ユーティリティ関数
└── checkauthFb.ts  # Firebase認証ロジック

デプロイ

npm run deploy

Cloudflare Workersにデプロイされます。本番環境のD1データベースには--localフラグなしでスキーマを適用してください。