【Angular】Componentのライフサイクルについて
はじめに
皆さんこんにちは、株式会社エムアイ・ラボの新人エンジニアです！
今回は、弊社のメインフレームワークであるAngularのコンポーネントのライフサイクルメソッドについて調べましたので、皆さんに共有したいと思います。
コンポーネントのライフサイクルとは？
Angularのライフサイクルは、コンポーネントが作成され、動作し、最終的に破棄されるまでの一連の流れのことをライフサイクルといいます。
ライフサイクルフックを通じて管理され、コンポーネントの動作を制御できます。
様々なライフサイクルメソッドがありますが、今回は、主にngOnInitとngOnDestroyについて説明します。
1. constructor
コンポーネントやディレクティブがインスタンス化される際に最初に呼び出されます。
Angularの依存性注入システムを通じて、必要なサービスやクラスのインスタンスをコンポーネントに注入できます。constructorはAngularのライフサイクルの一部ではありませんが、Angularでフォームを初期化する際、コンポーネントのコンストラクタと ngOnInit メソッドの両方が関係してきます。
コンストラクタはクラスのインスタンスが作成された時に呼ばれ、ngOnInit はAngularのライフサイクルフックの一部で、コンポーネントの初期化段階で呼ばれます。
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
// ...
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
//Angularの依存性注入システムを使って FormBuilder サービスをコンポーネントに注入する
}
2. ngOnInit
コンポーネントが初期化される際に呼び出され、主に、コンポーネントのデータバインディングを設定したり、外部からデータを取得したりするために使用されます。
FormGroup と FormControl をインポートすると、ngOnInit メソッド内でフォームを初期化できます。
以下の例のように、ngOnInit内でリアクティブフォームを作成できます。
ngOnInit はコンポーネントの初期化時に一度だけ呼ばれるため、フォームの設定や初期値の設定をする場所に適しています。
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
// ...
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
// FormBuilderを使用してFormGroupインスタンスを作成、フォームの構造を定義
this.myForm = this.formBuilder.group({
firstName: [''], // firstNameフィールドの初期値を設定
lastName: [''] // lastNameフィールドの初期値を設定
});
}
}
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<input formControlName="firstName" type="text" placeholder="First Name">
<input formControlName="lastName" type="text" placeholder="Last Name">
<button type="submit">Submit</button>
</form>
3. ngOnDestroy
コンポーネントが破棄される直前に呼び出されるライフサイクルフックです。
ここで、Observableの購読の解除（unsubscribe）、リソースの解放や後処理などを行います。
これによって、不要になったメモリが開放されメモリリークによるアプリケーションのパフォーマンス低下や、システムが不安定になることを防ぐことができます。
import { Subscription } from 'rxjs';
export class MyComponent implements OnDestroy {
private mySubscription: Subscription;
constructor(private myService: MyService) {
// サービスからのデータ購読
this.mySubscription = this.myService.getData().subscribe(data => {
// データ処理
});
}
ngOnDestroy() {
// 購読を解除
this.mySubscription.unsubscribe();
}
}
ライフサイクルメソッドの流れ
ざっくりした図ですがコンポーネントのライフサイクルは以下のような流れになります。
まとめ
さらに他のライフサイクルメソッドについて知りたい方は、最近リリースされたAngularDevのサイト（beta）は以前よりも簡単にサイト上でAngularを体験できるのでおすすめです！
ライフサイクルは検証ツールなど使ってデバックすると実際の処理の流れが追えるので、より理解が深まるかと思います。
今後も日々の業務を通じて学んだことや気づきがあれば、記事として投稿していきたいと思います！
採用情報
エムアイ・ラボでは一緒に開発に携わってくれるエンジニアを積極的に採用中です！
未経験エンジニアの方も募集しております！
未経験の方でも、様々なことにチャレンジできる環境だと思います！
（経験者の方、他職種も募集中です）
ぜひお気軽にご連絡ください。
Discussion