0Pricing
Angular Academy · レッスン

リストとレンダリングの最適化

トラッキングで大規模なリストを高速化します

「リストとレンダリングの最適化」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

リストのレンダリングが重要な理由

リストは、パフォーマンス上の問題が最も発生しやすい部分です。変更のたびにリスト全体を再レンダリングすると、処理が無駄になり、DOMの状態もリセットされます。Angularには効率的にレンダリングするためのツールが用意されています。

@forブロック

組み込みの制御フロー@forでは、更新間で各項目を識別できるよう、track式が必要です。

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
}

trackが必須である理由

安定した識別子がないと、Angularはどの項目が移動、追加、削除されたのか判断できません。trackはレンダリングされた各ノードをデータに対応付けるため、DOMを作り直さずに再利用できます。

識別子でトラッキングする

idなど、一意で安定したキーを使用してください。並べ替えが発生するリストでtrack $indexを使うのは避けてください。インデックスの変化によって、DOMが不必要に大きく入れ替わるためです。

@for (user of users(); track user.id) {
  <app-user-card [user]="user" />
}

track $indexが適切な場合

項目に一意のidがなく、並べ替えも行われない場合（追加のみのログなど）は、track $indexを使用できます。

@for (line of logLines(); track $index) {
  <p>{{ line }}</p>
}

従来のtrackBy

以前の*ngForでは、安定したキーを返すtrackBy関数を指定します。

trackById(index: number, item: Item) {
  return item.id;
}

テンプレート内のtrackBy

*ngForのマイクロ構文で関数を参照します。

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

空の状態と読み込み中の状態

@forでは、コレクションが空の場合に使用する@emptyブロックを指定できるため、追加の*ngIfチェックが不要になります。

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <li>No items yet.</li>
}

バインディング内の関数呼び出しを避ける

テンプレート内の関数は、チェックのたびに実行されます。@for本体でメソッドを呼び出すのではなく、値をSignalsやメモ化されたフィールドにあらかじめ計算しておいてください。

OnPush + 不変リスト

変更のたびに新しい配列参照を作成し、OnPushと組み合わせてください。適切なtrackを指定すれば、Angularは実際に変更された行だけを更新します。

this.items.update(list => [...list, newItem]);

仮想スクロール

非常に大きなリストでは、CDKのcdk-virtual-scroll-viewportを使って表示中の行だけをレンダリングします。これにより、データ量に関係なくDOMを小さく保てます。

<cdk-virtual-scroll-viewport itemSize="48">
  <div *cdkVirtualFor="let item of items">
    {{ item.name }}
  </div>
</cdk-virtual-scroll-viewport>

クイックチェック

リストの最適化についての理解度を確認しましょう。

まとめ

安定したキーを使った@for ... track（または従来のtrackBy）、@emptyブロック、OnPushでの不変更新、そして非常に大きなコレクション向けの仮想スクロールによって、リストを最適化する方法を学びました。

よくある質問

「リストとレンダリングの最適化」レッスンは無料ですか？

はい。「リストとレンダリングの最適化」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「リストとレンダリングの最適化」で何を学びますか？

トラッキングで大規模なリストを高速化します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「リストとレンダリングの最適化」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 変更検知の仕組み
  2. OnPush変更検知
  3. ゾーンレスAngular
  4. リストとレンダリングの最適化
← Angular Academyに戻る