Summer '23 の認定 JavaScript デベロッパー資格の更新

学習の目的

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

• RefreshView API を使用して、ページを更新せずにコンポーネントデータを同期する。
  
• Lightning Web コンポーネント用と Aura コンポーネント用の Lightning Web セキュリティを使用する。
  
• 新しい Salesforce 組織で Lightning Web セキュリティをデフォルトで使用する。
  
• ref を使用して DOM 要素を照会する。
  
• 改良された条件付きディレクティブを使用する。
  
• 新しいモーダルコンポーネントでオーバーレイを作成する。
  

認定資格を更新する

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

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

このバッジは誰でも取得できますが、このモジュールは Salesforce 認定 JavaScript デベロッパーの資格を有する開発者を対象としています。以降の説明は、受講者にこのレベルの知識と経験があるものと想定しています。 

認定資格の機密を守る

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

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

過去数回のリリースで多数の機能が強化されています。ここでは、今回のリリースの機能強化で特に重要なものについて説明します。

RefreshView API を使用して、ページを更新せずにコンポーネントデータを同期する

ページ全体を再読み込みしなくてもデータを同期できる機能は、ユーザーが実行するものでも、アプリケーションによって呼び出されるものでも、ユーザーエクスペリエンスにとって重要な要件です。新しい lightning/refresh モジュールと RefreshView API は、Lightning Web コンポーネント (LWC) と Aura コンポーネントでコンポーネントデータを更新する標準的な手段になります。これまで、LWC にはデータ更新 API がなく、Aura ラッパーと従来の force:refreshView を使用して更新するしかありませんでしたが、この方法では最新の Web 開発の要件を満たしません。RefreshView API では更新範囲が細かく管理されるため、開発者が後方互換性を維持しながらユーザーエクスペリエンスを改善することができます。この機能が前回のリリースから一部変更され、正式リリースされました。

対象: この変更は、Enterprise Edition、Unlimited Edition、Developer Edition の Lightning Experience に適用されます。Lightning Web セキュリティ (LWS) は、Salesforce 組織で有効になっている必要があります。

方法: RefreshView API を使用すると、ページ全体を再読み込みしなくても、コンポーネントの特定の階層 (ビューという) のデータが更新されます。この更新で、そのビューの更新イベントを登録しているコンポーネントによって外部から取得されるデータと完全同期します。RefreshView API では、エンドユーザーまたは Web コンポーネントによってトリガーされる更新がサポートされます。RefreshView API は、データ更新エクスペリエンスの標準的なメカニズムになり、更新範囲を柔軟に管理できます。

RefreshView API では、Salesforce プラットフォームのコンテナと、カスタム LWC や Aura コンポーネントのデータを更新できます。現在、基本 Lightning Aura コンポーネントで RefreshView API はサポートされていません。

Lightning Locker で RefreshView API はサポートされていません。

Lightning Web コンポーネント用と Aura コンポーネント用の Lightning Web セキュリティを使用する

Aura コンポーネントの Lightning Web セキュリティ (LWS) が正式リリース (GA) されました。Salesforce では、Spring '22 で Lightning Web コンポーネント向けの正式リリースを発表した LWS アーキテクチャの段階的なロールアウトを続行しています。 

対象: この変更は、すべてのエディションの Lightning Experience に適用されます。LWS は、Aura ベースの Experience Cloud サイトで使用される Lightning Web コンポーネントと Aura コンポーネントに影響します。LWR ベースの Experience Cloud サイトには影響しません。このサイトでは、独自の LWS インスタンスが使用されます。Spring '23 リリース以降、新しい組織、スクラッチ組織、Sandbox 組織では、Lightning Web コンポーネント用と Aura コンポーネント用 LWS がデフォルトで有効になっています。

理由: Lightning Locker は、Lightning コンポーネントのデフォルトのセキュリティアーキテクチャでした。Spring '22 で、Lightning Web コンポーネント用の Lightning Locker から LWS への置き換えが開始されました。今回、Aura コンポーネントでも LWS が機能するようになりました。

方法: Aura 用 LWS は、[設定] の [セッションの設定] にある [Lightning Web コンポーネント用および Aura コンポーネント用 Lightning Web セキュリティの使用] 設定で管理されます。

[Lightning Web コンポーネント用および Aura コンポーネント用 Lightning Web セキュリティの使用] 設定は、既存および新規のカスタム Lightning Web コンポーネントと Aura コンポーネントのすべてに適用されます。

主なテスト方法は、Sandbox でコンポーネントを手動検証することです。まったく同じ Sandbox を 2 つ設定することをお勧めします。LWS と Lightning Locker でのコンポーネントの動作を比較するには、一方の Sandbox の [設定] で LWS 設定を有効にします。Sandbox が 1 つしかない場合に動作を比較するには、[設定] で LWS 設定の有効と無効を切り替えて比較します。

