モデル定義とサービス層の作成｜Blazor Todoアプリ構築 ｜ASP.NET×Blazor入門 11.2

11.2 モデル定義、サービス層作成

このセクションでは、Todoアプリに必要なモデル（データ構造）と、それを操作するサービス層の作成について詳しく説明します。 モデルはアプリケーションの土台であり、サービス層はそれを操作する「ビジネスロジックの窓口」です。

1. Todoモデルの定義

タスクの1件を表すクラスとして TodoItem を定義します。最小限のプロパティから開始し、必要に応じて拡張します。

public class TodoItem
{
    public int Id { get; set; }             // 一意の識別子
    public string Title { get; set; }       // タスクのタイトル
    public string? Description { get; set; } // 詳細説明（省略可）
    public bool IsCompleted { get; set; }   // 完了状態
    public DateTime CreatedAt { get; set; } // 作成日時
}
  

2. サービスインターフェースの定義

テストや保守性を考慮し、インターフェース ITodoService を定義してから実装を行います。

public interface ITodoService
{
    Task> GetTodosAsync();
    Task GetTodoByIdAsync(int id);
    Task AddTodoAsync(TodoItem item);
    Task UpdateTodoAsync(TodoItem item);
    Task DeleteTodoAsync(int id);
}
  

3. モック実装の作成

最初はAPIとの接続ではなく、インメモリで動作するモック実装を用意します。

public class TodoService : ITodoService
{
    private List _items = new();

    public Task> GetTodosAsync()
        => Task.FromResult(_items);

    public Task GetTodoByIdAsync(int id)
        => Task.FromResult(_items.FirstOrDefault(t => t.Id == id));

    public Task AddTodoAsync(TodoItem item)
    {
        item.Id = _items.Count + 1;
        item.CreatedAt = DateTime.Now;
        _items.Add(item);
        return Task.CompletedTask;
    }

    public Task UpdateTodoAsync(TodoItem item)
    {
        var existing = _items.FirstOrDefault(t => t.Id == item.Id);
        if (existing != null)
        {
            existing.Title = item.Title;
            existing.Description = item.Description;
            existing.IsCompleted = item.IsCompleted;
        }
        return Task.CompletedTask;
    }

    public Task DeleteTodoAsync(int id)
    {
        _items.RemoveAll(t => t.Id == id);
        return Task.CompletedTask;
    }
}
  

4. DIへの登録

最後に、Program.cs または Startup.cs に以下を追加してDIにサービスを登録します。

builder.Services.AddSingleton<ITodoService, TodoService>();
  

これでアプリ全体で ITodoService を介してタスクデータを扱う準備が整いました。 次のセクションでは、コンポーネント分割、リスト表示、編集機能 に進み、UIの実装へと入っていきましょう。