ライフサイクルフック

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

コンポーネントの作成時にコールされます。このフックは、親から子の順序で起動します。つまり、最初に親で起動します。子要素は、まだ存在していないため、アクセスできません。プロパティもまだ渡されていません。プロパティは、作成後から 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{} ブロックのように機能します。エラー境界コンポーネントは、それ自体からのエラーではなく、その子からのエラーのみをキャッチすることに注意することが重要です。

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

関連トピック

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