Angular コンポーネントの初期化：Constructor と ngOnInit の違い
Angular における Constructor と ngOnInit の違い
コンストラクタ
コンポーネントが生成されるときに最初に呼び出されるメソッドです。以下の用途に使用されます。
- コンポーネントの初期化
- 依存関係の注入
- プロパティの初期設定
ngOnInit
- データの取得
- その他の初期化処理
主な違い
| 項目 | コンストラクタ | ngOnInit |
|---|---|---|
| タイミング | コンポーネント生成時 | コンポーネント初期化後 |
| 主な用途 | 初期化、依存関係の注入 | データ取得、子コンポーネントの初期化 |
| DOM 操作 | 可能 | 可能 |
| データバインド | 不可能 | 可能 |
使い分けの例
- コンポーネントの初期設定には
constructorを使用します。 - データベースからデータを取得するには
ngOnInitを使用します。
注意事項
constructorで DOM 操作を行うと、エラーが発生する可能性があります。ngOnInitはコンポーネントが初期化された後すぐに呼び出されるため、非同期処理を行う場合は注意が必要です。
まとめ
constructor と ngOnInit は、Angular コンポーネントのライフサイクルにおいて重要な役割を果たします。それぞれの役割と違いを理解し、適切に使い分けることで、コンポーネントを正しく動作させることができます。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor() {
console.log('constructor');
}
ngOnInit() {
console.log('ngOnInit');
}
}
- constructor
constructor で出力されたログは、コンポーネントが生成されたことを示しています。ngOnInit で出力されたログは、コンポーネントが初期化されたことを示しています。
このように、constructor と ngOnInit はそれぞれ異なるタイミングで呼び出されるため、それぞれの役割を理解して使い分けることが重要です。
@Componentデコレータ: コンポーネントに関するメタデータを定義します。selectorプロパティ: コンポーネントのセレクタを指定します。templateUrlプロパティ: テンプレートファイルのパスを指定します。ngOnInitライフサイクルフック: コンポーネントが初期化された後に呼び出されます。
Angular コンポーネントの初期化：その他の方法
デフォルト値
コンポーネントのクラスプロパティにデフォルト値を設定することで、コンポーネントが生成された際に初期値を設定できます。
export class AppComponent {
count = 0;
constructor() {
console.log('constructor');
}
ngOnInit() {
console.log('ngOnInit');
}
}
このコードでは、count プロパティにデフォルト値 0 を設定しています。コンポーネントが生成されると、count プロパティは 0 に初期化されます。
サービス
コンポーネントの初期化処理をサービスに切り出すことで、コードを分割し、再利用性を向上させることができます。
export class MyService {
getData() {
return Promise.resolve('データ');
}
}
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private readonly myService: MyService) {}
ngOnInit() {
this.myService.getData().then(data => {
// データを処理
});
}
}
このコードでは、MyService というサービスを作成し、getData() メソッドでデータを取得しています。AppComponent コンポーネントでは、MyService を注入し、ngOnInit メソッドで getData() メソッドを呼び出してデータを取得しています。
ライフサイクルフック
ngOnInit 以外にも、ngOnChanges、ngDoCheck、ngOnDestroy などのライフサイクルフックを使用して、コンポーネントの初期化処理を行うことができます。
ngOnChanges: プロパティが変更されたときに呼び出されます。ngDoCheck: 毎チェンジ検出サイクルで呼び出されます。ngOnDestroy: コンポーネントが破棄される前に呼び出されます。
これらのライフサイクルフックを使用して、コンポーネントの状態変化に応じて処理を行うことができます。
angular ngoninit angular-lifecycle-hooks
