[Summer'24] 気になるリリースをピックアップ〜LWC編〜

mcho

2024年5月22日 14:37

この記事はゆるっとSalesforceトーク #34 Summer '24リリースノートピックアップで発表した内容をまとめたものです。
Summer'24のリリースノートからLWC関連で気になるリリースをピックアップしました。

LWC API バージョン 61.0 で LWC の最新変更の取得

Version 61.0の主な変更点は3つです。
その他の細かい変更点はLWC(OSS)の Release v6.0.0 · salesforce/lwc を確認してください。

ElementInternals Web API を使用したカスタムフォームの作成

ElementInternals - Web API | MDN を使えるようになりました。これによりLWCをHTMLフォーム要素として使うことができるようになります。

Update Your Light DOM Components for Improved Slot Forwarding

Light DOMで以下のようにslotの伝搬を行えるようになりました。

<!-- container.html -->
<template>
  <c-outer>
    <span slot="namedSlot">Named slot content</span>    // Content to pass from namedSlot into forwardedSlot
  </c-outer>
</template>

<!-- outer.html -->
<template lwc:render-mode="light">
  <c-inner>
    <slot name="namedSlot" slot="forwardedSlot"></slot>    // The namedSlot slot
  </c-inner>
</template>

<!-- inner.html -->
<template>
  <slot name="forwardedSlot"></slot>    // The forwardedSlot slot
</template>

Call Component Lifecycle Hooks Using Native Browser APIs

ライフサイクルフックがコールされるタイミングが変更になりました。
リリースノートよりも GitHubのReleaseに詳しく書いてありました。
Native custom element lifecycle - Release v6.0.0 · salesforce/lwc
こちらには5つの変更が記載されていますが、Salesforce上で動作させる際に関係のある2つを紹介します。

connectedCallbackがコールされるのは、LWCがdocumentのDOMツリーに追加された時になりました

Version 61.0よりも前だと以下のように、divにappendChildした場合でもconnectedCallbackがコールされていました。

export default class Foo extends LightningElement {
  connectedCallback() {
    this.dispatchEvent(new CustomEvent('foo', { bubbles: true, composed: true }))
  }
}

const element = createElement('x-foo', { is: Foo })
const div = document.createElement('div')
div.addEventListener('foo', () => {
  console.log('received foo event!')
})
div.appendChild(element) // triggers connectedCallback

version 61.0からは、以下のようにdocumentのDOMツリーに追加されたタイミングでコールされるようになりました。

document.body.appendChild(div)

connectedCallbackで発生したエラーはtry-catchでは処理できなくなりました

Version 61.0よりも前だとtry-catch句で処理できていました。

export default class Foo extends LightningElement {
  connectedCallback() {
      throw new Error('foo')
  }
}
And then you expect to be able to catch the error synchronously on appendChild:

const element = lwc.createElement('x-foo', { is: Foo })
try {
  document.body.appendChild(element)
} catch (error) {
  console.log('caught error', error)
}

Version 61.0からはwindowでerrorイベントをリッスンします。

const listener = (error) => {
  console.log('Caught error', error)
}
try {
  window.addEventListener('error', listener)
  document.body.appendChild(element);
} finally {
  window.removeEventListener('error', listener)
}

lwc-jestで同様のことをやっている場合は、新しく追加されたexpect().toThrowInConnectedCallback メソッドの使用が推奨されます。

LWC でのサードパーティ Web コンポーネントの使用 (Beta)

こちらはBetaリリースです。
サードパーティのWeb Componentsが使えるようになります。
こちらに具体的な使い方が記載されています。
Use Third-Party Web Components in LWC (Beta) | Create Lightning Web Components | Lightning Web Components Developer Guide | Salesforce Developers

WebComponentsは静的リソースから読み込む、またはLWCのJavaScriptファイルで定義することができます。
WebComponents利用するには、lwc:externalを追加する必要があります。利用する場合のHTMLは以下のようになります。

<template>
　　<p>
　　　　Relative time (auto-updated every minute):
　　　　<relative-time 
　　　　　　lwc:external　
　　　　　　datetime={date}>
　　　　</relative-time>
　　</p>
</template>

URL アドレスで Lightning Web コンポーネントへの移動

LWCにURLでアクセスできるようになりました。
メタファイルにlightning__UrlAddressableを追加、isExposedをtrueとすると、URLが発行されます。

<!-- 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>

LWCからはNavigationMixinを使うことでアクセスできます。
componentNameのフォーマットは namespace__componentName です。
stateのプロパティは、キーが namespace__propertyName、値は文字列である必要があります。

    this[NavigationMixin.Navigate]({
      // Pass in pageReference
      type: 'standard__component',
      attributes: {
        componentName: 'c__myComponent',
      },
      state: {
        c__propertyValue: '2000',
      },
    });

これで発行されるURLは、{OrgUrl}/lightning/cmp/c__MyComponent?c__propertyValue=2000となりました。

ユーティリティバー内のユーティリティの制御

LWCからユーティリティバーを操作するためのAPIが追加されました。
このAPIはLightning Web Securityが有効である必要があります。

各APIの具体的な使い方は以下に記載されています。
Methods for the Utility Bar in Lightning Experience | Salesforce Console Developer Guide | Salesforce Developers

追加されたAPIは以下になります。

enableModal()—モーダルモードの有効/無効を切り替えます。
enablePopout()—ポップアウトの有効/無効を切り替えます。
getAllUtilityInfo()—すべてのユーティリティの状態を取得します。
getInfo()—ユーティリティ自身の状態を取得します。
minimize()—ユーティリティを最小化します。
onUtilityClick()—ユーティリティにクリックイベントリスナーを追加します。
open()—ユーティリティを開きます。
updatePanel()—開いたあとのパネルのアイコン、ラベル、横幅、縦幅を更新します。
updateUtility()—ユーティリティバーに表示されるアイコンとラベルを更新します。

Lightning Web セキュリティ有効化のロールアウトが延期されました

Lightning Web Securityの強制有効化は延期されました。しかし今後有効化が進んでいくので、現在の組織で無効な場合はサンドボックス環境で有効化してテストすることが推奨されています。

以上です！

少しずつ改善されていくLWCに今後も期待です！

この記事が気に入ったらサポートをしてみませんか？