既存またはパッケージ化された Lightning Web コンポーネントや Aura コンポーネントを本番にリリースする場合は、まず LWS が有効になっている Sandbox でテストしてください。

Spring '23 より前に組織で [Lightning Web コンポーネント用 Lightning Web セキュリティの使用] 設定が有効になっており、組織にカスタム Aura コンポーネントがある場合、LWS は引き続き有効ですが、Lightning Web コンポーネントにのみ影響します。その組織は Aura 用 LWS (ベータ) から除外されていましたが、Summer '23 で Aura コンポーネントに影響しないいように、この機能が正式リリースされた現在も除外されています。LWS の段階的なロールアウトの目標は、LWS の影響を受けないことが予想される組織から始めて、最終的にはすべての組織で LWS を有効にすることです。

Aura 用 LWS からの一部の組織の除外は本番組織にのみ適用されます。Aura コンポーネント用 LWS は Summer '23 に Sandbox で有効になり、お客様は Aura コンポーネントをテストできるようになります。

次の表に、Winter '23 と Spring '23 で LWS がすでに有効になっている場合、Summer '23 の本番組織で LWC 用 LWS と Aura 用 LWS 機能が有効になるかどうかがまとめられています。

Winter '23 と Spring '23 で本番組織の LWS を有効にしなかった場合に、組織のシステム管理者が Summer '23 で有効にすると、LWC 用 LWS と Aura 用 LWS の両方が有効になります。

新しい Salesforce 組織で Lightning Web セキュリティをデフォルトで使用する

新しい Salesforce 組織では、[Lightning Web コンポーネント用 Lightning Web セキュリティの使用] 設定がデフォルトで有効になります。この有効化により、Spring '22 で発表された新しい Lightning Web セキュリティアーキテクチャの段階的なロールアウトが続行されます。

対象: この変更は、すべてのエディションの Lightning Experience を使用する新しい Salesforce 組織に適用されます。Lightning Web セキュリティ設定は、Aura ベースの Experience Cloud サイトで使用される Lightning Web コンポーネントに影響します。LWR ベースの Experience Cloud サイトには影響しません。スクラッチ組織でも Lightning Web セキュリティがデフォルトで有効になります。

方法: [Lightning Web コンポーネント用および Aura コンポーネント用 Lightning Web セキュリティの使用] 設定は、[設定] の [セッションの設定] にあります。この設定をオフにすると、組織で再度 Lightning Web コンポーネント用 Lightning Locker が使用されます。組織に Lightning コンポーネントがない場合、Lightning Locker に戻る理由はありません。組織で Lightning Web コンポーネントのみを使用している場合は、LWS の有効化による問題がコンポーネントに発生している場合のみ Lightning Locker に戻ることを検討します。

既存の Lightning Web コンポーネントやパッケージ化された Lightning Web コンポーネントを新しい組織に移す場合、まず LWS が有効になっている Sandbox 環境でテストしてください。Lightning Web コンポーネントと LWS が正常に動作せず、次のリソースリンクを使用して問題を解決できない場合は、サポートケースを登録してください。

スクラッチ組織定義ファイルで lockerServiceNext ブール値を使用して、スクラッチ組織の LWS を有効または無効にします。たとえば、次の行を定義ファイルに追加して、スクラッチ組織の LWS を無効にします。

"settings": {
     "securitySettings": {
         "sessionSettings": {
            "lockerServiceNext": false
           }
      }
}

ref を使用して DOM 要素を照会する

ref を使用して、Shadow DOM と Light DOM の要素にアクセスできるようになりました。ref は、セレクターを使わずに DOM 要素を見つけ、指定されたテンプレートに含まれる要素のみを照会します。これまで、特定の DOM 要素を見つけるには querySelector() しか使用できませんでした。

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

方法: まず、lwc:ref ディレクティブを要素に追加し、値を割り当てます。その参照をコールするには、this.refs を使用します。次の例では、<div> 要素に lwc:ref="myDiv" ディレクティブがあり、実行時、this.refs によって参照され、<div> へのアクセスが行われます。

<template>
    <div lwc:ref="myDiv"></div>
</template>




export default class extends LightningElement {
  renderedCallback() {
    console.log(this.refs.myDiv);
  }
}

存在しない ref に this.refs をコールすると、undefined が返されます。テンプレートに lwc:ref ディレクティブが重複して含まれている場合、this.refs は最後のディレクティブを参照します。コンポーネントに複数のテンプレートがある場合、this.refs は最後に表示されたテンプレートを参照します。

改良された条件付きディレクティブを使用する

従来の if:true や if:false ディレクティブが、lwc:if、lwc:elseif、lwc:else 条件付きディレクティブに置き換わりました。

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

