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

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

基本コンポーネントマークアップの移行

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

1<aura:component>
2    <lightning:formattedText linkify="true" value="I like salesforce" />
3</aura:component>

このマークアップを 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 コンポーネントです。

1<template>
2  <lightning-formatted-text linkify value="I like salesforce"></lightning-formatted-text>
3</template>

基本コンポーネントのイベントハンドラの移行

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

1<aura:component>
2    <lightning:button
3      label="Submit"
4      title="Submit record data"
5      onclick="{! c.handleClick }" />
6</aura:component>

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

1({
2  handleClick: function (cmp, event, helper) {
3    alert("You clicked: " + event.getSource().get("v.label"));
4  },
5});

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

1<template>
2  <lightning-button label="Submit" title="Submit record data" onclick={handleClick}>
3  </lightning-button>
4</template>

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

1import { LightningElement } from "lwc";
2export default class MigrateButton extends LightningElement {
3  clickedButtonLabel;
4
5  handleClick(event) {
6    this.clickedButtonLabel = event.target.label;
7  }
8}

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

1<div onkeydown="{!c.handleKeyDown}">
2  <lightning:input type="search" value="{!v.value}" onchange="{!c.handleChange}" />
3</div>

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

1<lightning-input
2  value={val}
3  label="Enter some text"
4  onchange={handleChange}
5  onkeydown={handleKeyDown}
6>
7</lightning-input>

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

移行に関する考慮事項

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

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

関連トピック

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。