見出し画像

[Spring '24] 気になるリリースをピックアップ ~LWC関連~

こんにちは、町田です!
Spring '24のリリースノートから気になるリリースをピックアップするシリーズ記事となります。
この記事は、LWC編となります。

LWC API バージョン 60.0での変更点

まずはLWC自体のアップデート情報です!
API バージョン60.0は LWC OSSの salesforce/lwc at v5.0.0 ベースとなります。

空のテキストノードが空のコメントノードに置き換わる

SSRをしている場合にサーバー側とフロント側でDOMの解釈を一致されるための修正のようです。Snapshot Testを行っている場合は更新が必要になります。

追加の空白文字を表示する Light DOM

Light DOM だと、戦闘に空のテキストノードが追加されるようになります。childNodes[0]は必ず空のテキストノードとなるため、他の方法で要素を取得することが推奨されることになりました。

デコレーターが LightningElement クラス以外で構文エラーをスロー

LightningElementを継承していないクラスでは、@apiなどのデコレーターが付与されていた場合、エラーとなります。

オブジェクトの残余およびスプレッドのトランスパイルの削除

Babelのトランスパイル時に発生するバグを回避するための修正です。

Lightning レコードピッカーコンポーネントを使用したレコードの検索 (正式リリース)

標準フォームの関連リストと同様のコンポーネントです。以下にカスタムする際に使用するプロパティの概要を記載しました。詳細な使い方は lightning-record-picker - specification - Salesforce Lightning Component Library を参照してください。

  • object-api-name: 検索対象のオブジェクトのAPI名を指定します。

  • filter: 検索対象レコードを絞り込みます。

  • matching-info: キーワード一致対象の項目を絞り込みます。

  • display-info: 検索結果に表示する項目を設定します。

Lightning レコードピッカー

基本コンポーネント lightning-input の内部 DOM 構造の変更

将来のネイティブ Shadow サポートのための Lightning 基本コンポーネント内部 DOM 構造の変更 に関連した変更です。
テストなどでlightning-inputの内部DOM要素の取得している場合、修正が必要になります。

Interact with NFC Tags on a Mobile Device

モバイルLWCからデバイスのネイティブNFC機能を使えるようになります。NFCタグの読み取り、消去、書き込みが行うことができます。

Scan Documents on a Mobile Device

モバイルLWCでOCRができるようになります。ただし印刷された文字のみで、手書きは非対応です。

以上です!

lightning-record-pickerは、プロパティによるカスタマイズもでき、これまで自作しなければならなかった手間を減らすことができそうです。