方法: lwc:if、lwc:elseif、lwc:else 条件付きディレクティブを使用すると、プロパティ getter へのアクセスがディレクティブのインスタンスごとに 1 回のみになります。

<!-- conditionalExample.html -->
<template>
   <template lwc:if={isTemplateOne}>
        This is template one.
   </template>
   <template lwc:else>
       This is template two.
</template>
</template>

lwc:elseif と lwc:else はどちらも、同階層の lwc:if または lwc:elseif のすぐ後ろに続ける必要があります。

式は lwc:if や lwc:elseif に渡し、lwc:else には渡しません。

expression1 で truthy が返されると、他のどのプロパティ getter もアクセスされません。

<!-- example.html -->
<template>
    <template lwc:if={expression1}>
        Statement 1
    </template>
    <template lwc:elseif={expression2}>
        Statement 2
    </template>
    <template lwc:else>
        Statement 3
    </template>
</template>

これまで、if:true ブロックや if:false ブロックのチェーニングによってパフォーマンスコストが発生し、プロパティ getter が何回もコールされていました。

<!-- legacyConditional.html -->
<template>
    <!---Replace if:true with lwc:if-->
    <template if:true={isTemplateOne}>
        This is template one.
    </template>
    <!-- Replace if:false with lwc:else -->
    <template if:false={isTemplateOne}>
        This is template two.
    </template>
</template>

重要 従来の if:true と if:false ディレクティブは、今後廃止され削除される予定のため、現在は推奨されません。コードが今後の変更に対応できるように、新しい条件付きディレクティブを代わりに使用することをお勧めします。

lwc:if、lwc:elseif、lwc:else 条件付きディレクティブを使用するときは、次のガイドラインに留意してください。

• 条件付きディレクティブは、ネストされた <template> タグ、<div> タグ、その他の HTML 要素や、<c-custom-cmp> のようなカスタムコンポーネントタグで使用します。
  
• lwc:elseif または lwc:else の前にテキストや他の要素を配置することはできません。タグ間の空白文字が条件付きディレクティブと同階層である場合、その空白文字は無視されます。たとえば、lwc:if の後、lwc:else の前に <div> タグを含めることはできません。
  
• !condition や object?.property?.condition など、複雑な式はサポートされていません。複雑な式を評価するには、JavaScript クラスで getter を使用します。
  

新しいモーダルコンポーネントでオーバーレイを作成する

モーダルを使用してユーザーのワークフローを中断し、重要なメッセージに注意を向けます。現在のアプリケーションウィンドウの上にメッセージを表示するモーダルでは、アプリケーションの制御を取り戻すにはユーザーが操作する必要があります。

対象: この機能は、すべてのエディションの Lightning Experience で使用できます。

方法: モーダルコンポーネントを作成するには、JavaScript ファイルの lightning/modal から LightningModal をインポートします。次に、LightningModal を拡張するコンポーネントクラスを作成します。

/* c/myModal.js */
import { api } from 'lwc';
import LightningModal from 'lightning/modal';
export default class MyModal extends LightningModal {
    handleOkay() {
        this.close('okay');
   }
}

このコンポーネントは lightning-modal タグを使用しません。代わりに、モーダルの HTML テンプレートはヘルパー lightning-modal-* コンポーネントを使用して、モーダルのヘッダー、フッター、および本文を作成します。lightning-modal-body コンポーネントは必須で、その他は省略可能です。

<!-- c/myModal.html -->
<template>
    <lightning-modal-header label="My Modal Heading"></lightning-modal-header>
 <lightning-modal-body>This is the modal’s contents.</lightning-modal-body>
  <lightning-modal-footer>
      <lightning-button label="OK" onclick={handleOkay}></lightning-button>
  </lightning-modal-footer>
</template>

リソース

• Salesforce ヘルプ: RefreshView API を使用したページ更新を伴わないコンポーネントデータの同期
• Lightning Web コンポーネント開発者ガイド: RefreshView API によるコンポーネントデータの更新
• Lightning Web コンポーネント開発者ガイド: Lightning Web セキュリティ
• Salesforce ヘルプ: Lightning Web コンポーネント用および Aura コンポーネント用 Lightning Web セキュリティの使用
• Salesforce ヘルプ: 新しい Salesforce 組織でデフォルトで使用される Lightning Web セキュリティ
• Salesforce ヘルプ: ref を使用した DOM 要素の照会
• Lightning Web コンポーネント開発者ガイド: コンポーネントが所有する要素へのアクセス
• Salesforce ヘルプ: 改良された条件付きディレクティブの使用
• Lightning Web コンポーネント開発者ガイド: 条件に応じた DOM 要素の表示 
• Salesforce ヘルプ: 新しいモーダルコンポーネントでのオーバーレイの作成
• Salesforce 開発者ガイド: コンポーネントライブラリ