BlazorでのTodoリスト表示と編集機能｜ASP.NET×Blazor入門 11.3

11.3 コンポーネント分割、リスト表示、編集機能

本セクションでは、前セクションで作成したサービスを活用し、Todoリストの表示・追加・編集機能をコンポーネントとして分割して実装します。 UIの責務を整理しながら、再利用しやすい構成を意識します。

1. コンポーネント構成の概要

TodoList.razor： 全体のリスト表示と操作画面
TodoItemRow.razor： 単一Todoの表示と編集
TodoForm.razor： 追加・編集フォーム

2. TodoList.razor の実装


@inject ITodoService TodoService



@if (todos == null)
{

読み込み中...


}
else
{
    <table class="table">
        <thead><tr><th>タイトル</th><th>操作</th></tr></thead>
        <tbody>
            @foreach (var item in todos)
            {
                <TodoItemRow Item="item" OnUpdated="LoadTodos" />
            }
        </tbody>
    </table>
}

@code {
    List<TodoItem>? todos;

    protected override async Task OnInitializedAsync()
    {
        await LoadTodos();
    }

    async Task LoadTodos()
    {
        todos = await TodoService.GetTodosAsync();
    }
}

3. TodoItemRow.razor


@using System.ComponentModel.DataAnnotations
@inject ITodoService TodoService
@code {
    [Parameter] public TodoItem Item { get; set; } = default!;
    [Parameter] public EventCallback OnUpdated { get; set; }

    bool isEditing = false;
    string editedTitle = "";

    void StartEdit()
    {
        isEditing = true;
        editedTitle = Item.Title;
    }

    async Task Save()
    {
        Item.Title = editedTitle;
        await TodoService.UpdateTodoAsync(Item);
        isEditing = false;
        await OnUpdated.InvokeAsync();
    }

    async Task Delete()
    {
        await TodoService.DeleteTodoAsync(Item.Id);
        await OnUpdated.InvokeAsync();
    }
}
@if (isEditing)
{
    
        
        
            
            
        
    
}
else
{
    
        @Item.Title
        
            
            
        
    
}

4. TodoForm.razor


@inject ITodoService TodoService
@code {
    [Parameter] public EventCallback OnTodoAdded { get; set; }

    string newTitle = "";

    async Task AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTitle))
        {
            await TodoService.AddTodoAsync(new TodoItem { Title = newTitle });
            newTitle = "";
            await OnTodoAdded.InvokeAsync();
        }
    }
}

このようにUIを小さなコンポーネントに分割することで、保守性・テスト性が高まり、Blazorの特徴を活かした柔軟な設計が可能になります。次のセクションでは、検索・フィルター、状態保持に進み、アプリをさらに実用的に進化させます。

2025-05-19