Dreamforce2023 Day1：Build Dynamic Screen Flows with LWC and Reactive Component

みなさまこんにちは！今回初めてDreamforceに参加しております！
人生初のアメリカ、サンフランシスコで、街の雰囲気や、Dreamforceのセッションの数やイベント参加者の人数にも圧倒されております。

参加されている方々のテンションも高く、Salesforceに対する期待がとても高いなと感じました。
今回はDreamforceに参加して、最初に見たセッションについてご紹介させていただきます！

Dreamforce2023のDay1セッションにて私が最初に参加した、「Build Dynamic Screen Flows with LWC and Reactive Component」というセッションで、LightningWebComponent(LWC)を用いた動的な画面フローを構築する方法について学んできましたので、サンプルコードとともにご紹介させていただきます！

上記スライドにあるように、現在の画面フローでは条件によって項目の出し分けを行うような画面を作成する場合、「次へ」ボタンを押して、画面遷移を行うといったような画面フローが多いかと思います。

そのため、画面遷移が行われる度にユーザに対して待ち時間が発生してしまい、ユーザ体験は低下してしまいます。
なるべく、画面遷移が行われないようにリアクティブな画面フローを構築していきたいところです。

画面フローにて、LWCで構築した入力ボックスを利用している場合でも、リアクティブに項目の出し分けが出来るようになります。

LWC側で値の変更を検知し、変更後の値とともにイベントを発火。
その後、画面フローでその値を条件に画面遷移を行うことなく、入力項目の表示/非表示を切り替えるといったような、リアクティブな画面を構築することができます。

画面フローは、申込機能やアンケートフォームなどに使われることも多いかと思いますので、スムーズな画面入力が可能となることによりユーザ体験は向上し、離脱も低下することが期待されますね。

簡単なデモでは、LWCで構築された選択リスト（Accept or Reject）でRejectされた場合にのみ、RejectionReasons項目が表示されるという動きを見せていただきました。

LWCを経由していても画面のロードもなく、スムーズに画面の項目が表示されていることが確認できました。

簡単ではありますが、こちらが実装のイメージになります。
・LWC側のJavaScript側で選択リスト値の変更を検知し「FlowAttributeChangeEvent」イベントを発行。

・フロービルダーの表示/非表示を切り替えたい項目の表示条件に、イベントから取得した値を比較条件に記載。
{!＜対象のコンポーネント名.イベント名＞}で、設定した値を取得することができます。

今後も画面フローのリアクティブ対応については、リリースがいくつか予定されているようですので、キャッチアップしてユーザ体験が向上するよう是非取り入れていきたいですね！

以上、Dreamforce2023初日のセッション、「Build Dynamic Screen Flows with LWC and Reactive Component」のご紹介でした。

引き続きDay2,3でも、Salesforceが提供する機能の進化をキャッチアップしていきたいと思います！！！