もう迷わない！Angularライフサイクルフックの使い分け：ngOnInit、ngAfterViewInit、ngOnChanges、ngOnDestroyの役割と実践例

2024-05-14

AngularにおけるngOnInitとngAfterViewInitの違い

Angularコンポーネントのライフサイクルにおいて、ngOnInitとngAfterViewInitはどちらも重要な役割を果たします。しかし、それぞれ異なるタイミングで実行され、異なる目的に使用されます。この違いを理解することは、コンポーネントを正しく初期化し、データバインディングやその他の操作を実行するために重要です。

ngOnInit

コンポーネントが初期化された後、初めて呼び出されます。
コンポーネントの入力プロパティ、サービス、その他の依存関係がすべて利用可能になります。
以下の処理に適しています。
- データの初期化
- サービスへの呼び出し
- データバインディングの設定
- サブスクリプションの実行

例：ngOnInitでコンポーネントのタイトルを設定する

ngOnInit() {
  this.title = 'コンポーネントタイトル';
}

ngAfterViewInit

コンポーネントのテンプレートビューが完全にレンダリングされた後に呼び出されます。
DOM操作や子コンポーネントへのアクセスが可能になります。
以下の処理に適しています。
- DOM操作 (要素のサイズ取得、スタイル設定など)
- 子コンポーネントへの参照
- アニメーションの実行

例：ngAfterViewInitで要素の幅を取得する

ngAfterViewInit() {
  const element = this.elementRef.nativeElement;
  const width = element.offsetWidth;
  console.log(`要素の幅: ${width}px`);
}

ngOnInit: コンポーネントの初期化とデータの準備
ngAfterViewInit: DOM操作と子コンポーネントへのアクセス

補足

コンポーネントのコンストラクタは、コンポーネントが生成された直後に呼び出されますが、ngOnInitよりも前に実行されます。コンストラクタでは、依存関係の注入など、初期化処理以外の操作を行うのが一般的です。
ngOnChangesは、コンポーネントの入力プロパティが変更されたときに呼び出されます。入力プロパティに基づいてコンポーネントの状態を更新するのに役立ちます。

これらのライフサイクルフックを適切に理解し、使い分けることで、Angularコンポーネントを効率的に開発することができます。

サンプルコード：ngOnInitとngAfterViewInitの使用例

import { Component, OnInit, AfterViewInit, ElementRef } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <h2>コンポーネントタイトル</h2>
    <p #messageElement>メッセージ</p>
  `,
})
export class MyComponent implements OnInit, AfterViewInit {

  title = '初期タイトル';
  message = '初期メッセージ';

  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
    // コンポーネントの初期化処理
    console.log('ngOnInitが実行されました');
    this.title = '変更されたタイトル'; // コンポーネントのタイトルを設定
  }

  ngAfterViewInit() {
    // DOM操作
    console.log('ngAfterViewInitが実行されました');
    const messageElement = this.elementRef.nativeElement.querySelector('#messageElement');
    messageElement.textContent = '更新されたメッセージ'; // DOM要素のテキストを変更
  }
}

説明

@Componentデコレータを使用して、コンポーネントを定義します。
ngOnInitとngAfterViewInitを実装します。
ngAfterViewInitでは、DOM要素のテキストを更新します。

この例では、ngOnInitとngAfterViewInitの役割を明確に分けています。しかし、実際の開発では、状況に応じてこれらのライフサイクルフックを組み合わせて使用するケースもあります。

AngularにおけるngOnInitとngAfterViewInitの代替方法

コンストラクタは、コンポーネントが生成された直後に呼び出されるため、初期化処理を行うのに適しています。しかし、ngOnInitと異なり、コンポーネントの入力プロパティやサービスはまだ利用できません。

利点:

早い段階で初期化処理を実行できる
シンプルでわかりやすい

入力プロパティやサービスに依存した初期化処理はできない

constructor() {
  this.title = 'コンポーネントタイトル';
}

非同期処理を使用して、コンポーネントの初期化やDOM操作を遅らせることができます。これは、ネットワークリクエストや複雑な計算など、時間のかかる処理を実行する場合に役立ちます。

時間のかかる処理を非同期的に実行できる
パフォーマンスを向上させることができる

コードが複雑になる
処理の完了を待機する必要がある

例：setTimeoutを使用して非同期的にDOM操作を行う

ngOnInit() {
  setTimeout(() => {
    const element = this.elementRef.nativeElement;
    element.style.color = 'red';
  }, 1000);
}

カスタムライフサイクルフック

ngOnInitやngAfterViewInitのような独自のライフサイクルフックを作成することもできます。これは、特定のニーズに合わせた、よりきめ細かな制御が必要な場合に役立ちます。

アプリケーションに固有のライフサイクルイベントを処理できる
既存のライフサイクルフックでは実現できない柔軟性を提供する

コードが増える
理解しにくくなる

例：コンポーネントが破棄される前にログを出力するカスタムライフサイクルフックを作成する

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

@Component({
  selector: 'app-my-component',
  template: `
    <p>コンポーネント内容</p>
  `,
})
export class MyComponent implements OnDestroy {

  ngOnDestroy() {
    console.log('コンポーネントが破棄されました');
  }
}