リストの操作 ― 追加と削除で一覧を編集する

導入

ここまでの@bind・@onclick・@foreachを合体させると、いよいよ「アプリらしい」画面になります。定番の**やることリスト（ToDo）**を作り、入力→追加→一覧表示、そして削除までを動かしてみましょう。

説明

入力を@bindで受け取り、ボタンの@onclickでリストにAdd、一覧は@foreachで描く。この3点セットが土台です。

<h3>やることリスト</h3>
<input @bind="newTask" placeholder="やることを入力" />
<button @onclick="Add">追加</button>

<ul>
@foreach (var task in tasks)
{
    <li>@task</li>
}
</ul>
<p>残り @tasks.Count 件</p>

@code {
    private string newTask = "";
    private List<string> tasks = new List<string> { "牛乳を買う", "本を返す" };

    private void Add()
    {
        tasks.Add(newTask);   // 入力をリストに追加
        newTask = "";          // 入力欄を空に戻す
    }
}

• List<string>にAddで要素を足すと、@foreachの一覧が自動で1行増える
• 追加後にnewTask = ""で入力欄をクリアするのが定番
• 件数は@tasks.Countで表示できる

やってみよう

入力欄に打って「追加」を押すと、一覧に増えていきます。何件か足して、@tasks.Countが連動して増えるのを確かめましょう。

演習

「全部消す」ボタンを足して、リストを空にできるようにしてください。

次回: コンポーネントが生成・更新される流れ——ライフサイクルです。