【徹底解説】Angular ngOnInitにおける非同期処理 - async/await vs subscribe vs その他

2024-05-21

Angular ngOnInit における async/await の使い方

Angular の ngOnInit ライフサイクルフックは、コンポーネントが初期化されたときに実行されるメソッドです。このメソッド内で、コンポーネントに必要なデータを取得したり、初期設定を行ったりします。

従来、非同期データの取得には subscribe メソッドを使用していましたが、近年、TypeScript に導入された async/await キーワードを用いる方法が主流になりつつあります。

async/await の利点

コードの可読性とメンテナンス性が向上します。
非同期処理を同期処理のように記述できます。
エラー処理が容易になります。

ngOnInit メソッドを async キーワードで修飾します。
非同期処理を await キーワードでラップします。

async ngOnInit(): Promise<void> {
  const data = await this.dataService.getData();
  this.data = data;
}

上記例では、dataService サービスの getData メソッドから非同期的にデータを取得し、コンポーネントの data プロパティに格納しています。

注意点

async/await は、Promise または Observable を返す関数でのみ使用できます。
ngOnInit メソッド内で async/await を使用する場合、メソッドの戻り値の型を Promise<void> にする必要があります。

HTTP リクエストによるデータ取得
画像の読み込み
タイマーを使用した処理

async/await は、Angular の ngOnInit ライフサイクルフックにおける非同期処理を簡潔かつ効率的に記述するための強力なツールです。コードの可読性とメンテナンス性を向上させたい開発者にとっては、ぜひ習得しておきたい技術です。

データサービス

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  async getData() {
    const url = 'https://jsonplaceholder.typicode.com/todos/1';
    const response = await this.http.get(url);
    return response.data;
  }
}

コンポーネント

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent implements OnInit {

  data: any;

  constructor(private dataService: DataService) { }

  async ngOnInit(): Promise<void> {
    this.data = await this.dataService.getData();
  }
}

説明

DataService クラスは、非同期的にデータを取得する getData メソッドを定義します。
MyComponent クラスは、ngOnInit メソッド内で async/await を使って DataService の getData メソッドを呼び出し、取得したデータをコンポーネントの data プロパティに格納します。

補足

このサンプルコードでは、HttpClient サービスを使用して API からデータを取得しています。

このサンプルコードを参考に、async/await を活用して、より読みやすくメンテナンスしやすい Angular アプリケーションを開発してください。

ngOnInit における非同期処理のその他の方法

subscribe メソッド

ngOnInit(): void {
  this.dataService.getData().subscribe(data => {
    this.data = data;
  });
}

rxjs の pipe オペレータ

ngOnInit(): void {
  this.dataService.getData()
    .pipe(
      first(),
      catchError(error => {
        console.error(error);
        return EMPTY;
      })
    )
    .subscribe(data => {
      this.data = data;
    });
}

上記例では、rxjs ライブラリの pipe オペレータを使って、getData メソッドから取得したデータに対する処理をパイプライン形式で記述しています。

ngDoCheck ライフサイクルフック

ngDoCheck(): void {
  if (!this.data) {
    this.data = this.dataService.getData();
  }
}

上記例では、ngDoCheck ライフサイクルフックを使用して、コンポーネントの入力が変更されたときに dataService サービスの getData メソッドを呼び出し、データを更新しています。

それぞれの方法のメリット・デメリット

方法	メリット	デメリット
`async/await`	コードが簡潔で読みやすい	エラー処理がやや複雑
`subscribe` メソッド	エラー処理が容易	コードが冗長になりやすい
`rxjs` の `pipe` オペレータ	コードが柔軟に記述できる	複雑な処理になるとコードが分かりにくくなる
`ngDoCheck` ライフサイクルフック	データ更新処理を集中して記述できる	パフォーマンスに影響を与える可能性がある