ライフイベント、ライフサイクルとは
ライフイベント、ライフサイクルとは、ページを読み込み、表示し、その後ユーザーが離脱する一連の流れの中で特定のタイミングで発火するDOMイベントのことです。Ionicでは、Ionic独自のライフイベントに加えて、Angularのライフイベントも利用することができます。
これにより、ページが読み込まれたらこれをする、ページに変化があったらこれをするといったことを実装できます。
Angularのライフイベントについて
それまでまずはAngularのライフイベントからです。Ionicでは、Ionic独自のライフイベントに加えて、Angularのライフイベントも利用することができます。個人的にはAngularのイベントを使う頻度の方が高いです。
こちらの公式ドキュメントに細かく記載されておりますので、ここではよく使うライフイベントについて転載します。
https://angular.jp/guide/lifecycle-hooks
| イベントフック（これを関数のように書いて呼び出します） |
概要 |
| ngOnInit() |
ページやコンポートネントが最初に完全に読み込んだら実行されるものと理解しています。イメージではJavaScriptのonDOMcontentLOaded()です。その後、 ディレクティブ/コンポーネントを初期化します。ページ読み込みの際に1度だけ呼び出されます。
最初 の nOnChanges() の後に 一度 呼び出されます |
| ngOnChanges() |
Angular がデータバインドされた入力プロパティを(再)設定するときに応答します。 このメソッドは、現在および以前のプロパティ値の SimpleChanges オブジェクトを受け取ります。
ngOnInit() の前に呼び出され、データバインドされた入力プロパティが変更されるたびに呼び出されます。 |
| ngOnDestroy() |
Angularがディレクティブ/コンポーネントを破棄する直前に、クリーンアップします。 メモリリークを回避するためにObservableの購読を解除し、イベントハンドラをデタッチしましょう。
Angularがディレクティブ/コンポーネントを破棄する 直前 に呼び出されます。 |
|
|
Angular場合、ライフサイクルはコンポーネントの生成や破棄がトリガーになります。そのため、最初の1回しかイベントを実行したくないときなどに利用します。
なお、constructorとngInitを同じように考えがちですが、前者はライフイベントではありませんので、コンポーネントが表示されるまで待ってくれません。そのため、constructorを実行したのになにも反映されないということがあります。constructorではページ操作を行うような動作は入れない方が良いです。
Ionicのライフイベント
次にIonicのライフイベントです。
| イベントフック（これを関数のように書いて呼び出します） |
概要 |
| ionViewWillEnter() |
ページが表示されるアニメーションが始まるとき |
| ionViewDidEnter() |
ページが表示されるアニメーションが終了したとき |
| ionViewWilLeave() |
ページから離脱・遷移するアニメーションが始まるとき |
| ionViewDidLeave() |
離脱するアニメーションが終了したとき |
Willのタイミングでデータの描画を行うのはよくないです。Will を使用する場合はデータの取得などの準備、Didを使用するのはデータを表示するなどのタイミングがよさそうです。
Angularの場合、先に述べたようにコンポーネントがトリガーとなっているのに対して、lonicのライフライクルトリガーはユーザーにとっての表示です。なのでページ遷移して戻ってきたときにも発生するなどでUIの改善などの観点では非常に使いやすくなっています。
ライフイベントの実装方法
Ionicの場合、ライフサイクルイベントを関数のように追記するだけですが、Angularのライフサイクルイベントは先に型を定義する必要があります。
その他
IonicをAngularで使って、写真から文字情報を抽出して爆速でレポートや記事を作成するアプリを作成しています。無料なのでよかったらどうぞ。
iOS =>
https://apps.apple.com/app/id1497498494
Android =>
https://play.google.com/store/apps/details?id=com.rainbowsv2.ocr
