イベントの移行
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が起動するsampleComponentEventのhandleChildEventハンドラを宣言します。同様に Lightning Web コンポーネントは、宣言型ハンドラーを宣言できます。宣言型ハンドラーのイベント名の前には
<!-- prettier-ignore -->onが付いています。イベントハンドラー関数
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:locationChange | hashchange ブラウザイベントは、ウィンドウのハッシュが変更されると起動します。このイベントを処理するには、onhashchange イベントハンドラを使用します。 | ブラウザのロケーションバーの URL のハッシュ部分が変更されると起動します。 |
aura:valueChange | カスタム setter および setter メソッドが含まれるプロパティを使用します。 | プロパティ値が変更されると起動します。 |
aura:valueDestroy | disconnectedCallback() ライフサイクルフックを使用します。「コンポーネントライフサイクル」を参照してください。 | コンポーネントが破棄されると起動します。 |
aura:valueInit | init イベントハンドラを置き換えるには、connectedCallback() ライフサイクルフックを使用します。「イニシャライザの移行」を参照してください。 | コンポーネントが初期化されると起動します。 |
aura:valueRender | renderedCallback() または render() ライフサイクルフックを使用します。「コンポーネントライフサイクル」を参照してください。 | コンポーネントが表示されると起動します。 |
force:createRecord | ナビゲーションサービスを使用します。 | レコード作成パネルを表示します。 |
force:editRecord | ナビゲーションサービスを使用します。 | レコード編集パネルを表示します。 |
force:navigateHome (廃止) | ナビゲーションサービスを使用します。 | レコードホームページに移動します。 |
force:navigateToComponent (廃止) | ナビゲーションサービスを使用します。 | コンポーネントに移動します。 |
force:navigateToList | ナビゲーションサービスを使用します。 | リストビューに移動します。 |
force:navigateToObjectHome | ナビゲーションサービスを使用します。 | オブジェクトホームページに移動します。 |
force:navigateToRelatedList | ナビゲーションサービスを使用します。 | 関連リストに移動します。 |
force:navigateToSObject | ナビゲーションサービスを使用します。 | レコードに移動します。 |
force:navigateToURL | ナビゲーションサービスを使用します。 | URL に移動します。 |
force:refreshView | ワイヤサービスを介してプロビジョニングされた Apex データを更新するには、refreshApex() をコールします。コードで Apex メソッドを命令としてコールする場合、メソッドを再び呼び出してデータを更新してから、notifyRecordUpdateAvailable(recordIds) を呼び出し、Lightning Data Service (LDS) キャッシュを更新します。関連データが LDS キャッシュ内で更新されることが予想される場合は、notifyRecordUpdateAvailable() のみをコールする必要があります。notifyRecordUpdateAvailable() は一部のレコードが古くなっていることを LDS に通知し、LDS キャッシュにあるそれらのレコードを更新します。 | ページの再読み込みをしないでビューを再読み込みします。 |
force:showToast | lightning/platformShowToastEvent モジュールをインポートします。「トースト通知」を参照してください。 | トーストメッセージを表示して、成功、エラー、または警告をアラートでユーザに伝えます。 |
lightning:openFiles | ナビゲーションサービスを使用します。「ファイルを開く」を参照してください。 | 1 つ以上のファイルレコードを開きます。 |
lightning:tabClosed | 将来のリリースが予定されています。 | コンソールワークスペースまたはサブタブが正常に閉じられたときに起動します。 |
lightning:tabCreated | 将来のリリースが予定されています。 | コンソールワークスペースまたはサブタブが正常に作成されたときに起動します。 |
lightning:tabFocused | 将来のリリースが予定されています。 | コンソールワークスペースまたはサブタブにフォーカスが置かれたときに起動します。 |
lightning:tabRefreshed | 将来のリリースが予定されています。 | コンソールワークスペースまたはサブタブが正常に更新されたときに起動します。 |
lightning:tabReplaced | 将来のリリースが予定されています。 | コンソールの主タブまたはサブタブが正常に置換されたときに起動します。 |
lightning:tabUpdated | 将来のリリースが予定されています。 | コンソールワークスペースまたはサブタブが更新され、表示ラベル、アイコン、またはその他のコンテンツの変更が含まれているときに起動します。 |
ltng:afterScriptsLoaded | 静的リソースと lightning/platformResourceLoader モジュールのメソッドをインポートします。「サードパーティ JavaScript ライブラリの使用」を参照してください。 | ltng:require.scripts にリストされたすべてのスクリプトが ltng:require で読み込まれると起動します。 |
将来のリリースが予定されている機能サポートには、Salesforce の将来予測に関する記述が適用されます。ロードマップ項目は予告なく変更される可能性があるため、その時点で使用可能な技術に基づいて購入の意思決定を下してください。
関連トピック