LWCライフサイクルフックの説明

  • LWC のライフサイクルフックには、インスタンス化、接続、更新、破棄の 4 つのフェーズがあります。それぞれのフェーズで使用することができるライフサイクルメソッドを紹介します。

  • constructor: コンポーネントのインスタンスが作成される時に呼び出されます。このメソッドでは、コンポーネントの初期設定を行います。

  • connectedCallback: コンポーネントが DOM に挿入されると呼び出されます。このメソッドでは、コンポーネントが他のコンポーネントや外部システムと連携するための設定を行います。

  • disconnectedCallback: コンポーネントが DOM から削除されると呼び出されます。このメソッドでは、コンポーネントが使用しているリソースを解放する処理を行います。

  • renderedCallback: コンポーネントがレンダリングされるたびに呼び出されます。このメソッドでは、コンポーネントの表示を更新する処理を行います。

  • errorCallback: コンポーネントでエラーが発生した場合に呼び出されます。このメソッドでは、エラーを処理する処理を行います。

これらのメソッドを使用することで、コンポーネントのライフサイクルに対応する処理を実装することができます。

また、LWC には、データバインディングの仕組みもあり、コンポーネントのプロパティと HTML 要素の値を双方向にバインドすることができます。
これにより、プロパティの値が変更されると、対応する HTML 要素も自動的に更新されます。

具体的な例は下記を参照してください。

  1. インスタンス化: constructorメソッド
    インスタンスが生成された時に実行されるメソッドです。このメソッドでは、コンポーネントの初期設定を行います。
constructor() {
    super();
    console.log('constructor called.');
    // コンポーネントの初期設定
}
  1. 接続: connectedCallbackメソッド
    コンポーネントが DOM に挿入された時に実行されるメソッドです。このメソッドでは、コンポーネントが他のコンポーネントや外部システムと連携するための設定を行います。
connectedCallback() {
    console.log('connectedCallback called.');
    // コンポーネントが他のコンポーネントや外部システムと連携するための設定
}
  1. 更新: renderedCallbackメソッド
    コンポーネントが更新された時に実行されるメソッドです。このメソッドでは、コンポーネントの表示を更新する処理を行います。
renderedCallback() {
    console.log('renderedCallback called.');
    // コンポーネントの表示を更新する処理
}
  1. 破棄: disconnectedCallbackメソッド
    コンポーネントが DOM から削除された時に実行されるメソッドです。このメソッドでは、コンポーネントが使用しているリソースを解放する処理を行います。
disconnectedCallback() {
    console.log('disconnectedCallback called.');
    // コンポーネントが使用しているリソースを解放する処理
}
  1. エラー: errorCallbackメソッド
    コンポーネントでエラーが発生した場合に呼び出されます。このメソッドでは、エラーを処理する処理を行います。
    errorCallback メソッドの第 1 引数には、発生したエラーオブジェクトが渡され、第 2 引数には、エラーが発生したコールスタックが渡されます。
    このメソッドを使用することで、コンポーネント内で発生したエラーを検知し、適切な処理を行うことができます。例えば、エラー発生時にエラーメッセージを表示したり、エラーを発生させないように対処する処理を行ったりすることができます
errorCallback(error, stack) {
    console.error(error);
    console.error(stack);
    // エラーを処理する処理
}

上記の例は、それぞれのライフサイクルフェーズのタイミングで、コンソールにログを出力するだけの処理になります。実際の開発では、これらのメソッドを使って、コンポーネントの表示や動作をカスタマイズします。

例えば、インスタンス化フェーズでは、プロパティの初期値を設定し、接続フェーズでは、外部の API との通信処理を行ったり、更新フェーズでは、プロパティの値に応じて表示を更新する処理を行ったり、破棄フェーズでは、終了時の処理を行ったりすることができます。