基本コンポーネント: Aura コンポーネントと Lightning Web コンポーネント
多くの基本 Lightning Web コンポーネントには Aura のこれに相当するものと同じ機能や属性がありますが、一部にわずかな違いがあります。
Lightning Web コンポーネントは、グローバル HTML 属性およびイベントを継承するため、Aura のこれに相当するものよりも機能性とパフォーマンスが高くなります。「コンポーネントの参照」には、各コンポーネントのグローバル HTML 属性およびイベントはリストされていません。MDN の「グローバル属性」および「イベント」を参照してください。
コンポーネントのスタイル設定については、基本 Aura コンポーネントと Lightning Web コンポーネントの両方で設計バリエーションと SLDS ユーティリティクラスがサポートされています。基本 Aura コンポーネントでは、独自のクラスでカスタムスタイルを設定することもできます。ただし、Lightning Web コンポーネントでは、Shadow DOM 標準に準拠するため、独自のクラスでカスタムスタイルを設定できません。基本 LWC コンポーネントでは、カスタムスタイル設定の SLDS スタイル設定フックもサポートされています。「Lightning Design System スタイル設定フックを使用したコンポーネントのスタイル設定」を参照してください。
次の表は、Aura 基本コンポーネントと Lightning Web コンポーネントのこれに相当するものの使用方法の違いを示しています。Aura コンポーネントは、namespace:componentName という名前形式に従います。名前空間とコンポーネント名がコロンで区切られています。Lightning Web コンポーネントは、namespace-component-name という名前形式に従います。名前空間とコンポーネント名がダッシュで区切られています。
表 1Lightning Web コンポーネントと Aura コンポーネントの対応付け
| 名前空間 | Aura コンポーネント | Lightning Web コンポーネント | 相違点 |
|---|---|---|---|
lightning | accordion | accordion | lightning:accordion では、シンプルなマークアップで複数の開かれたセクションを初期化できます。複数の開かれたセクションで lightning-accordion を初期化するには、JavaScript を使用してセクション名の配列を渡します。 |
lightning | accordionSection | accordion-section | lightning:accordionSection では、lightning:buttonMenu コンポーネントを渡す actions 属性を介したカスタムメニュー actions がサポートされています。Aura コンポーネントの title 属性では、アコーディオンセクションにマウスポインタを置いたときのツールチップテキストが提供されます。lightning-accordion-section では、lightning-button-menu の actions スロットを介したカスタムメニューアクションがサポートされています。現在、Lightning Web コンポーネントの title 属性は内部使用のために予約されています。 |
lightning | avatar | avatar | - |
lightning | badge | badge | - |
lightning | breadcrumb | breadcrumb | - |
lightning | breadcrumbs | breadcrumbs | - |
lightning | button | button | - |
lightning | buttonGroup | button-group | - |
lightning | buttonIcon | button-icon | lightning-button-icon では iconClass はサポートされていません。 |
lightning | buttonIconStateful | button-icon-stateful | - |
lightning | buttonMenu | button-menu | lightning:buttonMenu では、onclick および onclose イベントハンドラはサポートされていません。 |
lightning | buttonStateful | button-stateful | lightning:buttonStateful では、state 属性を使用して、ボタンが選択されたタイミングを示します。lightning-button-stateful では、selected 属性を使用します。 |
lightning | card | card | lightning:card では、title および footer 属性を文字列またはオブジェクトとして設定できます。これにより、コンポーネントを渡すことができます。actions 属性を使用して、カードのヘッダーに表示する lightning:button または lightning:buttonIcon を指定できます。lightning-card では、title および footer 属性をテキストのみに設定できます。マークアップまたは他のコンポーネントを含めるには、名前付きスロットを使用します。アクションは、action 名前付きスロットでのみ指定できます。 |
lightning | carousel | carousel | - |
lightning | checkboxGroup | checkbox-group | - |
lightning | clickToDial | click-to-dial | - |
lightning | combobox | combobox | - |
lightning | container | - | Lightning Web コンポーネントはまだ使用できません。 |
lightning | datatable | datatable | lightning:datatable では、テーブルセルのカスタムデータ型はサポートされていません。lightning:datatable では、標準データ型の列のスタイルを設定する場合にのみ、カスタム CSS クラスがサポートされます。lightning-datatable では、テーブルセルのカスタムデータ型がサポートされています。lightning-datatable ではカスタムデータ型の列のスタイルを設定する場合にのみ、カスタム CSS クラスがサポートされます。 |
lightning | dualListbox | dual-listbox | - |
lightning | dynamicIcon | dynamic-icon | - |
lightning | fileCard | - | Lightning Web コンポーネントはまだ使用できません。 |
lightning | fileUpload | file-upload | - |
lightning | flexipageRegionInfo | - | Aura では、flexipageRegionInfo を使用して、占有できる幅を含まれるコンポーネントに認識させることができます。Lightning Web コンポーネントでは、この目的のために flexipageRegionWidth 公開プロパティを使用します。「コンポーネントでの幅の認識」を参照してください。 |
lightning | flow | flow | 「カスタム LWC でのフローの作成と起動」を参照してください。 |
lightning | formattedAddress | formatted-address | - |
lightning | formattedDateTime | formatted-date-time | lightning:formattedDateTime では、true または false の文字列か、変数を使用して hour12 属性を設定します。lightning-formatted-number では、変数のみを使用して hour12 属性を設定します。文字列は常に true として解釈されます。 |
lightning | formattedEmail | formatted-email | - |
lightning | formattedLocation | formatted-location | - |
lightning | formattedName | formatted-name | - |
lightning | formattedNumber | formatted-number | lightning:formattedNumber では、style 属性を使用して、表示する数値の型を指定します。lightning-formatted-number では、この目的のために format-style 属性を使用します。 |
lightning | formattedPhone | formatted-phone | - |
lightning | formattedRichText | formatted-rich-text | - |
lightning | formattedText | formatted-text | - |
lightning | formattedTime | formatted-time | - |
lightning | formattedUrl | formatted-url | - |
lightning | helptext | helptext | - |
lightning | icon | icon | - |
lightning | input | input | - |
lightning | inputAddress | input-address | - |
lightning | inputField | input-field | lightning:inputField には、項目が変更されたが保存されていないことを示す方法はありません。lightning-input-field では、項目がユーザによって変更されたが保存または送信されていないことを示す dirty 属性がサポートされています。詳細は、recordEditForm の違いを参照してください。lightning:inputField では readonly 属性がサポートされていますが、lightning-input-field では readonly と read-only の両方がサポートされています。 |
lightning | inputLocation | input-location | - |
lightning | inputName | input-name | - |
lightning | inputRichText | input-rich-text | lightning:inputRichText では、lightning:insertImageButton 子コンポーネントを使用して、[画像を挿入] ボタンを追加する必要があります。[リンクを挿入] ボタンやカスタムボタンはサポートされていません。lightning-input-rich-text には、画像およびリンクを挿入するボタンが用意されています。lightning-input-rich-text では、lightning-rich-text-toolbar-button-group コンポーネントと lightning-rich-text-toolbar-button コンポーネント (ベータ) を使用してカスタムボタンを追加できます。 |
lightning | insertImageButton | - | lightning-input-rich-text では [画像を挿入] ボタンがサポートされているため、lightning:insertImageButton は必要ありません。 |
lightning | layout | layout | lightning:layout では、lightning:layoutItem コンポーネント間で HTML タグ、テキスト、式、その他のコンポーネントを使用できます。lightning-layout では、lightning-layout-item コンポーネント間で式や他のコンポーネントは使用できません。ただし、lightning-layout-item コンポーネント間に HTML タグとテキストを配置できます。 |
lightning | layoutItem | layout-item | lightning-layout の違いを確認してください。 |
lightning | listView | - | Lightning Web コンポーネントはまだ使用できません。 |
lightning | map | map | - |
lightning | menuItem | menu-item | - |
lightning | navigation | navigation モジュール | Aura コンポーネントでは、lightning:navigation コンポーネントを使用してナビゲーションサービスにアクセスします。Lightning Web コンポーネントでは、lightning/navigation モジュールをコンポーネントの JavaScript にインポートします。「ページ、レコード、リストへの移動」を参照してください。 |
lightning | notificationsLibrary | platformShowToastEvent モジュール | Aura コンポーネントでは、notificationsLibrary コンポーネントを追加して、通知およびトーストを作成します。ライブラリには、showToast および showNotice イベントが用意されています。Lightning Web コンポーネントでは、lightning/platformShowToastEvent モジュールをコンポーネントの JavaScript にインポートします。このモジュールに ShowToastEvent という名前のイベントが用意されています。LWC では、まだ通知はサポートされていません。ShowToastEvent では、Aura の showToast と同じパラメータ、モード、バリエーションがサポートされています。「トースト通知」を参照してください。 |
lightning | outputField | output-field | recordViewForm の違いを参照してください。 |
lightning | overlayLibrary | - | Aura コンポーネントでは、overlayLibrary コンポーネントを追加して、モーダルダイアログおよびポップオーバーを作成します。ライブラリには showCustomModal()、showCustomPopover()、notifyClose() メソッドが用意されています。 |
lightning | path | - | Lightning Web コンポーネントはまだ使用できません。 |
lightning | picklistPath | - | Lightning Web コンポーネントはまだ使用できません。 |
lightning | pill | pill | lightning:pill では、アバターまたはアイコンを含めるために media 属性が必要です。lightning:pill では、variant 属性は使用できません。lightning-pill では、ネストされたコンポーネントとしてアバターおよびアイコンを受け入れることができます。 |
lightning | pillContainer | pill-container | - |
lightning | progressBar | progress-bar | - |
lightning | progressIndicator | progress-indicator | - |
lightning | progressRing | progress-ring | - |
lightning | quipCard | - | Lightning Web コンポーネントはまだ使用できません。 |
lightning | radioGroup | radio-group | - |
lightning | recordEditForm | record-edit-form | lightning:recordEditForm では、lightning:inputField コンポーネントをその内部で直接ネストする必要はありません。HTML タグ内で lightning:inputField コンポーネントや lightning:layout などのその他のコンポーネントをネストして、レイアウトを調整できます。lightning-input-field は、lightning-record-edit-form の子として使用されることを目的としています。HTML タグまたは別の基本コンポーネント (lightning-record-edit-form 内の lightning-layout など) で lightning-input-field をネストできます。ただし、カスタムコンポーネントでは lightning-input-field をネストできません。 |
lightning | recordForm | record-form | - |
lightning | recordViewForm | record-view-form | lightning:recordViewForm では、lightning:outputField コンポーネントをその内部で直接ネストする必要はありません。ただし、これは想定される使用方法です。lightning-output-field は lightning-record-view-form の子でなければなりません。lightning-layout などの別の要素で lightning-output-field をネストしないでください。これは、lightning-record-view-form 内などにあるコンテナに配置できます。 |
lightning | relativeDateTime | relative-date-time | - |
lightning | select | - | Lightning Web コンポーネントはまだ使用できません。モバイル環境では、ネイティブ <select> 要素を使用します。デスクトップ環境では、lightning-combobox Lightning Web コンポーネントの使用を検討してください。複数の選択をサポートするには、lightning-dual-listbox を使用します。 |
lightning | slider | slider | - |
lightning | spinner | spinner | - |
lightning | tab | tab | lightning:tab では、id 属性を使用して、タブを識別する文字列を割り当てます。lightning-tab では、value 属性を使用して、タブ識別子を割り当てます。tabset では、これらの文字列を使用して、どのタブがクリックされたかを判断します。 |
lightning | tabset | tabset | lightning:tabset では、selectedTabId 属性を使用して、開いているタブを指定します。lightning-tabset では、active-tab-value attribute を使用します。 |
lightning | textarea | textarea | - |
lightning | tile | tile | lightning:tile では、<aura:set\> を使用して、アバターコンポーネントまたはアイコンコンポーネントが含まれる media 属性を追加できます。lightning-tile では、media 名前付きスロットでアバターおよびアイコンコンポーネントを指定します。 |
lightning | tree | tree | - |
lightning | treeGrid | tree-grid | - |
lightning | unsavedChanges | - | Lightning Web コンポーネントはまだ使用できません。 |
lightning | verticalNavigation | vertical-navigation | - |
lightning | verticalNavigationItem | vertical-navigation-item | - |
lightning | verticalNavigationItemBadge | vertical-navigation-item-badge | - |
lightning | verticalNavigationItemIcon | vertical-navigation-item-icon | - |
lightning | verticalNavigationItemOverflow | vertical-navigation-item-overflow | - |
lightning | verticalNavigationSection | vertical-navigation-section | - |
aura | expression | カスタム JavaScript | 「式の移行」を参照してください。 |
aura | html | - | なし |
aura | if | lwc:if / lwc:elseif / lwc:else | 「条件式の移行」を参照してください。 |
aura | iteration | for:each | 「反復の移行」を参照してください。 |
aura | renderIf | lwc:if / lwc:elseif / lwc:else | 「条件式の移行」を参照してください。 |
aura | template | - | なし |
aura | text | - | なし |
aura | token | - | なし |
aura | unescapedHTML | - | なし |
force | canvasApp | - | なし |
force | inputField | input-field | Aura の force:inputField は lightning:inputField に置き換えられました。データ型に基づいて編集可能項目を作成するには、lightning:recordEditForm で lightning:inputField を使用するか、Lightning Web コンポーネントのこれに相当するものを使用します。 |
force | outputField | output-field | Aura の force:outputField は lightning:outputField に置き換えられました。データ型に基づいて参照のみの項目を作成するには、lightning:recordViewForm で lightning:outputField を使用するか、Lightning Web コンポーネントのこれに相当するものを使用します。 |
force | recordData | @wire | 「ワイヤサービスについて」を参照してください。 |
force | recordEdit | record-edit-form | force:recordEdit は lightning:recordEditForm に置き換えられました。 |
force | recordView | record-view-form | force:recordView は lightning:recordViewForm に置き換えられました。 |
ltng | require | platformResourceLoader モジュール | Aura コンポーネントでは、<ltng:require> タグをコンポーネントマークアップに追加して、外部の静的リソースを参照します。Lightning Web コンポーネントでは、lightning/platformResourceLoader モジュールをコンポーネントの JavaScript にインポートします。「サードパーティ JavaScript ライブラリの使用」を参照してください。 |
関連トピック