ライフサイクルフック

ライフサイクルフックは、コンポーネントインスタンスのライフサイクルの特定のフェーズでトリガされるコールバックメソッドです。

コンポーネントの作成時にコールされます。このフックは、親から子の順序で起動します。つまり、最初に親で起動します。子要素は、まだ存在していないため、アクセスできません。プロパティもまだ渡されていません。プロパティは、作成後から connectedCallback() フックまでの間でコンポーネントに割り当てられます。サンプルコードについては、「コンポーネント作成時のコードの実行」を参照してください。

要素がドキュメントに挿入されるときにコールされます。このフックは、親から子の順序で起動します。子要素は、まだ存在していないため、アクセスできません。

connectedCallback() を使用すると、コンポーネントの環境とやりとりできます。たとえば、次のことが可能です。

• 現在のドキュメントやコンテナとの通信を確立し、環境に対する動作を調整する。
• データの取得、キャッシュの設定などの初期化タスクを実行したり、イベントをリスニングしたりする。
• メッセージチャネルを登録および登録解除する。

connectedCallback() フックは、コンポーネントに渡された初期プロパティで呼び出されます。コンポーネントがプロパティから内部状態を取得する場合、connectedCallback() ではなく setter でロジックを作成することをお勧めします。サンプルコードについては、Salesforce エンジニアの Pierre-Marie Dartus によるこの StackExchange 投稿を参照してください。

connectedCallback() フックは、複数回起動できます。たとえば、リストの並べ替え時など、ある要素を削除してから別の位置に挿入する場合は、フックが複数回起動します。コードの実行回数を 1 回にする場合は、2 回実行されないようにコードを作成します。

サンプルコードについては、「DOM のコンポーネントの挿入時または削除時のコードの実行」を参照してください。

コンポーネントを表示するたびにコールされます。このライフサイクルフックは、Lightning Web Components 独自のもので、HTML カスタム要素仕様からのものではありません。このフックは、子から親から順序で起動します。

コンポーネントが再表示されるのは、プロパティの値が変更され、そのプロパティが、コンポーネントテンプレートで直接使用される場合、またはテンプレートで使用されるプロパティの getter で間接的に使用される場合です。「リアクティビティ」を参照してください。

renderedCallback() を使用して 1 回限りの操作を実行する場合は、(initialRender 非公開プロパティを使用するなどして) その追跡を手動で行う必要があります。リアクティブ属性は、変更する場合は保護してください。そうしないと、再表示が無駄にトリガされたり、表示の無限ループが発生したりする場合があります。

renderedCallback() を使用すると、コンポーネントの UI とやりとりできます。たとえば、次のことが可能です。

• 計算ノードのサイズ設定
• テンプレートの宣言構文に含まれないタスクの実行 (コンポーネントの子からの非標準イベントのリスナーの追加など)

renderedCallback() 内のコンポーネント状態を更新すると、無限ループが発生する可能性があります。次に例を示します。

• renderedCallback() 内のワイヤアダプタ設定オブジェクトプロパティを更新しないでください。「ワイヤサービスについて」を参照してください。
• renderedCallback() 内の公開プロパティまたはフィールドを更新しないでください。「リアクティビティ」を参照してください。

詳細は、「コンポーネント表示時のコードの実行」を参照してください。

このメソッドをコールし、UI を更新します。connectedCallback() の前にコールされることも、後にコールされることもあります。

コンポーネントで render() をコールすることはめったにありません。主な使用事例は、テンプレートを条件に応じて表示することです。使用するテンプレート (HTML ファイル) を決定するためのビジネスロジックを定義します。このメソッドは、有効な HTML テンプレートを返す必要があります。

たとえば、2 つの異なる方法で表示できるコンポーネントがあるが、HTML を 1 つのファイル内に混在させたくないとします。コンポーネントバンドル内に複数の HTML ファイルを作成します。これらのファイルをどちらもインポートし、コンポーネントの状態に応じて適切なテンプレートが返されるようにするための条件を render() メソッドに追加します。

サンプルコードについては、「複数のテンプレートの表示」を参照してください。

要素がドキュメントから削除されたときにコールされます。このフックは、親から子の順序で起動します。

disconnectedCallback() を使用して、connectedCallback() で行われた作業 (キャッシュの消去やイベントリスナーの削除など) をクリーンアップします。

このフックを使用して、メッセージチャネルの購買取消を行うこともできます。

下位コンポーネントがエラーをスローしたときにコールされます。error 引数は JavaScript ネイティブエラーオブジェクト、stack 引数は文字列です。このライフサイクルフックは、Lightning Web Components 独自のもので、HTML カスタム要素仕様からのものではありません。

このフックを実装すると、ツリー内のすべての下位コンポーネントのエラーを捕捉するエラー境界コンポーネントを作成できます。エラー境界コンポーネントの errorCallback() ライフサイクルフックを使用して、スタック情報を記録し、代替ビューを表示して、発生した出来事と次に実行すべきアクションをユーザに通知します。このメソッドは、ライフサイクルフックまたは HTML テンプレートで宣言されたイベントハンドラでエラーをスローするコンポーネントで JavaScript catch{} ブロックのように機能します。エラー境界コンポーネントは、それ自体からのエラーではなく、その子からのエラーのみをキャッチすることに注意することが重要です。

サンプルコードについては、「コンポーネントエラーの処理」を参照してください。

関連トピック

• コンポーネントライフサイクル