基本コンポーネントの移行

Lightning 基本コンポーネントは Salesforce が lightning 名前空間で提供するビルディングブロックです。Lightning 基本コンポーネントを 2 つのプログラミングモデルで使用する場合、それぞれの構文は異なります。

この Aura コンポーネントでは、lightning:formattedText 基本コンポーネントが使用されています。

このマークアップを Lightning Web コンポーネントに移行する方法は、次のとおりです。

<aura:component></aura:component> を <template></template> に置き換えます。
名前空間とコンポーネント名を区切るコロンをダッシュに変更します。
Aura の基本 Lightning コンポーネントを Lightning Web コンポーネントとして使用できることを確認します。「コンポーネントライブラリ」を参照してください。
キャメルケースのコンポーネント名 (formattedText) をダッシュで区切った名前 (formatted-text) に変更します。
Boolean 属性の true または false の値を削除します。存在する場合、Boolean 属性の値が true であることを示します。
自己終了タグを完全終了タグ (</lightning-formatted-text>) に変更します。

以下は、同等の Lightning Web コンポーネントです。

Aura 基本コンポーネントのほとんどのイベントハンドラには同等の Lightning Web コンポーネントがあります。この Aura コンポーネントでは、lightning:button 基本コンポーネントを onclick イベントハンドラで使用します。

click イベントを起動したボタンの表示ラベルを取得するには、event.getSource() を使用します。

以下は、同等の Lightning Web コンポーネントです。

イベントをディスパッチしたコンポーネントへの参照を取得するには、基本コンポーネントの公開プロパティを公開する event.target プロパティを使用します。たとえば、クリックされた lightning-button コンポーネントの表示ラベルを返すには、event.target.label を使用します。

コンポーネントの HTML イベントをリスンできるように基本 Aura コンポーネントを HTML 要素でラップする場合、イベントハンドラを基本 Lightning Web コンポーネントに移動します。たとえば、lightning:input ではいくつかのイベントハンドラがサポートされますが、onkeydown はサポートされません。ただし、Aura を使用すると、keydown イベントを処理する div ラッパーを作成できます。

以下は、同等の Lightning Web コンポーネントです。

Aura 基本コンポーネントのすべてのイベントハンドラに同等の Lightning Web コンポーネントがあるとは限りません。各基本コンポーネントの仕様は、コンポーネントライブラリを参照してください。

一部の基本 Lightning Web コンポーネントでは、相当する Aura コンポーネントよりも豊富な機能セットが提供されています。一部の基本コンポーネントでは、移行のためにより多くの変更が必要になる場合もあります。各コンポーネントの違いについては、「基本コンポーネント: Aura コンポーネントと Lightning Web コンポーネント」を参照してください。

コンポーネントライブラリには、基本コンポーネントのサンプル、ドキュメント、デモ、仕様が含まれます。Lightning Web コンポーネントと、相当する Aura コンポーネントを比較するには、コンポーネントの参照ページで、[Aura コンポーネントとして表示] または [Lightning Web コンポーネントとして表示] をクリックします。

関連トピック