2021/05/24

Salesforce Lightning UI名前空間のコンポーネント廃止と移行について

 
  

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

LightningのUI名前空間のコンポーネントのひとつである、Aura コンポーネントが廃止されます。Aura コンポーネントの廃止に先立ち、2021年5月1日をもってサポートが終了しました。 引き続き、Aura コンポーネントは使用できますが、今後はサポートが受け付けられないため、UI名前空間のもうひとつのコンポーネントである、Lightning Web コンポーネントの使用が推奨されています。

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

SalesforceのLightning Web コンポーネントはカスタム HTML 要素であり、HTML と最新の JavaScript を使用して作成されています。 Aura コンポーネントとは同一ページ内での共存、相互運用が可能です。いずれもシステム管理者やエンドユーザには、Lightning コンポーネントとして表示されます。 Salesforce のサポート対象であるブラウザ上で、適切に動作するために必要な機能を提供します。また、ブラウザでネイティブに実行されるコードによって構築されるLightning Web コンポーネントは、軽量で卓越したパフォーマンスを発揮します。

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

Aura コンポーネントの廃止により、LightningのUI名前空間のコンポーネントは、Lightning Web コンポーネントに統一されていきます。 Lightning Web コンポーネントには、Aura コンポーネントに対応するコンポーネントがあり、これらのコンポーネントに置き換えられます。Lightning Web コンポーネントは、より高速かつ効率的であり、標準でLightning Design System のスタイル設定を使用できます。

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

SalesforceのLightning Web コンポーネントとAura コンポーネントには同等の機能や属性があり、Aura コンポーネントの代替としてLightning Web コンポーネントを使用できます。 さらに、グローバル HTML 属性とイベントを継承するLightning Web コンポーネントは、Aura コンポーネントを使用する場合よりも機能性とパフォーマンスを向上させます。

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名前空間のコンポーネント廃止に対応しよう

Salesforce LightningのUI名前空間のAura コンポーネントの廃止とLightning Web コンポーネントへの移行について説明しました。 Aura コンポーネントのサポートは2021年5月1日をもって終了しています。パフォーマンス、アクセシビリティ、ユーザエクスペリエンスに加えて、グローバル基準への対応の点でも優れたLightning Web コンポーネントを使用することが推奨されています。 Aura コンポーネントとLightning Web コンポーネントの違いや移行方法を確認して、スムーズに移行していきましょう。]]>

ITエンジニアへのキャリアチェンジならキャリアチェンジアカデミー

この記事の監修者・著者

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

おすすめの動画

  • 【未経験からIT業界へ転職するなら】相談窓口とスキルの獲得はここで解決!IT転職が一気に有利に!【キャリアチェンジアカデミー】

  • 【費用一切不要】未経験からIT業界へ転職するならまずはここへ相談!【キャリアチェンジアカデミー】

  • 【何のエンジニアになれるのか?】未経験からITエンジニアを目指すとこんな道がある【キャリアチェンジアカデミー】