Summer '24 で認定 JavaScript デベロッパー資格を更新する

学習の目的

この単元を完了すると、次のことができるようになります。

Lightning Web コンポーネントを動的にインポートしてインスタンス化する。
URL アドレス指定可能な Lightning Web コンポーネントに移動する。
SLDS アーキテクチャの更新に備える。
Lightning 基本コンポーネントへのネイティブ Shadow DOM の更新に備える。
クラス属性とスタイル属性を使用すると余分な空白が表示されるコードを確認する。

認定資格を更新する

認定 JavaScript デベロッパー資格を保有している場合、その認定資格を維持するためには期日までにこのモジュールを修了する必要があります。資格を維持するためのもう 1 つ重要な点は、Trailhead アカウントと Webassessor アカウントをリンクさせておくことです。

この資格の取得を検討している方は、JavaScript デベロッパー資格を参照してください。

このバッジは誰でも取得できますが、このモジュールは認定 JavaScript デベロッパーの有資格者を対象としています。

認定資格の機密を守る

質の高い認定試験を実施し、価値ある資格を認定することは Salesforce の最優先事項です。業界随一と広く認められている認定資格制度を維持するためには、試験のセキュリティを確保し、その機密を保持することが不可欠です。

Salesforce 認定資格プログラムに参加する場合は、「Salesforce 認定資格プログラム同意書」に同意いただく必要があります。詳細は、Trailhead ヘルプ記事「Salesforce 認定資格プログラム同意書および行動規範」に記載の Salesforce 認定資格試験の受験ポリシーを確認してください。

この 1 年間に優れた機能が強化されています。その中でも特に重要なものについて説明します。

Lightning Web コンポーネントを動的にインポートしてインスタンス化する

動的コンポーネントを作成すれば、すべてのユースケースには必要のない大規模なモジュールを読み込む必要がなくなります。また、実行時まで基礎となるコンポーネントのコンストラクターが不明な場合は、コンポーネントインスタンスを作成できます。動的インポートは、コンポーネントをカスタマイズしやすくする便利なソリューションです。ただし、実行時にパフォーマンスオーバーヘッドが発生するため、常に最適なソリューションとは限りません。ですから、むやみに使用しないようにします。

対象: この変更は、Enterprise Edition、Unlimited Edition、Developer Edition の Lightning Experience に適用されます。

方法: Lightning Web コンポーネントを動的にインポートしてインスタンス化するには、Lightning Web セキュリティを有効にし、コンポーネント設定ファイルの apiVersion プロパティを 55.0 以降に設定します。

コンポーネントを動的にインスタンス化する方法についての詳細は、『Lightning Web Components 開発者ガイド』を参照してください。

Experience Cloud の LWR サイトは、静的に分析可能な動的インポートのみをサポートします。このユースケースで、import("c/analyzable") は機能しますが、import("c/" + "analyzable") は静的に分析可能でないため機能しません。

URL アドレス指定可能な Lightning Web コンポーネントに移動する

lightning__UrlAddressable ターゲットを使用して、URL からコンポーネントを利用可能にします。URL アドレス指定可能コンポーネントを作成するために、Lightning Web コンポーネントを Aura コンポーネントに埋め込む必要がなくなりました。特定のコンポーネントにディープリンクできる機能、アプリケーションのビューをブックマークして後で確認できる機能、ナビゲーションの改善などは、この機能強化により開発者の柔軟性とコントロールを増大させる手段です。

対象: この変更は、Lightning Experience とすべてのバージョンの Salesforce モバイルアプリケーションのカスタム Lightning Web コンポーネントに適用されます。また、Enterprise Edition、Performance Edition、Unlimited Edition、Developer Edition の Lightning コンソールアプリケーションにも適用されます。この変更はカスタムドメインおよび CDN サポートに干渉するため、エクスペリエンスビルダーサイトでは利用できません。

方法: Lightning Web コンポーネントの URL を生成して、URL から利用可能にするには、lightning__UrlAddressable ターゲットをコンポーネントの .js-meta.xml 設定ファイルに追加します。<isExposed> タグを true に設定します。<apiVersion> タグはこの機能に影響しないため、以前のバージョンまたは新しいバージョンに設定することができます。

