tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Lightningコンポーネント開発のuiタグ廃止と代わりのタグについて確認しました

最近になってようやくLighntingコンポーネントの開発を仕事でつかいました。数年前に調べたときは「uiタグ」という専用のタグが用意されていてHTMLのuiタグと被ってるって思っていました。その後、lightningタグが出る出ないの部分までは情報を追っていたのですが、詳細については把握できていませんでした。Winter'20のリリースノートでそれについて触れられていて、「uiタグ」が正式に廃止されて「lighntingタグ」に差し替わることになっているみたいです。

f:id:tyoshikawa1106:20191112191443p:plain

ui 名前空間の Aura コンポーネントの廃止

※uiタグという記載をしていますが、正式にはLightningの「uiコンポーネント」とのことです。


uiタグをどのように変更するかについてもリリースノートにまとめられています。
f:id:tyoshikawa1106:20191112191651p:plain


新しいlightningタグについてはGoogle検索で使い方がヒットしました。
f:id:tyoshikawa1106:20191112192150p:plain


lighntingタグの詳細はこちら

uiコンポーネントのlighntingコンポーネント変換について

リリースノートのコピペですが、下記のとおりです。


■廃止された Aura コンポーネントには、次の推奨される代替方法を使用します。

ui:actionMenuItem

lightning:menuItem および lightning:buttonMenu に置き換えます。

ui:button

lightning:button、lightning:buttonIcon、または lightning:buttonIconStateful に置き換えます。ボタングループの場合、lightning:buttonGroup を使用します。

ui:checkboxMenuItem

lightning:menuItem および lightning:buttonMenu に置き換えます。

ui:inputCheckbox

checkbox、toggle、または checkbox-button 型を使用する lightning:input に置き換えます。チェックボックスグループの場合、代わりに lightning:checkboxGroup を使用します。

ui:inputCurrency

number 型および currency フォーマッタを使用する lightning:input に置き換えます。

ui:inputDate

date 型を使用する lightning:input に置き換えます。

ui:inputDateTime

datetime 型を使用する lightning:input に置き換えます。

ui:inputDefaultError

組み込みの項目検証を使用する lightning:input に置き換えます。

ui:inputEmail

email 型を使用する lightning:input に置き換えます。

ui:inputNumber

number 型を使用する lightning:input に置き換えます。

ui:inputPhone

phone 型を使用する lightning:input に置き換えます。

ui:inputRadio

radio 型を使用する lightning:input に置き換えます。ラジオグループの場合、代わりに lightning:radioGroup を使用します。

ui:inputRichText

lightning:inputRichText に置き換えます。

ui:inputSecret

password 型を使用する lightning:input に置き換えます。

ui:inputSelect

lightning:select または lightning:combobox に置き換えます。

ui:inputSelectOption

lightning:select または lightning:combobox に置き換えます。

ui:inputText

text 型を使用する lightning:input に置き換えます。

ui:inputTextArea

lightning:textarea に置き換えます。

ui:inputURL

url 型を使用する lightning:input に置き換えます。

ui:menu

lightning:buttonMenu に置き換えます。

ui:menuItem

lightning:menuItem および lightning:buttonMenu に置き換えます。

ui:menuItemSeparator

lightning:menuDivider および lightning:buttonMenu に置き換えます。

ui:menuList

lightning:menuItem および lightning:buttonMenu に置き換えます。

ui:menuTrigger

lightning:menuItem および lightning:buttonMenu に置き換えます。

ui:menuTriggerLink

lightning:menuItem および lightning:buttonMenu に置き換えます。

ui:message

lightning:notificationsLibrary に置き換えます。

ui:outputCheckbox

checkbox 型を使用する lightning:input に置き換えて readonly を true に設定します。

ui:outputCurrency

currency に設定された style を使用する lightning:formattedNumber に置き換えます。

ui:outputDate

lightning:formattedDateTime に置き換えます。

ui:outputDateTime

lightning:formattedDateTime または lightning:formattedTime に置き換えます。

ui:outputEmail

lightning:formattedEmail に置き換えます。

ui:outputNumber

lightning:formattedNumber に置き換えます。

ui:outputPhone

lightning:formattedPhone に置き換えます。

ui:outputRichText

lightning:formattedRichText に置き換えます。

ui:outputText

lightning:formattedText に置き換えます。

ui:outputTextArea

lightning:formattedText に置き換えます。

ui:outputURL

lightning:formattedUrl に置き換えます。

ui:radioMenuItem

lightning:menuItem および lightning:buttonMenu に置き換えます。


■次のイベントが非推奨になりました。

ui:menuFocusChange

lightning:buttonMenu に置き換えます。

ui:menuSelect

lightning:combobox に置き換えます。

ui:menuTriggerPress

lightning:buttonMenu に置き換えます。


本格的に開発開始する前に知れて良かったです。