Angularのアタッチ（Attach）とデタッチ（Detach）とは？
Angularでは、コンポーネントがアタッチ（Attach）されると変更検知が有効になり、データの変化を監視します。一方で、デタッチ（Detach）を行うと変更検知を一時的に無効化し、パフォーマンスの最適化が可能になります。
1. アタッチ（Attach）とは？
Angularのコンポーネントが画面に表示されたタイミングで、自動的に変更検知が開始されます。この状態を「アタッチ（Attach）」と呼びます。
🔹 具体例（通常のアタッチ）
export class MyComponent implements OnInit {
data: string = "";
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.getData().subscribe((res) => {
this.data = res;
});
}
}
📌 ポイント:
ngOnInit()でサービスからデータを取得- データが更新されるたびに自動で画面も更新される
2. デタッチ（Detach）とは？
デタッチを行うと、変更検知を無効化し、パフォーマンスを最適化できます。 特に、データが頻繁に変わらない場合や、不要な更新を避けたい場合に有効です。
🔹 detach() の使用例
export class MyComponent implements OnInit {
data: string = "";
constructor(private dataService: DataService, private cdr: ChangeDetectorRef) {}
ngOnInit() {
this.cdr.detach(); // 🚫 変更検知を無効化
this.dataService.getData().subscribe((res) => {
this.data = res;
this.cdr.detectChanges(); // 必要なときだけ変更検知を実行
});
}
}
📌 ポイント:
this.cdr.detach();で変更検知を無効化- データ取得後に
this.cdr.detectChanges();を実行し、必要なときだけ更新 - パフォーマンス最適化に効果的！
3. コンポーネントが削除されるときの注意点
コンポーネントが削除（デタッチ）されるときにメモリリークを防ぐため、購読 (subscribe()) を解除することが重要です。
🔹 ngOnDestroy() を使った購読解除
export class MyComponent implements OnInit, OnDestroy {
private subscription!: Subscription;
constructor(private dataService: DataService) {}
ngOnInit() {
this.subscription = this.dataService.getData().subscribe((res) => {
console.log("データ受信:", res);
});
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe(); // 🛑 購読解除！
console.log("購読を解除しました！");
}
}
}
📌 ポイント:
ngOnDestroy()でunsubscribe()を実行- メモリリークを防止し、パフォーマンス向上！
4. まとめ：アタッチ・デタッチの使い分け
| 場面 | 方法 | メリット |
|---|---|---|
| 通常の変更検知 | ngOnInit() | データ変更時に自動更新 |
| 不要な変更検知を無効化 | cdr.detach() | パフォーマンス最適化 |
| 特定のタイミングで変更検知 | cdr.detectChanges() | 必要なときだけ更新 |
| コンポーネント削除時の処理 | ngOnDestroy() & unsubscribe() | メモリリーク防止 |
🔹 こんなときに使おう！
✅ パフォーマンスを最適化したい → detach() を活用！ ✅ 不要な購読を解除したい → ngOnDestroy() で unsubscribe()！ ✅ 変更があるときだけ画面を更新したい → detectChanges() を使用！
Angular の変更検知をうまくコントロールして、快適なアプリを作りましょう！ 🚀
📝 関連記事
コメント