108. 描画の無駄を減らす — 変わった部分だけ描き直す

一覧画面がもたつくとき、よくある原因は @for の track が実質的に効いていないことです。track $index のままデータを並べ替えたり、更新のたびに全要素を新しいオブジェクトで作り直したりすると、Angularは行を再利用できず一覧全体を作り直します。この無駄はPerformanceタブの録画に長いタスクとして現れます。

部品単位の無駄を防ぐ土台が、既習のシグナルとOnPush・ゾーンレスです。状態をシグナルで持てば、Angularは「どの値がどの部品で使われているか」を追跡でき、変わった部品だけを再描画します。逆にシグナルを介さない書き換えが混ざっていると、この仕組みに乗れず更新漏れや無駄なチェックの原因になります。

確認にはAngular DevTools(ブラウザ拡張)のプロファイラが便利です。録画すると変更検知のたびにどのコンポーネントが何ミリ秒かかったかが見えるので、「再描画が本当に問題なのか」をまず確かめます。体感で困っていないのに描画最適化に凝るのは、典型的な早すぎる最適化です。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-user-list',
  // 遅い: track $index だと並べ替えで全行が作り直される
  //   '@for (user of users(); track $index) { ... }'
  // 速い: 一意なIDを track にすると変わった行だけ描き直される
  template:
    '@for (user of users(); track user.id) {' +
    '  <p>{{ user.name }}</p>' +
    '}',
})
export class UserListComponent {
  users = signal([
    { id: 1, name: '佐藤' },
    { id: 2, name: '鈴木' },
  ]);
  // 並べ替えても id が同じ行は再利用される。
  // 効いているかは Angular DevTools のプロファイラで確認する
}

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