家計簿アプリを作る #11：収支の集計表示

プログラミング

家計簿アプリ作成シリーズの第11回です。今回は収入合計・支出合計・残高の集計をトップページに表示します。

実装方針

集計は Drizzle ORM で取得済みの配列を JavaScript で処理する方法を採用しました。全期間の合計を表示し、月別フィルタは後のお題で実装します。

Step 1：+page.server.ts で集計する

load 関数でトランザクション一覧を取得した後、filter と reduce で集計します。

const allTransactions = await db.select().from(transactions);

const income = allTransactions
  .filter(t => t.type === 'income')
  .reduce((sum, t) => sum + t.amount, 0);

const expense = allTransactions
  .filter(t => t.type === 'expense')
  .reduce((sum, t) => sum + t.amount, 0);

return {
  transactions: allTransactions,
  totalIncome: income,
  totalExpense: expense,
  balance: income - expense
};

Step 2：+page.svelte で表示する

data から集計値を受け取って表示します。金額は toLocaleString() でカンマ区切りにします。

<ul class="flex gap-4">
  <li>収入合計: {data.totalIncome.toLocaleString()}</li>
  <li>支出合計: {data.totalExpense.toLocaleString()}</li>
  <li>残高: {data.balance.toLocaleString()}</li>
</ul>

UI について

お題ではカード形式での表示を想定していましたが、今回は機能の実装を優先してシンプルなリスト表示としました。

UI はこだわり始めると際限がなく、途中で変更するとページごとに統一感が失われる恐れもあります。そのため、機能をすべて実装し終えてから UI を一括で見直す方針としています。

まとめ

  • 取得済みの配列を filter + reduce で集計するのがシンプル
  • 金額表示は toLocaleString() でカンマ区切りにする
  • UI の作り込みは機能実装が完了してから一括で行う

次回は月別フィルタを実装します。

← トップページに戻る