<!-- myComponent.js-meta.xml -->
<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__UrlAddressable</target>
    </targets>
</LightningComponentBundle>

カスタムコンポーネントに移動するには、standard__component ページ参照種別の lightning/navigation モジュールを使用します。

// navToComponentWithState.js
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';


export default class NavToComponentWithState extends NavigationMixin(LightningElement) {
  navigateToComponent() {
    this[NavigationMixin.Navigate]({
      // Pass in pageReference
      type: 'standard__component',
      attributes: {
        componentName: 'c__myComponent',
      },
      state: {
        c__propertyValue: '2000',
      },
    });
  }
}

standard__component ページ参照種別には、次の属性があります。

componentName — namespace__componentName 形式の Lightning Web コンポーネント名

state オブジェクトには、任意のキーおよび値を渡すことができます。キーには名前空間を含める必要があり、値は文字列にする必要があります。登録済みの名前空間がない場合は、デフォルトの c__ 名前空間を追加します。

URL アドレス指定可能コンポーネント myComponent で、getter を使用して state オブジェクトからプロパティ値を返します。

// myComponent.js
import { LightningElement, wire, api } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';


export default class MyComponent extends LightningElement {
    @wire(CurrentPageReference)
    currentPageRef;


    @api propertyValue;


    get propertyValue() {
        return this.currentPageRef.state.c__propertyValue;
    }
}

lightning__UrlAddressable ターゲットがあるコンポーネントには、/lightning/cmp/c__MyComponent?c__mystate=value 形式の URL があります。

SLDS アーキテクチャの更新に備える

Summer ’24 から、Salesforce は今後の UI の変更をサポートするために、Lightning コンポーネント、Salesforce Lightning Design System (SLDS) のスタイル、カスタムプロパティの内部実装を変更しています。Salesforce では、将来を見据えて継続的に UI アーキテクチャを改善しています。このため、Salesforce が UI コンポーネントの内部実装を変更することがあります。

コンポーネントでサポート対象のデザインシステムカスタマイズが使用されていることを確認する

サポートされている技法を使用してコンポーネントまたはサイトをカスタマイズする場合は、SLDS アーキテクチャの更新によるカスタマイズへの影響がほとんどないものと予想されます。他方、コンポーネントにサポートされていないカスタマイズを使用する場合は、視覚的な不具合を防ぐために、サポートされている技法を使うように更新することをお勧めします。

対象: この変更は、すべてのエディションの Lightning Experience、Experience Cloud サイト、およびすべてのバージョンの Salesforce モバイルアプリケーションに適用されます。

一部の UI コンポーネントの内部が変更されているため、表示される DOM が変化する可能性があります。Salesforce コンポーネントの DOM 要素を CSS や JavaScript で変更したり、SLDS クラスを単体テストの対象にしたりしないでください。「Salesforce Component Internals Are Protected (Salesforce コンポーネントの内部は保護されている)」を参照してください。

アーキテクチャの更新に伴って変更される Salesforce コンポーネントと CSS スタイルを対象に Lightning ページや Experience Cloud サイトをカスタマイズすると、視覚的な不具合が発生する可能性があります。視覚的な不具合は、UI コンポーネントの色が若干異なったり、UI のレイアウトが変更されたりするなど、多岐にわたります。

方法: サポートされるカスタマイズ技法とサポートされないカスタマイズ技法、およびサイトの更新方法についての詳細は、「SLDS アーキテクチャの更新に関する FAQ」を参照してください。

LWR サイトと Aura サイトを準備する

SLDS アーキテクチャの更新によるサイトのカスタマイズへの影響はほとんどないものと予想されます。ただし、サイトで CSS を上書きするという方法で Salesforce コンポーネントをカスタマイズしている場合は、代わりにサポートされている技法を使用することをお勧めします。そうしないと、今後サイトで UI の製品イノベーションを採用するときに、視覚的な不具合が生じます。

対象: この変更は、Enterprise Edition、Performance Edition、Unlimited Edition、Developer Edition の Lightning Experience および Salesforce Classic でアクセスする Aura サイトと LWR サイトに適用されます。

