この記事の目次
Salesforce LightningのUI名前空間のAuraコンポーネント廃止とサポート終了

Salesforce のUI名前空間のLightning Web コンポーネント

Salesforce LightningのUI名前空間のコンポーネント廃止の影響は?

UI名前空間のAuraコンポーネント廃止と Lightning Web コンポーネント

UI名前空間のコンポーネントのスタイル設定
Salesforceにおける設計バリエーションと SLDS ユーティリティクラスについては、Aura コンポーネントと Lightning Web コンポーネントのどちらもサポートされています。 但し、コンポーネントのスタイル設定については、Aura コンポーネントが独自のクラスでカスタムスタイルを設定できるのに対し、Lightning Web コンポーネントでは設定できません。これはLightning Web コンポーネントがShadow DOM 標準に準拠しているためです。Lightning Web コンポーネントでは、カスタムスタイル設定の SLDS スタイル設定フックがサポートされています。Aura コンポーネントと Lightning Web コンポーネントの違い
ここでは、SalesforceのAura コンポーネントと Lightning Web コンポーネントの使用方法の違いについて説明します。名前形式とUI名前空間とコンポーネント名の区切り方に違いがあります。 Aura コンポーネント 名前形式:namespace:componentName UI名前空間とコンポーネント名:コロンで区切られる。 Lightning Web コンポーネント 名前形式:namespace-component-name UI名前空間とコンポーネント名:ダッシュで区切られる。Salesforce LightningのUI名前空間のコンポーネント移行
lightning:formattedText 基本コンポーネントを使用したAura コンポーネントを例に、同等のLightning Web コンポーネントへの移行の手順とコードのサンプルを紹介します。 ①名前空間とコンポーネント名を区切るコロンをダッシュに変更します。 ②キャメルケースのコンポーネント名をダッシュで区切ります。 例)formattedText → formatted-text ③Boolean 属性の値(true もしくは false)を削除します。Boolean 属性がtrue である場合は存在しています。 ④自己終了タグを完全終了タグに変更します。 例)</lightning-formatted-text>移行前:Aura コンポーネントのサンプル
<aura:component> <lightning:formattedText linkify=”true” value=”I like salesforce” /> </aura:component>移行後:Lightning Web コンポーネントのサンプル
<template> <lightning-formatted-text linkify value=”I like salesforce”> </template>Salesforce Lightningの UI名前空間のコンポーネント廃止に対応しよう

この記事の監修者・著者

-
未経験からITエンジニアへのキャリアチェンジを支援するサイト「キャリアチェンジアカデミー」を運営。これまで4500人以上のITエンジニアを未経験から育成・排出してきました。
・AWS、salesforce、LPICの合計認定資格取得件数:2100以上(2023年6月時点)
・AWS Japan Certification Award 2020 ライジングスター of the Year 受賞