イベントの移行

Aura コンポーネントのコンポーネントイベントを Lightning Web コンポーネントの標準 DOM イベントに移行します。

以下は、Lightning Web コンポーネントのイベント操作の概要です。

行動の作成

Aura コンポーネント専有の Event オブジェクトの代わりに、Event または CustomEvent 標準 DOM オブジェクトを使用します。Lightning Web コンポーネントには、コンポーネントがイベントを起動できることを登録する Aura コンポーネントマークアップの <aura:registerEvent> タグに相当するものがありません。

イベントの起動

Aura コンポーネントの event.fire() の代わりに、Lightning Web コンポーネントの this.dispatchEvent(myEvent) (標準 DOM メソッド) を使用します。

イベントの処理

Aura コンポーネントでは、マークアップで <aura:handler> タグを使用してハンドラーを定義します。もしくは、コンポーネントはマークアップで別のコンポーネントを参照するときにハンドラーアクションを宣言できます。この Aura コンポーネントは、マークアップで c:child を使用し、c:child が起動する sampleComponentEventhandleChildEvent ハンドラーを宣言します。

同様に Lightning Web コンポーネントは、宣言型ハンドラーを宣言できます。宣言型ハンドラーのイベント名の前には on が付いています。

<!-- prettier-ignore -->

イベントハンドラー関数 handleChildEvent は、コンポーネントの JavaScript ファイルで定義されます。

Lightning Web コンポーネントでは、その JavaScript ファイルで標準の addEventListener() メソッドを使用して、ハンドラーをプログラムで設定することもできます。

イベントペイロードの取得

特に指定のない限り、event.detail プロパティを使用して、イベントペイロードを取得します。

Lightning Message Service (lightning/messageService) を使用すると、1 つのページ内または複数のページでコンポーネント間の通信を行うことができます。1 つのページ内でコンポーネント間の通信を行うには、pub-sub パターンを使用することもできます。

次の表は、コンポーネントへの移動、レコード作成パネルの表示、Lightning Web コンポーネントでの使用などの標準 Aura イベントとの対応付けを示します。リストされていないイベントは、現在 Lightning Web Components に相当するものがないイベントです。

Aura コンポーネントLightning Web コンポーネント説明
aura:locationChangehashchange ブラウザーイベントは、ウィンドウのハッシュが変更されると起動します。このイベントを処理するには、onhashchange イベントハンドラーを使用します。ブラウザーのロケーションバーの URL のハッシュ部分が変更されると起動します。
aura:valueChangeカスタム setter および setter メソッドが含まれるプロパティを使用します。プロパティ値が変更されると起動します。
aura:valueDestroydisconnectedCallback() ライフサイクルフックを使用します。「コンポーネントライフサイクル」を参照してください。コンポーネントが破棄されると起動します。
aura:valueInitinit イベントハンドラーを置き換えるには、connectedCallback() ライフサイクルフックを使用します。「イニシャライザーの移行」を参照してください。コンポーネントが初期化されると起動します。
aura:valueRenderrenderedCallback() または render() ライフサイクルフックを使用します。「コンポーネントライフサイクル」を参照してください。コンポーネントが表示されると起動します。
force:createRecordナビゲーションサービスを使用します。レコード作成パネルを表示します。
force:editRecordナビゲーションサービスを使用します。レコード編集パネルを表示します。
force:navigateHome (廃止)ナビゲーションサービスを使用します。レコードホームページに移動します。
force:navigateToComponent (廃止)ナビゲーションサービスを使用します。コンポーネントに移動します。
force:navigateToListナビゲーションサービスを使用します。リストビューに移動します。
force:navigateToObjectHomeナビゲーションサービスを使用します。オブジェクトホームページに移動します。
force:navigateToRelatedListナビゲーションサービスを使用します。関連リストに移動します。
force:navigateToSObjectナビゲーションサービスを使用します。レコードに移動します。
force:navigateToURLナビゲーションサービスを使用します。URL に移動します。
force:refreshViewRefreshView API を使用します。ページの再読み込みをしないでビューを再読み込みします。
force:showToastlightning/platformShowToastEvent モジュールをインポートします。「トースト通知」を参照してください。トーストメッセージを表示して、成功、エラー、または警告をアラートでユーザーに伝えます。
lightning:openFilesナビゲーションサービスを使用します。「ファイルを開く」を参照してください。1 つ以上のファイルレコードを開きます。
lightning:tabClosedlightning__tabClosed Lightning メッセージチャネルを使用します。コンソールワークスペースまたはサブタブが正常に閉じられたときに起動します。
lightning:tabCreatedlightning__tabCreated Lightning メッセージチャネルを使用します。コンソールワークスペースまたはサブタブが正常に作成されたときに起動します。
lightning:tabFocusedlightning__tabFocused Lightning メッセージチャネルを使用します。コンソールワークスペースまたはサブタブにフォーカスが置かれたときに起動します。
lightning:tabRefreshedlightning__tabRefreshed Lightning メッセージチャネルを使用します。コンソールワークスペースまたはサブタブが正常に更新されたときに起動します。
lightning:tabReplacedlightning__tabReplaced Lightning メッセージチャネルを使用します。コンソールの主タブまたはサブタブが正常に置換されたときに起動します。
lightning:tabUpdatedlightning__tabUpdated Lightning メッセージチャネルを使用します。コンソールワークスペースまたはサブタブが更新され、表示ラベル、アイコン、またはその他のコンテンツの変更が含まれているときに起動します。
ltng:afterScriptsLoaded静的リソースと lightning/platformResourceLoader モジュールのメソッドをインポートします。「サードパーティ JavaScript ライブラリの使用」を参照してください。ltng:require.scripts にリストされたすべてのスクリプトが ltng:require で読み込まれると起動します。

関連トピック