Angularのライフサイクルは、コンポーネントやディレクティブが「生成」「変化」「破棄」という流れで動作する仕組みを指します。ngOnInitはこのライフサイクルの中で、初期化のために特化したフックです。
ngOnInitを理解するために、このページではAngularのライフサイクル/ライフサイクルフックの概念について解説します。
Angularのライフサイクルとは？
Angularのコンポーネントは以下のような「一生」を持っています：
- 生成 (Creation)
コンポーネントが作られる瞬間。 - 変化 (Change Detection)
データが更新され、それに応じてビューが再描画される過程。 - 破棄 (Destruction)
役割を終えて、メモリから削除されるタイミング。
この一連の流れが「ライフサイクル」です。
よりシステム的に言えば、対象のコードがロードされ、そのコードが外部からのリクエストで様々な動作をし、最終的に処理が終了する～、という一連の流れをライフサイクルと呼びます。
日常生活の例で考えてみると以下のようなイメージです。
- 生成: 新しい家を建てる。
- 変化: 家具を配置し直したり、壁を塗り替える。
- 破棄: 家を解体する。
ライフサイクルフックとは？
ライフサイクルフックは、ライフサイクルの特定のタイミングで実行される「きっかけ」や「スイッチ」のようなものです。開発者がこれを利用して、適切なタイミングでカスタムロジックを追加することができます。
これをシステム的に捉えると、ライフサイクルフックは「状態遷移」に基づくイベント駆動型プログラミングの一部と説明できます。アプリケーションやコンポーネントは、それぞれの状態（生成、更新、破棄など）において異なる責務を持ち、ライフサイクルフックはその責務を実行するトリガーとして機能します。
Angularの主要フック
| タイミング | フック名 | 主な用途 |
|---|---|---|
| 生成時 | constructor | コンポーネントのインスタンス化。依存性の注入。 |
| 初期化時 | ngOnInit | 初期設定や外部データの取得を実行。 |
| 変更検知時 | ngOnChanges、ngDoCheck | 入力データの変更を検知。 |
| 描画後 | ngAfterViewInit | DOM要素や子コンポーネントが完全に初期化された後の処理。 |
| 破棄時 | ngOnDestroy | メモリ解放やサブスクリプション解除。 |
ngOnInitの役割と特徴
ngOnInitは、Angularがすべての入力プロパティ（@Input）を設定した後、1度だけ呼び出されます。生成フェーズの一部として、コンポーネントの初期化処理を担当します。
特徴
- 呼び出し回数: 一度だけ呼び出される。
- 依存性注入後に実行: コンストラクタで設定された依存性を利用可能。
- データが利用可能: 入力プロパティ（
@Input）が初期化された状態。
用途
- 初期データの設定
- APIからのデータ取得。
- 初期状態を設定する。
- 入力データの利用
@Inputで渡された値を基にロジックを実行。
- コンストラクタとの分離
- 初期化ロジックをコンストラクタから分離し、コードを整理する。
ngOnInitを通じてライフサイクルを理解する
ここからは具体的にどんな感じで動作するのか？をイメージできるように実際のコードを用いてご説明します。
以下のコードでngOnInitがライフサイクル全体の中でどのように機能するかを見てみましょう。
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-demo',
template: `<p>{{message}}</p>`
})
export class DemoComponent implements OnInit {
@Input() userName: string = ''; // 入力プロパティ
message: string = '';
constructor() {
console.log('Constructor: コンポーネントが生成されました');
}
ngOnInit() {
console.log('ngOnInit: 初期化処理を実行します');
this.message = `こんにちは、${this.userName}さん！`;
}
}
このコードは、Angularのコンポーネントを使って、ユーザー名を受け取り、その名前を使ってメッセージを表示する仕組みを実現しています。以下に、実行結果と動作の原理をわかりやすく説明します。
実行結果
このコンポーネントを以下のように使用すると、画面に「こんにちは、〇〇さん！」と表示されます。
<app-demo [userName]="'太郎'"></app-demo>
画面の表示：
こんにちは、太郎さん！
動作の原理
- コンポーネントの基本構成
@Componentデコレーターでコンポーネントの情報を設定します。selector: 'app-demo'により、このコンポーネントは<app-demo>というタグで使用可能になります。template: <p>{{message}}</p>で、HTMLテンプレートに表示する内容を指定しています。
- 入力プロパティ (
@Input)@Input()デコレーターを使うと、親コンポーネントから値を受け取ることができます。- この例では、
userNameプロパティが入力プロパティで、親コンポーネントから値が渡されます。
- コンストラクター
constructor()は、コンポーネントが生成されたタイミングで一度だけ呼び出されます。- ここでは特別な処理はしていませんが、ログ出力で確認できます。
- ngOnInit メソッド
ngOnInit()は、コンポーネントが初期化された後に呼び出されます。- このメソッドで、
userNameを使ってmessageの内容を設定しています。
- 動作の流れ
- 親コンポーネントから
<app-demo [userName]="'太郎'"></app-demo>としてuserNameに値が渡されます。 ngOnInit()が実行され、messageプロパティに「こんにちは、太郎さん！」という文字列がセットされます。- テンプレートの
<p>{{message}}</p>がその値を表示します。
- 親コンポーネントから