Ionic/AngularでライフサイクルをimplementsしてTypoを防ごう

この記事はIonic Framework / Capacitor Advent Calendar 2020の記事です。

---

Ionic/Angularの「なぜか動かない」の原因で、よく「ライフサイクルをtypoしてた」というのがありまます。Ionicでは、Push遷移やPop遷移でのイベント発火をサポートするために、以下の独自のライフサイクルを用意しています。

Event Name	Description
ionViewWillEnter	コンポーネントが表示されるアニメーションがはじまる時に発火します。
ionViewDidEnter	コンポーネントが表示されるアニメーションが終了した時に発火します。
ionViewWillLeave	コンポーネントを離脱するアニメーションがはじまる時に発火します。
ionViewDidLeave	コンポーネントを離脱するアニメーションが終了した時に発火します。

これらは、 ngOnInit や ngOnDestroy 同様に、ページコンポーネント内に同名のメソッドを配置すると発火します。しかし、同名でないといけないため IonViewWillEnter() （※1文字目が大文字） としてしまうと、発火しません。一見問題なくみえるために、なかなか原因に気づかなかったりして・・・。

そういうことを防止するために、Ionic/AngularではClassにimplementsするための interface を用意しています。Angularで implements OnInit とするように、利用するライフサイクルを implements しましょう。

import { ViewDidEnter, ViewWillEnter, ViewDidLeave, ViewWillLeave } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements ViewDidEnter, ViewWillEnter, ViewWillLeave, ViewDidLeave {
  ionViewDidEnter() {}
  ionViewWillEnter() {}
  ionViewWillLeave() {}
  ionViewDidLeave() {}

（※上記のようにすべて implements する必要はありません。必要なものだけ追加しましょう）

こうするだけで、Classは上記メソッドが利用されることを認識しますので、追加しわすれたり、Typoしてたりするとコンパイラが教えてくれます。

Typoミスをなくして、よりいい開発ライフを送りましょう！
それでは、また。