Angularでパフォーマンスを向上させるためのベストプラクティス

AngularでngForとtrackByを使う方法

多くの場合、アイテムの参照が異なっていても、アイテム自体は同じであることがあります。例えば、アイテムの順序が変更された場合、ngForはすべてのアイテムを再レンダリングします。これはパフォーマンスの問題につながる可能性があります。

trackByは、ngForにアイテムを識別するためのカスタム関数を提供するプロパティです。この関数によって、ngForはアイテムが変更されたかどうかをより効率的に判断することができます。

trackByを使う利点

• パフォーマンスの向上
• アニメーションの改善
• メモリ使用量の削減

trackByは、テンプレートのngForディレクティブにtrackBy属性として指定します。属性値には、アイテムを識別するためのカスタム関数を指定します。

<ul>
  <li *ngFor="let item of items; trackBy: trackByFn">
    {{ item.name }}
  </li>
</ul>

trackByFnは、2つの引数を受け取ります。

• index: アイテムのインデックス
• item: アイテム

この関数は、アイテムを識別するための値を返す必要があります。多くの場合、アイテムのIDを返します。

export class MyComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ];

  trackByFn(index: number, item: any): any {
    return item.id;
  }
}

• trackByは、パフォーマンスの向上に役立ちますが、常に必要というわけではありません。
• trackBy関数は、できるだけ効率的に書く必要があります。
• trackBy関数は、アイテムの参照が変更された場合にのみ呼び出されることに注意してください。

trackByは、ngForのパフォーマンスを向上させるための強力なツールです。正しく使用することで、アプリケーションのパフォーマンスとユーザーエクスペリエンスを向上させることができます。

<ul>
  <li *ngFor="let item of items; trackBy: trackByFn">
    {{ item.name }}
  </li>
</ul>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ];

  trackByFn(index: number, item: any): any {
    return item.id;
  }
}

このコードでは、itemsという配列をngForを使ってループ処理し、リストとしてレンダリングしています。trackBy属性には、trackByFnというカスタム関数を指定しています。

trackByFn関数は、アイテムのIDを返します。この関数は、ngForにアイテムを識別するための値を提供します。

このサンプルコードを実行すると、以下のリストが表示されます。

Item 1
Item 2
Item 3

trackByは、さまざまな状況で使用できます。

• アイテムの順序が変更された場合
• アイテムが追加または削除された場合

以下は、trackByを使用するその他の例です。

trackByFn(index: number, item: any): any {
  return item.position;
}

trackByFn(index: number, item: any): any {
  return item.id;
}

trackByFn(index: number, item: any): any {
  return item.name + item.age;
}

trackBy 以外の方法

*ngIf を使用する

ngIf ディレクティブを使用して、条件付きで要素を表示または非表示にすることができます。これは、画面に表示されていない要素をレンダリングする必要がないため、パフォーマンスの向上に役立ちます。

<ul>
  <li *ngFor="let item of items">
    <div *ngIf="item.visible">
      {{ item.name }}
    </div>
  </li>
</ul>

ChangeDetectionStrategy は、コンポーネントがどのように変更を検出するかを制御するプロパティです。OnPush 戦略を使用すると、コンポーネントは明示的に変更が検出されるまで更新されません。これは、パフォーマンスの向上に役立ちます。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ];

  trackByFn(index: number, item: any): any {
    return item.id;
  }
}

仮想化を使用する

Angular には、VirtualScroller という仮想化コンポーネントがあります。このコンポーネントは、大きなリストをレンダリングする際に役立ちます。

<virtual-scroller [items]="items" [trackBy]="trackByFn">
  <div *ngFor="let item of items">
    {{ item.name }}
  </div>
</virtual-scroller>

trackBy は、ngFor のパフォーマンスを向上させるための強力なツールですが、唯一の方法ではありません。上記のその他の方法も検討して、アプリケーションのパフォーマンスを最適化してください。