家計簿アプリを作る
SvelteKit + Cloudflare Workers(D1 + Drizzle ORM)で家計簿アプリを段階的に作っていくシリーズです。
技術スタック:SvelteKit / Cloudflare Workers + D1 / Drizzle ORM / 認証
環境構築
データベース設計
データ操作
- 家計簿アプリを作る #3:D1 への接続 + 収支一覧の表示
- 家計簿アプリを作る #4:収支の登録フォームを実装する
- 家計簿アプリを作る #5:収支の削除を実装する
- 家計簿アプリを作る #6:収支の編集を実装する
認証
- 家計簿アプリを作る #7:Better Auth のセットアップ + サインアップ実装
- 家計簿アプリを作る #8:ログイン・ログアウトの実装
- 家計簿アプリを作る #9:Cloudflare Pages へのデプロイ
UI スタイリング
集計表示
- 家計簿アプリを作る #11:収支の集計表示
- 家計簿アプリを作る #12:月別フィルタの実装
- 家計簿アプリを作る #13:登録・編集フォームの改善
- 家計簿アプリを作る #14:登録・編集後の月フィルタ維持
- 家計簿アプリを作る #15:再デプロイと最新月の自動選択
- 家計簿アプリを作る #16:UI全体の見直し
複数ユーザー対応
バリデーション
UI コンポーネント
ページネーション
CSVエクスポート
グラフ表示
- 家計簿アプリを作る #27:収支グラフの表示
- 家計簿アプリを作る #28:Cloudflare Pages への再デプロイ
- 家計簿アプリを作る #29:収支の月次推移グラフ
- 家計簿アプリを作る #30:Cloudflare Pages への再デプロイ
ダークモード
レスポンシブ対応
パスワード変更
カテゴリ管理
- 家計簿アプリを作る #36:カテゴリ管理機能
- 家計簿アプリを作る #37:カテゴリ別予算設定とアラート表示
- 家計簿アプリを作る #38:カテゴリ別予算の消化状況をグラフで見る
- 家計簿アプリを作る #39:Cloudflare Pages への再デプロイ
定期収支管理
絞り込み機能
CSVインポート
- 家計簿アプリを作る #43:CSVインポート機能
- 家計簿アプリを作る #44:Cloudflare Pages への再デプロイ
- 家計簿アプリを作る #45:CSVインポート時のカテゴリ検証
- 家計簿アプリを作る #46:Cloudflare Pages への再デプロイ
年間サマリー
- 家計簿アプリを作る #47:年間サマリーページ
- 家計簿アプリを作る #48:Cloudflare Pages への再デプロイ
- 家計簿アプリを作る #49:年間サマリーにグラフを追加
- 家計簿アプリを作る #50:Cloudflare Pages への再デプロイ
一括削除
- 家計簿アプリを作る #51:収支の一括削除
- 家計簿アプリを作る #52:Cloudflare Pages への再デプロイ
- 家計簿アプリを作る #53:一覧の全選択チェックボックス
- 家計簿アプリを作る #54:Cloudflare Pages への再デプロイ
月間予算
グラフのダークモード対応
テスト
アカウント削除
検索ハイライト
カラムソート
メモ入力補完
クイック登録
PWA対応
レシート画像添付
- 家計簿アプリを作る #72:レシート画像の添付(Cloudflare R2)
- 家計簿アプリを作る #73:Cloudflare Pages への再デプロイ
- 家計簿アプリを作る #74:領収書の差し替え・削除
- 家計簿アプリを作る #75:Cloudflare Pages への再デプロイ