【Blazor】 @keyを使い方

Blazorでは、コンポーネントの状態が変更されると再レンダリングが行われますが、その際にどの部分が変更されたのかを効率的に判断する必要があります。 特にリストや配列などのコレクションが存在し、項目の追加や削除が行われると、Blazorはどの項目が新しく追加されたのか、または削除されたのかを判定します。

@keyディレクティブはそのための一意の識別子を提供することで、Blazorがより早く何処が変更されたかを知ることができるので、スマートにDOMの更新を行えるようになります。 これにより、不必要なDOM操作を減らし、アプリケーションのパフォーマンスを向上させることが期待できます。

@keyは主にforeachループやforループ内で使用されます。 各項目が一意であることを確認するプロパティやフィールドを@keyに渡すことで、Blazorは効率的なリストのレンダリングが可能になります。

@foreach (var item in items)
    {
        <div @key="@item">
            @item
        </div>
    }

    <button @onclick="AddItem">Add Item</button>

    @code {
        private List<string> items = new List<string> { "Apple", "Banana", "Cherry" };

        private string newItem = "Mango";

        private void AddItem()
        {
            items.Add(newItem);
            newItem = "";
        }
    }

上記の例では、foreachループ内の各div要素に対して一意の@keyが割り当てられています。 このようにすることで、新しい項目が追加された場合や項目が削除された場合でも、Blazorは効率的にDOMを更新できます。

@keyディレクティブは、オブジェクトの一意性を確認する際にも使用できます。 例えば、各オブジェクトが一意のIDを持っている場合、そのIDを@keyに使用することができます。

@foreach (var person in people)
{
    <div @key="@person.Id">
        @person.Name
    </div>
}

@code {

    private List<Person> people = new List<Person>
    {
        new Person { Id = 1, Name = "Alice" },
        new Person { Id = 2, Name = "Bob" },
        new Person { Id = 3, Name = "Charlie" }
    };

}

この例では、各Personオブジェクトが一意のIdフィールドを持っています。 このIdフィールドは@keyディレクティブで指定されており、Blazorが各div要素を効率的にレンダリングするのに役立っています。

@keyを使用する際に気を付けることが２点あります。

• @keyディレクティブは、その要素自体に設定する必要があります。子要素や親要素に設定しても期待通りの動作をしない場合があります。
• @keyで指定するプロパティやフィールドは、そのスコープ内で一意でなければなりません。

Blazorの@keyディレクティブは、特にリストや配列などのコレクションを効率的にレンダリングする際に非常に役立ちます。 この機能を理解し、適切に使用することで、パフォーマンスの向上が期待できます。