Lightning 基本コンポーネントに対するネイティブ Shadow DOM の更新に備える

Salesforce は、Lightning 基本コンポーネントを Web 標準に準拠させるために継続的に取り組んでいます。この最新の取り組みは、将来のリリースで Lightning Web コンポーネントがネイティブ Shadow DOM をサポートするようにするプロセスの一環です (セーフハーバー)。

Salesforce では、ネイティブ Shadow DOM を採用してパフォーマンスを強化し、Web コンポーネントの標準に準拠するように、Lightning 基本コンポーネントを準備しています。こうした更新に伴って内部の DOM 構造が変更されます。テストでこれらのコンポーネントの以前の内部構造に依存していないことを確認してください。Spring '23 のリリース日から Summer ’24 のリリース日にかけて、ネイティブ Shadow DOM に備えるために 62 のコンポーネントが変更されています。

対象: この変更は、すべてのエディションの Lightning Experience とすべてのバージョンのモバイルアプリケーションに適用されます。

Summer ’24 では、ネイティブ Shadow DOM に備えるために次の追加コンポーネントが変更されました。

lightning-button
lightning-file-upload
lightning-formatted-name
lightning-formatted-number
lightning-navigation
lightning-progress-bar
lightning-progress-ring
lightning-select
lightning-textarea

Salesforce は、内部コンポーネント構造が保護されていることを文書化しています。パフォーマンスの改善、機能の強化、アクセシビリティのサポートのために、Salesforce は任意の時点でコンポーネントの内部を再設計することがあります。「コンポーネントのスタイル設定のアンチパターン」を参照してください。

重要: テストがこの保護された内部 DOM 構造に依存している場合は、できるだけ早くテストを作り直してください。

テストが内部 DOM 構造の変更に対応できることを確認するには、インテグレーションテストと Selenium ベースのテストを確認します。また、コンポーネントの CSS がベストプラクティスに従っていることも確認します。サポートされているインテグレーションテストでは、UI テスト自動化モデル (UTAM) と UTAM ページオブジェクトを使用します。このどちらも、コンポーネント構造の変更に合わせて最新の状態に維持されています。サポートされている Selenium ベースのテストについては、「Working with Shadow DOM Elements Using Webdriver (Webdriver を使用した Shadow DOM 要素の操作)」を参照してください。サポートされている CSS スタイルについては、『Lightning Web Components 開発者ガイド』の「Lightning Design System を使用してコンポーネントのスタイルを設定する」を参照してください。

クラス属性とスタイル属性に余分な空白が表示される

表示時に class および style 属性に余分な空白が挿入されるコンポーネントが増えています。Spring '23 で、フレームワークで静的要素を処理する方法を最適化したことで、Lightning Web コンポーネントの表示時間が改善したことが発表されました。この変更が、静的ノードの class 属性と style 属性が DOM に表示される方法に影響を及ぼしています。この 2 つの属性の値に、余分な空白や予期せぬ文字が表示されることがあります。

対象: この変更は、Lightning Experience、エクスペリエンスビルダーサイト、およびすべてのバージョンの Salesforce モバイルアプリケーションのカスタム Lightning Web コンポーネントに適用されます。また、Lightning Web コンポーネントのオープンソースにも適用されます。

方法: クラス値を含む要素の表示に余分な空白が含まれる場合があります。たとえば、highlight と yellow というクラス値が設定された要素があるとします。

<div class=" highlight yellow">

style 属性または class 属性を使用するコードを更新することをお勧めします。これまで、正確なクラス名を使用した場合に要素を照会することができました。

// Don’t do this
document.querySelector('[class="highlight yellow"]')

空白の変更を無視するセレクターを使用するようクエリを修正してください。

// Do this instead
document.querySelector('.highlight.yellow')

Lightning Web コンポーネントの重要な更新、SLDS アーキテクチャ、ネイティブ Shadow DOM に備える方法を習得しました。この単元のテストを受けて、上記のトピックの理解度を確認します。単元 2 では、lightning-record-picker という追加コンポーネントについて学習し、ハンズオン Challenge で学んだ知識を実践していただきます。

ヘルプをお探しですか?

もっと探す