AIに頼り切って家計簿アプリを追加開発する。：一覧表示処理

はじめに

前回までで、家計簿アプリの設計からOCR処理までの実装を行いました(AIがやりました)
今回は一覧表示処理を実装します。

プロンプト

支出一覧画面の一覧表示処理を実装したい。
コードを出力してください。

回答

以下は:

支出一覧画面

の一覧表示処理実装例です。

実装内容:

• SQLiteから支出一覧取得
• DataGridViewへ表示
• 日付降順
• 合計金額表示
• 明細件数表示
• 検索対応しやすい構成

です。

---

前提テーブル

---

Expenses

CREATE TABLE Expenses
(
    Id INTEGER PRIMARY KEY AUTOINCREMENT,
    ExpenseDate TEXT,
    TotalAmount REAL,
    PaymentMethod TEXT,
    Note TEXT
);

---

ExpenseItems

CREATE TABLE ExpenseItems
(
    Id INTEGER PRIMARY KEY AUTOINCREMENT,
    ExpenseId INTEGER,
    ProductName TEXT,
    Category TEXT,
    Amount REAL,
    Quantity INTEGER,
    TaxRate INTEGER,
    Note TEXT
);

---

1. モデル作成

---

ExpenseListModel.cs

namespace KakeiboApp.Models
{
    public class ExpenseListModel
    {
        public long Id { get; set; }

        public DateTime ExpenseDate { get; set; }

        public decimal TotalAmount { get; set; }

        public string PaymentMethod { get; set; }

        public string Note { get; set; }

        public int ItemCount { get; set; }
    }
}

---

2. 支出一覧画面

---

using追加

using Microsoft.Data.Sqlite;
using KakeiboApp.Data;
using KakeiboApp.Models;

---

3. Form Load

---

ExpenseListForm.cs

public ExpenseListForm()
{
    InitializeComponent();

    LoadExpenseList();
}

---

4. 一覧取得

---

LoadExpenseList

private void LoadExpenseList()
{
    List<ExpenseListModel> list =
        GetExpenseList();

    dgvExpenses.Rows.Clear();

    foreach (ExpenseListModel item
        in list)
    {
        dgvExpenses.Rows.Add(
            item.Id,
            item.ExpenseDate.ToString("yyyy/MM/dd"),
            item.TotalAmount,
            item.PaymentMethod,
            item.ItemCount,
            item.Note);
    }
}

---

5. DB取得

---

GetExpenseList

private List<ExpenseListModel>
    GetExpenseList()
{
    List<ExpenseListModel> list =
        new List<ExpenseListModel>();

    using SqliteConnection conn =
        DbHelper.GetConnection();

    conn.Open();

    string sql =
    @"
    SELECT
        e.Id,
        e.ExpenseDate,
        e.TotalAmount,
        e.PaymentMethod,
        e.Note,
        COUNT(i.Id) AS ItemCount
    FROM Expenses e
    LEFT JOIN ExpenseItems i
        ON e.Id = i.ExpenseId
    GROUP BY
        e.Id,
        e.ExpenseDate,
        e.TotalAmount,
        e.PaymentMethod,
        e.Note
    ORDER BY
        e.ExpenseDate DESC,
        e.Id DESC;
    ";

    using SqliteCommand cmd =
        new SqliteCommand(sql, conn);

    using SqliteDataReader reader =
        cmd.ExecuteReader();

    while (reader.Read())
    {
        ExpenseListModel item =
            new ExpenseListModel();

        item.Id =
            reader.GetInt64(0);

        item.ExpenseDate =
            DateTime.Parse(
                reader.GetString(1));

        item.TotalAmount =
            reader.GetDecimal(2);

        item.PaymentMethod =
            reader.IsDBNull(3)
            ? ""
            : reader.GetString(3);

        item.Note =
            reader.IsDBNull(4)
            ? ""
            : reader.GetString(4);

        item.ItemCount =
            reader.GetInt32(5);

        list.Add(item);
    }

    return list;
}

---

6. DataGridView列構成

以下列を作成。

列名	内容
colId	ID
colDate	日付
colAmount	合計金額
colPaymentMethod	支払方法
colItemCount	商品数
colNote	備考

---

7. DataGridView設定推奨

フォームロード後など。

private void InitializeGrid()
{
    dgvExpenses.AllowUserToAddRows =
        false;

    dgvExpenses.ReadOnly = true;

    dgvExpenses.SelectionMode =
        DataGridViewSelectionMode.FullRowSelect;

    dgvExpenses.MultiSelect =
        false;

    dgvExpenses.AutoSizeColumnsMode =
        DataGridViewAutoSizeColumnsMode.Fill;
}

---

コンストラクタ

public ExpenseListForm()
{
    InitializeComponent();

    InitializeGrid();

    LoadExpenseList();
}

---

8. 合計金額表示形式

金額カンマ表示したい場合。

item.TotalAmount.ToString("#,##0")

---

9. 行ダブルクリックで詳細表示（推奨）

---

イベント

private void dgvExpenses_CellDoubleClick(
    object sender,
    DataGridViewCellEventArgs e)
{
    if (e.RowIndex < 0)
    {
        return;
    }

    long expenseId =
        Convert.ToInt64(
            dgvExpenses.Rows[e.RowIndex]
                .Cells["colId"].Value);

    ExpenseDetailForm form =
        new ExpenseDetailForm(
            expenseId);

    form.ShowDialog();

    LoadExpenseList();
}

---

最終表示イメージ

ID	日付	合計	支払方法	商品数
1	2026/05/10	2,363	PayPay	3
2	2026/05/09	980	現金	2

---

次に実装推奨

次段階では以下を入れると実用性が上がります。

機能	内容
検索	日付範囲、商品名
CSV/Excel出力	要件対応
明細画面	商品一覧表示
編集	支出修正
削除	支出削除
月別集計	グラフ表示
カテゴリ集計	食費等

起動、確認

起動してみます。

最後に

次回は機能全体の再設計をします。